MVVM – WPF 資料繫結

本章將學習資料繫結如何支援 MVVM 模式。資料繫結是 MVVM 與其他 UI 分離模式（如 MVC 和 MVP）的關鍵區別。

對於資料繫結，您需要構建一個檢視或一組 UI 元素，然後您需要繫結指向的其他物件。
檢視中的 UI 元素繫結到 ViewModel 公開的屬性。
檢視和 ViewModel 的構建順序取決於具體情況，我們首先介紹了檢視。
檢視和 ViewModel 被構建，並且檢視的 DataContext 設定為 ViewModel。
繫結可以是單向或雙向資料繫結，以便在檢視和 ViewModel 之間來回傳遞資料。

讓我們在同一個示例中看看資料繫結。以下是 StudentView 的 XAML 程式碼。

<UserControl x:Class = "MVVMDemo.Views.StudentView" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:local = "clr-namespace:MVVMDemo.Views" 
   xmlns:viewModel = "clr-namespace:MVVMDemo.ViewModel" 
   xmlns:vml = "clr-namespace:MVVMDemo.VML" 
   vml:ViewModelLocator.AutoHookedUpViewModel = "True" 
   mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">

   <!--<UserControl.DataContext> 
      <viewModel:StudentViewModel/> 
   </UserControl.DataContext>--> 

   <Grid> 
      <StackPanel HorizontalAlignment = "Left"> 
         <ItemsControl ItemsSource = "{Binding Path = Students}"> 
            <ItemsControl.ItemTemplate>
               <DataTemplate> 
					
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}" 
                        Width = "100" Margin = "3 5 3 5"/>
								
                     <TextBox Text = "{Binding Path = LastName, Mode = TwoWay}" 
                        Width = "100" Margin = "0 5 3 5"/> 
								
                     <TextBlock Text = "{Binding Path = FullName, Mode = OneWay}" 
                        Margin = "0 5 3 5"/> 
								
                  </StackPanel> 
						
               </DataTemplate> 
            </ItemsControl.ItemTemplate> 
         </ItemsControl> 
      </StackPanel> 
   </Grid> 

</UserControl>

如果您檢視上面的 XAML 程式碼，您會看到 ItemsControl 繫結到 ViewModel 公開的 Students 集合。
您還可以看到 Student 模型的屬性也有其各自的繫結，這些繫結也繫結到文字框和文字塊。
ItemsControl 的 ItemSource 能夠繫結到 Students 屬性，因為檢視的整體 DataContext 設定為 ViewModel。
這裡的屬性的各個繫結也是 DataContext 繫結，但由於 ItemSource 的工作方式，它們本身並沒有繫結到 ViewModel。
當專案源繫結到其集合時，它會在渲染時為每個專案渲染一個容器，並將該容器的 DataContext 設定為該專案。因此，每一行中每個文字框和文字塊的整體 DataContext 將是集合中的單個 Student。您還可以看到這些文字框的繫結是雙向資料繫結，而文字塊的繫結是單向資料繫結，因為您無法編輯文字塊。

再次執行此應用程式時，您將看到以下輸出。

現在讓我們將第一行第二個文字框中的文字從 Allain 更改為 Upston，然後按 Tab 鍵失去焦點。您會看到文字塊文字也已更新。

這是因為文字框的繫結設定為雙向繫結，它也更新了模型，然後模型又更新了文字塊。

列印頁面