WPF - Liên kết dữ liệu

Liên kết dữ liệu là một cơ chế trong ứng dụng WPF cung cấp một cách đơn giản và dễ dàng để các ứng dụng Windows Runtime hiển thị và tương tác với dữ liệu. Trong cơ chế này, việc quản lý dữ liệu hoàn toàn tách biệt với cách dữ liệu.

Liên kết dữ liệu cho phép luồng dữ liệu giữa các phần tử UI và đối tượng dữ liệu trên giao diện người dùng. Khi một ràng buộc được thiết lập và dữ liệu hoặc mô hình kinh doanh của bạn thay đổi, thì nó sẽ tự động phản ánh các cập nhật cho các phần tử UI và ngược lại. Cũng có thể liên kết, không phải với nguồn dữ liệu chuẩn mà với một phần tử khác trên trang.

Liên kết dữ liệu có hai loại - one-way data bindingtwo-way data binding.

Liên kết dữ liệu một chiều

Trong liên kết một chiều, dữ liệu được liên kết từ nguồn của nó (đó là đối tượng chứa dữ liệu) với đích của nó (đó là đối tượng hiển thị dữ liệu)

  • Hãy lấy một ví dụ đơn giản để hiểu chi tiết ràng buộc dữ liệu một chiều. Trước hết, hãy tạo một dự án WPF mới với tênWPFDataBinding.

  • Mã XAML sau đây tạo ra hai nhãn, hai hộp văn bản và một nút và khởi tạo chúng với một số thuộc tính.

<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>
  • Thuộc tính văn bản của cả hộp văn bản liên kết với “Tên” và “Tuổi”, là các biến lớp của lớp Người được hiển thị bên dưới.

  • Trong lớp Person, chúng ta chỉ có hai biến NameAgevà đối tượng của nó được khởi tạo trong MainWindow lớp học.

  • Trong mã XAML, chúng tôi liên kết với một thuộc tính Tên và Tuổi, nhưng chúng tôi chưa chọn thuộc tính đó thuộc đối tượng nào.

  • Cách dễ dàng hơn là gán một đối tượng cho DataContext thuộc tính mà chúng tôi đang ràng buộc trong mã C # sau trong MainWindowconstructor.

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; 
            } 
         } 
      }
		
   } 
}
  • Hãy chạy ứng dụng này và bạn có thể thấy ngay lập tức trong MainWindow của chúng tôi rằng chúng tôi đã liên kết thành công với Tên và Tuổi của đối tượng Người đó.

Khi bạn nhấn Show , nó sẽ hiển thị tên và tuổi trên hộp tin nhắn.

Hãy thay đổi Tên và Tuổi trong hộp thoại.

Nếu bây giờ bạn nhấp vào nút Hiển thị, nó sẽ lại hiển thị cùng một thông báo.

Điều này bởi vì chế độ liên kết dữ liệu được đặt thành một chiều trong mã XAML. Để hiển thị dữ liệu cập nhật, bạn sẽ cần hiểu ràng buộc dữ liệu hai chiều.

Liên kết dữ liệu hai chiều

Trong ràng buộc hai chiều, người dùng có thể sửa đổi dữ liệu thông qua giao diện người dùng và cập nhật dữ liệu đó trong nguồn. Nếu nguồn thay đổi trong khi người dùng đang xem dạng xem, bạn muốn dạng xem được cập nhật.

Hãy lấy cùng một ví dụ nhưng ở đây, chúng ta sẽ thay đổi chế độ ràng buộc từ Một chiều sang Hai chiều trong mã 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>

Hãy chạy lại ứng dụng này.

Nó sẽ tạo ra cùng một đầu ra -

Bây giờ chúng ta hãy thay đổi các giá trị Tên và Tuổi -

Nếu bạn nhấp vào nút Hiển thị ngay bây giờ, nó sẽ hiển thị thông báo cập nhật.

Chúng tôi khuyên bạn nên thực thi đoạn mã trên với cả hai trường hợp để hiểu rõ hơn về khái niệm này.