风景

View 是 M V VM 中的 V 。这是你的用户界面。你可以使用 Visual Studio 拖放设计器，但大多数开发人员最终都会编写原始 XAML 代码 - 这种体验类似于编写 HTML。

这是允许编辑 Customer 模型的简单视图的 XAML。而不是创建一个新的视图，这可以只是粘贴到 WPF 项目的 MainWindow.xaml 文件中，在 <Window ...> 和 </Window> 标签之间： -

<StackPanel Orientation="Vertical"
            VerticalAlignment="Top"
            Margin="20">
    <Label Content="Forename"/>
    <TextBox Text="{Binding CustomerToEdit.Forename}"/>

    <Label Content="Surname"/>
    <TextBox Text="{Binding CustomerToEdit.Surname}"/>

    <Button Content="Apply Changes"
            Command="{Binding ApplyChangesCommand}" />
</StackPanel>

此代码创建一个简单的数据输入表单，由两个 TextBoxes 组成 - 一个用于客户的名字，一个用于姓氏。每个 TextBox 上方都有一个 Label，并且在表格的底部有一个 Apply``Button。

找到第一个 TextBox 并查看它的 Text 属性：

Text="{Binding CustomerToEdit.Forename}"

这个特殊的大括号语法不是将 TextBox 的文本设置为固定值，而是将文本绑定到 path``CustomerToEdit.Forename。这条道路相对于什么？它是视图的数据上下文 - 在本例中是我们的视图模型。正如你可能想到的那样，绑定路径是视图模型的 CustomerToEdit 属性，它是 Customer 类型，反过来暴露了一个名为 Forename 的属性 - 因此是虚线路径表示法。

同样，如果你看一下 Button 的 XAML，它有一个 Command，它绑定到视图模型的 ApplyChangesCommand 属性。这就是将按钮连接到 VM 命令所需的全部内容。

DataContext

那么如何将视图模型设置为视图的数据上下文？一种方法是在视图的代码隐藏中设置它。按 F7 查看此代码文件，并在现有构造函数中添加一行以创建视图模型的实例，并将其分配给窗口的 DataContext 属性。它应该看起来像这样：

    public MainWindow()
    {
        InitializeComponent();

        // Our new line:-
        DataContext = new CustomerEditViewModel();
    }

在现实世界的系统中，通常使用其他方法来创建视图模型，例如依赖注入或 MVVM 框架。