风景

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 框架。