Windows 10 开发 - 数据绑定
数据绑定是 XAML 应用程序中的一种机制，它为使用部分类的 Windows 运行时应用提供了一种简单易行的方式来显示和交互数据。在此机制中，数据的管理与数据的显示方式完全分离。
数据绑定允许数据在 UI 元素和用户界面上的数据对象之间流动。当绑定建立后，如果数据或业务模型发生变化，它会自动将更新反映到 UI 元素上，反之亦然。它也可以绑定到页面上的其他元素，而不是标准数据源。数据绑定可以是 −
- 单向数据绑定
- 双向数据绑定
- 元素绑定
单向数据绑定
在单向绑定中，数据从其源(保存数据的对象)绑定到其目标(显示数据的对象)。
让我们看一个单向数据绑定的简单示例。下面给出的 XAML 代码创建了四个带有一些属性的文本块。
<Page
x:Class = "OneWayDataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:OneWayDataBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<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 = "200" Text = "{Binding Title}" />
</StackPanel>
</StackPanel>
</Grid>
</Page>
两个文本块的 Text 属性静态设置为 "Name" 和 "Title"，而文本块的另外两个 Text 属性绑定到"Name"和"Title"，它们是 Employee 类的类变量，如下所示。
using Windows.UI.Xaml.Controls;
// 空白页项目模板的文档位于
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace OneWayDataBinding {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
public MainPage(){
this.InitializeComponent();
DataContext = Employee.GetEmployee();
}
}
public class Employee {
public string Name { get; set; }
public string Title { get; set; }
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Waqar Ahmed",
Title = "Development Manager"
};
return emp;
}
}
}
在 Employee 类 中，我们有变量 Name 和 Title，以及一个静态方法，该方法初始化 employee 对象 并返回该员工对象。因此，我们绑定了 Name 和 Title 属性，但尚未选择该属性所属的对象。简单的方法是将一个对象赋值给 DataContext，我们将在 MainPage 构造函数中绑定其属性。
运行此应用程序时，您可以立即在 MainWindow 中看到已成功绑定到该 Employee 对象的 Name 和 Title。
双向数据绑定
在双向绑定中，用户可以通过用户界面修改数据，并在源中更新该数据。例如，如果在用户查看视图时源发生变化，您希望视图也随之更新。
我们来看下面的示例，其中创建了两个标签、两个文本框和一个按钮，并设置了一些属性和事件。
<Page
x:Class = "TwoWayDataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:TwoWayDataBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<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 = "200,20,0,0">Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "10,20,0,0"
Text = "{Binding Name, Mode = TwoWay}"/>
<TextBlock Name = "ageLabel" Margin = "200,20,0,0"
Grid.Row = "1">Age:</TextBlock>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10,20,0,0"
Text = "{Binding Age, Mode = TwoWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "Display" Click = "Button_Click"
Margin = "200,20,0,0"/>
<TextBlock x:Name = "txtblock" Margin = "200,20,0,0"/>
</StackPanel>
</Grid>
</Page>
我们可以观察到以下 −
两个文本框的 Text 属性都绑定到 "Name" 和 "Age"，它们是 Person 类 的类变量，如下所示。
在 Person 类 中，我们只有两个变量 − Name 和 Age，其对象在 MainWindow 类中初始化。
在 XAML 代码中，我们绑定到属性 − Name 和 Age，但我们尚未选择属性所属的对象。
更简单的方法是将一个对象分配给 DataContext，我们将在 C# 代码中绑定其属性，如下例中的 MainWindowconstructor 所示。
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// 空白页项目模板的文档位于
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace TwoWayDataBinding {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
Person person = new Person { Name = "Salman", Age = 26 };
public MainPage() {
this.InitializeComponent();
this.DataContext = person;
}
private void Button_Click(object sender, RoutedEventArgs e) {
string message = person.Name + " is " + person.Age + " years old";
txtblock.Text = 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;
}
}
}
}
}
当上述代码编译并执行后，您将看到以下窗口。点击显示按钮。
我们修改一下姓名和年龄，然后再次点击显示按钮。
您可以看到，点击"显示"按钮时，文本框的文本不会用于在TextBlock上显示数据，而是使用了类变量。
为了更好地理解，建议您分别执行上述代码。
元素绑定
也可以绑定到其他数据源，而不是标准数据源。页面上的元素。让我们创建一个名为 ElementBinding 的应用程序，在其中创建一个滑块 (Slider) 和一个矩形 (Rectangle)，并使用滑块绑定矩形的宽度和高度。以下是 XAML 代码。
<Page
x:Class = "ElementBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:ElementBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
<Rectangle Height = "100" Width = "100" Fill = "SteelBlue"
RenderTransformOrigin = "0.5,0.5" Margin = "50">
<Rectangle.RenderTransform>
<CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}"
ScaleY = "{Binding Value, ElementName = MySlider}"/>
</Rectangle.RenderTransform>
</Rectangle>
<Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1"
x:Name = "MySlider" />
</StackPanel>
</Grid>
</Page>
编译并执行上述代码后，您将看到以下窗口。
您可以使用滑块更改矩形的大小，如下所示。
