XAML - 資料繫結

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

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

單向資料繫結
雙向資料繫結

單向資料繫結

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

讓我們來看一個簡單的單向資料繫結的示例。以下 XAML 程式碼建立了四個文字塊，並設定了一些屬性。

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}" />
         </StackPanel> 
		
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Title}" /> 
         </StackPanel>
      </StackPanel>
   </Grid> 
	
</Window>

兩個文字塊的 Text 屬性分別靜態設定為“Name”和“Title”，而其他兩個文字塊的 Text 屬性則繫結到“Name”和“Title”，它們是 Employee 類的類變數，如下所示。

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Ali Ahmed", Title = "Developer" 
         }; 
         return emp; 
      }
   }
}

在這個類中，我們只有兩個變數，Name 和 Title，以及一個靜態方法，其中初始化 Employee 物件並返回該 Employee 物件。因此，我們繫結到一個屬性 Name 和 Title，但我們沒有選擇該屬性屬於哪個物件。最簡單的方法是將一個物件分配給 DataContext，我們在以下 C# 程式碼中繫結該物件的屬性：

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   }
}

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

雙向資料繫結

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

示例

讓我們來看以下示例，其中建立了一個帶有三個組合框項的組合框和一個文字框，並設定了一些屬性。在此示例中，我們沒有任何標準資料來源，但 UI 元素繫結到其他 UI 元素。

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel>
      <ComboBox Name = "comboBox"  Margin = "50" Width = "100"> 
         <ComboBoxItem Content = "Green" /> 
         <ComboBoxItem Content = "Yellow" IsSelected = "True" /> 
         <ComboBoxItem Content = "Orange" /> 
      </ComboBox>
		
      <TextBox  Name = "textBox" Margin = "50" 
         Width = "100" Height = "23" VerticalAlignment = "Top" 
         Text  = "{Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel> 
	
</Window>

編譯並執行上述程式碼後，將產生以下輸出。當用戶從組合框中選擇一個專案時，文字框文字和背景顏色將相應更新。

同樣，當用戶在文字框中輸入有效的顏色名稱時，組合框和文字框的背景顏色也將更新。

列印頁面