Wpf 简明教程

WPF - Data Binding

数据绑定是 WPF 应用程序中的一种机制，它为 Windows 运行时应用程序提供了一种简单而轻松的方式来显示数据和与其交互。在此机制中，数据的管理与数据的处理方式完全分离。

数据绑定允许在用户界面上的 UI 元素与数据对象之间流向数据。当建立绑定并且数据或业务模型更改时，它会自动将更新反映到 UI 元素，反之亦然。还可以绑定到不是标准数据源的其他元素，而是页面上的其他元素。

数据绑定有两种类型 one-way data binding 和 two-way data binding 。

One-Way Data Binding

在单向绑定中，数据从其源（即保存数据的对象）绑定到其目标（即显示数据的对象）。

让我们举一个简单的示例来详细了解单向数据绑定。首先，创建一个名为 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>

两个文本框的文本属性绑定到“名称”和“年龄”，它们是下面显示的 Person 类的类变量。
在 Person 类中，我们只有两个变量 Name 和 Age ，它的对象在 MainWindow 类中初始化。
在 XAML 代码中，我们绑定到属性“名称”和“年龄”，但是我们没有选择这些属性所属的对象。
更简单的方法是将一个对象分配给 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;
            }
         }
      }

   }
}

让我们运行此应用程序，您可以在 MainWindow 中立即看到我们已经成功绑定到 Person 对象的姓名和年龄。

当您按下 Show 按钮时，它将在消息框中显示姓名和年龄。

让我们在对话框中更改姓名和年龄。

如果您现在单击“显示”按钮，它将再次显示相同的消息。

这是因为 XAML 代码中将数据绑定模式设置为单向。要显示更新的数据，您需要了解双向数据绑定。

Two-Way Data Binding

在双向绑定中，用户可以通过用户界面修改数据，并将该数据更新到源中。如果在用户查看视图时源发生更改，您希望视图得到更新。

我们来看同样的例子，但我们将在此 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>

让我们再次运行此应用程序。

它将产生相同输出 −

现在让我们更改 Name（姓名）和 Age（年龄）值 −

如果现在单击“显示”按钮，它将显示更新的消息。

我们建议您针对这两者执行上述代码，以更好地理解该概念。