風景

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,並且在表格的底部有一個 ApplyButton

找到第一個 TextBox 並檢視它的 Text 屬性:

Text="{Binding CustomerToEdit.Forename}"

這個特殊的大括號語法不是將 TextBox 的文字設定為固定值,而是將文字繫結到 pathCustomerToEdit.Forename。這條道路相對於什麼?它是檢視的資料上下文 - 在本例中是我們的檢視模型。正如你可能想到的那樣,繫結路徑是檢視模型的 CustomerToEdit 屬性,它是 Customer 型別,反過來暴露了一個名為 Forename 的屬性 - 因此是虛線路徑表示法。

同樣,如果你看一下 Button 的 XAML,它有一個 Command,它繫結到檢視模型的 ApplyChangesCommand 屬性。這就是將按鈕連線到 VM 命令所需的全部內容。

DataContext

那麼如何將檢視模型設定為檢視的資料上下文?一種方法是在檢視的程式碼隱藏中設定它。按 F7 檢視此程式碼檔案,並在現有建構函式中新增一行以建立檢視模型的例項,並將其分配給視窗的 DataContext 屬性。它應該看起來像這樣:

    public MainWindow()
    {
        InitializeComponent();

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

在現實世界的系統中,通常使用其他方法來建立檢視模型,例如依賴注入或 MVVM 框架。