wpf 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>

这段代码创建了一个简单的数据输入表单TextBox，该表单由两个es组成-一个用于客户的姓氏，另一个用于姓氏。在Label每个上方都有TextBox一个Button，在窗体的底部有一个“应用” 。

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

Text="{Binding CustomerToEdit.Forename}"

TextBox这种特殊的花括号语法不是将的文本设置为固定值，而是将文本绑定到“路径” CustomerToEdit.Forename。这条相对的路是什么？这是视图的“数据上下文”-在这种情况下，就是我们的视图模型。您可能会发现，绑定路径是视图模型的CustomerToEdit属性，该属性的类型Customer又公开了一个称为的属性Forename-因此是“点分”路径符号。

同样，如果您查看Button的XAML，它的XAMLCommand绑定到ApplyChangesCommand视图模型的属性。只需将按钮连接到VM的命令即可。

DataContext

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

    public MainWindow()
    {
        InitializeComponent();

        // 我们的新线：
        DataContext = new CustomerEditViewModel();
    }

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