Silverlight - Liên kết dữ liệu
Liên kết dữ liệu là một cơ chế trong ứng dụng Silverlight, cung cấp một cách đơn giản và dễ dàng cho các ứng dụng Windows Runtime 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 được tách biệt hoàn toàn khỏ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ử giao diện người dùng 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ó hai loại sau:
- 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 dữ liệu 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) tới đích của nó (đó là đối tượng hiển thị dữ liệu).
Chúng ta hãy xem một ví dụ đơn giản về ràng buộc dữ liệu một chiều.
Dưới đây là mã XAML trong đó hai nhãn, hai hộp văn bản và một nút được tạo với một số thuộc tính.
<UserControl x:Class = "DataBinding.MainPage"
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"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode=OneWay}"/>
<TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock>
<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>
</UserControl>Chúng tôi quan sát những điều sau:
Thuộc tính văn bản của cả hai hộp văn bản liên kết với “Name”Và“Age”, Là các biến lớp của Person lớp như hình bên dưới.
Trong Person lớp, chúng tôi chỉ có hai biến Name và Agevà đối tượng của nó được khởi tạo trong MainPage lớp học.
Trong mã XAML, chúng tôi liên kết với một thuộc tính Name và Tuổi, nhưng chúng tôi chưa chọn thuộc tính nào thuộc về đối tượng.
Một cách dễ dàng 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 # trong MainPage hàm tạo như hình dưới đây.
using System.Windows;
using System.Windows.Controls;
namespace DataBinding {
public partial class MainPage : UserControl {
Person person = new Person { Name = "Salman", Age = 26 };
public MainPage() {
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úng tôi chạy ứng dụng này và bạn có thể thấy ngay trên trang web của mình 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 trong hộp tin nhắn.
Hãy để chúng tôi thay đổi Name và Age trong hộp thoại trên.
Bây giờ, nếu bạn nhấp vào Show , nó sẽ hiển thị lại cùng một thông báo.
Điều này là bởi vì data-bindingchế độ được đặt thành một chiều trong mã XAML. Để hiển thị thông báo 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 two-way binding, người dùng có thể sửa đổi dữ liệu thông qua giao diện người dùng và dữ liệu đó được cập nhật 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.
Chúng ta hãy xem cùng một ví dụ nhưng chỉ thay đổi chế độ ràng buộc từ một chiều sang hai chiều trong mã XAML như hình dưới đây.
<UserControl x:Class = "DataBinding.MainPage"
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"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode=TwoWay}"/>
<TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock>
<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>
</UserControl>Hãy để chúng tôi chạy lại ứng dụng này và bạn có thể thấy kết quả tương tự.
Hãy để chúng tôi thay đổi Name và Age trong hộp thoại trên.
Bây giờ, nếu bạn nhấp vào Show nó sẽ hiển thị thông báo cập nhật.
