Wpf 简明教程
WPF - Data Binding
数据绑定是 WPF 应用程序中的一种机制,它为 Windows 运行时应用程序提供了一种简单而轻松的方式来显示数据和与其交互。在此机制中,数据的管理与数据的处理方式完全分离。
Data binding is a mechanism in WPF applications that provides a simple and easy way for Windows Runtime apps to display and interact with data. In this mechanism, the management of data is entirely separated from the way data.
数据绑定允许在用户界面上的 UI 元素与数据对象之间流向数据。当建立绑定并且数据或业务模型更改时,它会自动将更新反映到 UI 元素,反之亦然。还可以绑定到不是标准数据源的其他元素,而是页面上的其他元素。
Data binding allows the flow of data between UI elements and data object on user interface. When a binding is established and the data or your business model changes, then it reflects the updates automatically to the UI elements and vice versa. It is also possible to bind, not to a standard data source, but to another element on the page.
数据绑定有两种类型 one-way data binding 和 two-way data binding 。
Data binding is of two types − one-way data binding and two-way data binding.
One-Way Data Binding
在单向绑定中,数据从其源(即保存数据的对象)绑定到其目标(即显示数据的对象)。
In one-way binding, data is bound from its source (that is the object that holds the data) to its target (that is the object that displays the data)
-
Let’s take a simple example to understand one-way data binding in detail. First of all, create a new WPF project with the name WPFDataBinding.
-
The following XAML code creates two labels, two textboxes, and one button and initializes them with some properties.
<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>
-
The text properties of both the textboxes bind to “Name” and “Age” which are class variables of Person class which is shown below.
-
In Person class, we have just two variables Name and Age, and its object is initialized in MainWindow class.
-
In XAML code, we are binding to a property Name and Age, but we have not selected what object that property belongs to.
-
The easier way is to assign an object to DataContext whose properties we are binding in the following C# code in 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;
}
}
}
}
}
-
Let’s run this application and you can see immediately in our MainWindow that we have successfully bound to the Name and Age of that Person object.

当您按下 Show 按钮时,它将在消息框中显示姓名和年龄。
When you press the Show button, it will display the name and age on the message box.

让我们在对话框中更改姓名和年龄。
Let’s change the Name and Age in the dialog box.

如果您现在单击“显示”按钮,它将再次显示相同的消息。
If you now click the Show button, it will again display the same message.

这是因为 XAML 代码中将数据绑定模式设置为单向。要显示更新的数据,您需要了解双向数据绑定。
This because data binding mode is set to one-way in the XAML code. To show the updated data, you will need to understand two-way data binding.
Two-Way Data Binding
在双向绑定中,用户可以通过用户界面修改数据,并将该数据更新到源中。如果在用户查看视图时源发生更改,您希望视图得到更新。
In two-way binding, the user can modify the data through the user interface and have that data updated in the source. If the source changes while the user is looking at the view, you want the view to be updated.
我们来看同样的例子,但我们将在此 XAML 代码中将绑定模式从单向更改为双向。
Let’s take the same example but here, we will change the binding mode from One Way to Two Way in the XAML code.
<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>
让我们再次运行此应用程序。
Let’s run this application again.

它将产生相同输出 −
It will produce the same output −

现在让我们更改 Name(姓名)和 Age(年龄)值 −
Let’s now change the Name and Age values −

如果现在单击“显示”按钮,它将显示更新的消息。
If you click the Show button now, it will display the updated message.

我们建议您针对这两者执行上述代码,以更好地理解该概念。
We recommend that you execute the above code with both the cases for a better understanding of the concept.