風景

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