上一节:
下一节:

  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>
    • 两个文本框的文本属性都绑定到“姓名”和“年龄”，它们是 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 对象的 Name 和 Age。
    数据绑定的输出
    当您按下显示按钮时，它会在消息框上显示姓名和年龄。
    当按下显示按钮时
    让我们在对话框中更改名称和年龄。
    在 DataBinding 中所做的更改
    如果您现在单击“显示”按钮，它将再次显示相同的消息。
    显示相同的消息
    这是因为数据绑定模式在 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>
    让我们再次运行这个应用程序。
    两种方式数据绑定
    它将产生相同的输出 -
    两路DataBinding的输出
    现在让我们更改名称和年龄值 -
    两种方式的变化
    如果您现在单击“显示”按钮，它将显示更新的消息。
    更新的输出
    我们建议您在这两种情况下都执行上述代码，以便更好地理解这个概念。
上一节:
下一节: