WPF - 資料繫結

資料繫結是 WPF 應用程式中的一種機制，它為 Windows 執行時應用程式提供了一種簡單易用的方法來顯示和互動資料。在這種機制中，資料的管理完全與資料的方式分離。

資料繫結允許資料在 UI 元素和使用者介面上的資料物件之間流動。當建立繫結並且資料或您的業務模型發生變化時，它會自動將更新反映到 UI 元素，反之亦然。也可以繫結到頁面上的另一個元素，而不是標準資料來源。

資料繫結有兩種型別：單向資料繫結和雙向資料繫結。

單向資料繫結

在單向繫結中，資料從其源（即儲存資料的物件）繫結到其目標（即顯示資料的物件）。

讓我們舉一個簡單的例子來詳細瞭解單向資料繫結。首先，建立一個名為WPFDataBinding的新 WPF 專案。
以下 XAML 程式碼建立了兩個標籤、兩個文字框和一個按鈕，並使用一些屬性對其進行初始化。

<Window x:Class = "WPFDataBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:WPFDataBinding" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions>
		
      <Label Name = "nameLabel" Margin = "2">_Name:</Label> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode = OneWay}"/>  
			
      <Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label> 
		
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = OneWay}"/>  
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click="Button_Click" /> 
      </StackPanel> 
		
   </Grid> 
</Window>

兩個文字框的文字屬性分別繫結到“Name”和“Age”，它們是 Person 類的類變數，如下所示。
在 Person 類中，我們只有兩個變數Name和Age，並且它的物件在MainWindow類中初始化。
在 XAML 程式碼中，我們繫結到屬性 Name 和 Age，但我們沒有選擇該屬性屬於哪個物件。
更簡單的方法是在DataContext中分配一個物件，我們在以下MainWindow建構函式中的 C# 程式碼中繫結其屬性。

using System.Windows;  
namespace WPFDataBinding { 

   public partial class MainWindow : Window {
	
      Person person = new Person { Name = "Salman", Age = 26 };
		
      public MainWindow() { 
         InitializeComponent(); 
         this.DataContext = person; 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) { 
         string message = person.Name + " is " + person.Age; 
         MessageBox.Show(message); 
      } 
   } 
	
   public class Person { 
	
      private string nameValue;
		
      public string Name { 
         get { return nameValue; } 
         set { nameValue = value; } 
      } 
		
      private double ageValue; 
		
      public double Age { 
         get { return ageValue; } 
				
         set { 
            if (value != ageValue) { 
               ageValue = value; 
            } 
         } 
      }
		
   } 
}

讓我們執行此應用程式，您會立即在我們的 MainWindow 中看到我們已成功繫結到該 Person 物件的 Name 和 Age。

當您按下顯示按鈕時，它將在訊息框中顯示姓名和年齡。

讓我們在對話方塊中更改姓名和年齡。

如果您現在單擊“顯示”按鈕，它將再次顯示相同的訊息。

這是因為資料繫結模式在 XAML 程式碼中設定為單向。要顯示更新的資料，您需要了解雙向資料繫結。

雙向資料繫結

在雙向繫結中，使用者可以透過使用者介面修改資料，並將該資料更新到源中。如果源在使用者檢視檢視時發生更改，則希望檢視更新。

讓我們採用相同的示例，但在這裡，我們將 XAML 程式碼中的繫結模式從單向更改為雙向。

<Window x:Class = "WPFDataBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:WPFDataBinding" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions> 
		
      <Label Name = "nameLabel" Margin = "2">_Name:</Label> 
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode = TwoWay}"/>  
      <Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label> 
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = TwoWay}"/> 
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click = "Button_Click" /> 
      </StackPanel>
		
   </Grid>
	
</Window>

讓我們再次執行此應用程式。

它將產生相同的輸出：

現在讓我們更改 Name 和 Age 值：

如果您現在單擊“顯示”按鈕，它將顯示更新的訊息。

我們建議您在兩種情況下都執行上述程式碼，以便更好地理解該概念。

列印頁面