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

Liên kết dữ liệu là một cơ chế trong ứng dụng XAML cung cấp một cách đơn giản và dễ dàng cho Ứng dụng thời gian chạy Windows sử dụng các lớp từng phần để hiển thị và tương tác với dữ liệu. Việc quản lý dữ liệu hoàn toàn tách biệt với cách dữ liệu được hiển thị trong cơ chế này.

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à là với một phần tử khác trên trang. Liên kết dữ liệu có thể có hai loại -

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

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

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

Hãy xem một ví dụ đơn giản về ràng buộc dữ liệu một chiều. Mã XAML sau tạo bốn khối văn bản với một số thuộc tính.

<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>

Thuộc tính văn bản của hai khối văn bản được đặt tĩnh thành “Tên” và “Tiêu đề”, trong khi hai khối văn bản còn lại Thuộc tính văn bản được liên kết với “Tên” và “Tiêu đề” là các biến lớp của lớp Nhân viên được hiển thị bên dưới.

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; 
      }
   }
}

Trong lớp này, chúng ta chỉ có hai biến, Name và Titlevà một phương thức tĩnh trong đó đối tượng Employee được khởi tạo sẽ trả về đối tượng nhân viên đó. Vì vậy, chúng tôi đang ràng buộc với một thuộc tính, Tên và Tiêu đề, nhưng chúng tôi chưa chọn thuộc tính đó thuộc đối tượng nào. Cách dễ nhất là gán một đối tượng cho DataContext có thuộc tính mà chúng ta đang ràng buộc trong mã C # sau:

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(); 
      } 
   }
}

Hãy chạy ứng dụng này và bạn có thể thấy ngay 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à Chức danh của đối tượng Nhân viên đó.

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 sẽ muốn cập nhật dạng xem.

Thí dụ

Hãy xem ví dụ sau trong đó một hộp kết hợp với ba mục hộp kết hợp và một hộp văn bản được tạo với một số thuộc tính. Trong ví dụ này, chúng tôi không có bất kỳ nguồn dữ liệu chuẩn nào, nhưng các phần tử giao diện người dùng được liên kết với các phần tử giao diện người dùng khác.

<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>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau. Khi người dùng chọn một mục từ hộp tổ hợp, văn bản hộp văn bản và màu nền sẽ được cập nhật tương ứng.

Tương tự, khi người dùng nhập tên màu hợp lệ vào hộp văn bản, thì hộp tổ hợp và màu nền hộp văn bản cũng sẽ được cập nhật.