使用 WPF 和 XAML 以及数据绑定查看设计视图中的 UI 更改？答案

【问题标题】：See UI changes in design view with WPF & XAML and data binding?使用 WPF 和 XAML 以及数据绑定查看设计视图中的 UI 更改？
【发布时间】：2015-05-29 21:31:51
【问题描述】：

我刚刚在 XAML 上观看了这段视频，他在其中创建了一个时钟，并注意到他实际上可以在 Xaml 设计视图中看到他从 C Sharp 所做的所有更改。

在 33:30，他创建了他的类：https://youtu.be/Wb-l0e6WYE0?t=2008

在 37:10 他绑定到那个类：https://youtu.be/Wb-l0e6WYE0?t=2227

稍后在 40:17，您实际上可以在设计视图中看到时钟在滴答作响！

我尝试通过创建一个名为 Ball 的类来实现这一点，该类具有一些属性，例如大小，并将这些属性绑定到一个 Canvas，该 Canvas 具有一个矩形，该矩形具有一个 EllipseGeometry 剪辑，使它成为圆形。运行应用程序时它工作正常，但设计视图只是白色。

有人知道他是怎么做到的吗？

我的代码：

MainWindow.xaml

<Window x:Class="XamlTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:XamlTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Canvas Background="White">
        <Rectangle Height="{Binding Size}" Width="{Binding Size}" Fill="Green" Canvas.Top="40">
            <Rectangle.Clip>
                <EllipseGeometry Center="{Binding EllipseCenter}" RadiusX="{Binding EllipseRadius}" RadiusY="{Binding EllipseRadius}"/>
            </Rectangle.Clip>
        </Rectangle>
    <Button x:Name="button" Content="Button" Width="75" Click="button_Click"/>
</Canvas>

代码背后：

using System.Windows;
namespace XamlTest
{
public partial class MainWindow : Window
{
    Ball TheBall = new Ball();
    public MainWindow()
    {
        InitializeComponent();
        TheBall.Size = 300;
        this.DataContext = TheBall;
    }


    private void button_Click(object sender, RoutedEventArgs e)
    {

        TheBall.Size = TheBall.Size + 40;
    }
}
}

球类：

using System.Windows;
namespace XamlTest
{
class Ball : INotifyPropertyChangedBase
{
    public Ball()
    {
        Size = 50;
    }
    private double _size;
    public double Size
    {
        get
        {
            return _size;
        }
        set
        {
            _size = value;
            EllipseCenter = new Point(_size / 2, _size / 2);
            EllipseRadius = _size / 2;
            OnPropertyChanged("Size");
        }
    }

    private Point _ellipseCenter;
    public Point EllipseCenter
    {
        get
        {
            return _ellipseCenter;
        }
        set
        {

            _ellipseCenter = value;
            OnPropertyChanged("EllipseCenter");
        }
    }

    private double _ellipseRadius;
    public double EllipseRadius
    {
        get {
            return _ellipseRadius;
        }
        set {
            _ellipseRadius = value;
            OnPropertyChanged("EllipseRadius");
        }
    }


}
}

INotifyPropertyChangedBase 类：

using System.ComponentModel;
namespace XamlTest
{

public class INotifyPropertyChangedBase : INotifyPropertyChanged
{


    public event PropertyChangedEventHandler PropertyChanged;

    internal void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;

        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
}

我还有一个增加球大小的按钮！

感谢您的帮助。

【问题讨论】：

标签： c# wpf xaml designview

【解决方案1】：

DataContext 允许 XAML 找到要绑定到的类的实例。

然后，XAML 中的绑定允许您绑定到所述类的特定属性。

有两个单独的 DataContext：design time 和 run time。

要设置design time DataContext，请参阅：

http://adamprescott.net/2012/09/12/design-time-data-binding-in-wpf/

本质上，当您设置设计时 DataContext 时，WPF 运行时将在幕后自动实例化您指向的类的新实例（或者如果它是静态的，则简单地指向该类），然后 Visual Studio 设计当您正在编辑 XAML 时，时间设计器将显示您的课程中的实时值。这使得设计非常快，因为您可以使用实时数据，并且您不必一直运行程序来查看它的外观。

要设置run time DataContext，请参阅ReSharper WPF error: "Cannot resolve symbol "MyVariable" due to unknown DataContext"。答案描述了如何使用免费的 Snoop 实用程序来检测运行时绑定错误。

【讨论】：

【解决方案2】：

添加此代码：

d:DataContext="{d:DesignInstance  local:Ball,IsDesignTimeCreatable=True}"

现在我可以在设计时看到我的绿球了！

谢谢！

【讨论】：