WPF - 数据绑定
数据绑定是 WPF 应用程序中的一种机制,它为 Windows 运行时应用程序提供一种简单易用的方法来显示数据并与数据交互。 在这种机制下,数据的管理与数据的方式完全分离。
数据绑定允许用户界面上的 UI 元素和数据对象之间的数据流。 当建立绑定并且数据或业务模型发生变化时,它会自动将更新反映到 UI 元素,反之亦然。 也可以不绑定到标准数据源,而是绑定到页面上的另一个元素。
数据绑定有两种类型 − 单向数据绑定和双向数据绑定。
单向数据绑定
在单向绑定中,数据从其源(即保存数据的对象)绑定到其目标(即显示数据的对象)
让我们通过一个简单的例子来详细了解单向数据绑定。 首先,创建一个名为 WPFDataBinding 的新 WPF 项目。
以下 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 = 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>
两个文本框的文本属性都绑定到"Name"和"Age",它们是 Person 类的类变量,如下所示。
在 Person 类中,我们只有两个变量 Name 和 Age,其对象在 MainWindow 类中初始化。
在 XAML 代码中,我们绑定到属性 Name 和 Age,但我们尚未选择该属性所属的对象。
更简单的方法是将一个对象分配给 DataContext,我们在 MainWindowconstructor 的以下 C# 代码中绑定其属性。
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; } } } } }
让我们运行这个应用程序,您可以立即在主窗口中看到我们已成功绑定到该 Person 对象的名称和年龄。
![数据绑定的输出](/wpf/images/output_of_data_binding.jpg)
当您按下显示按钮时,它将在消息框中显示姓名和年龄。
![按下显示按钮时](/wpf/images/press_show_button.jpg)
让我们在对话框中更改"姓名"和"年龄"。
![DataBinding 中所做的更改](/wpf/images/changes_made_in_data_binding.jpg)
如果您现在单击"显示"按钮,它将再次显示相同的消息。
![显示相同消息](/wpf/images/same_output_of_data_binding.jpg)
这是因为数据绑定模式在 XAML 代码中设置为单向。 要显示更新的数据,您需要了解双向数据绑定。
双向数据绑定
在双向绑定中,用户可以通过用户界面修改数据并在源中更新该数据。 如果在用户查看视图时源发生更改,您希望更新视图。
让我们采用相同的示例,但在这里,我们将在 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>
让我们再次运行该应用程序。
![双向数据绑定](/wpf/images/two_way_data_binding.jpg)
它将产生相同的输出 −
![双向数据绑定的输出](/wpf/images/press_show_button_in_2_way.jpg)
现在让我们更改名称和年龄值 −
![以两种方式改变](/wpf/images/changes_in_two_way.jpg)
如果您现在单击"显示"按钮,它将显示更新的消息。
![更新输出](/wpf/images/updated_output.jpg)
我们建议您在这两种情况下执行上述代码,以便更好地理解这个概念。