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 年龄,其对象在 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的输出

当您按显示时按钮,它会在消息框中显示姓名和年龄.

当显示按钮是按下

让我们在对话框中更改名称和年龄.

在DataBinding中进行的更改

如果您现在单击"显示"按钮,它将再次显示相同的消息.

显示相同的消息

这是因为数据绑定m ode在XAML代码中设置为单向.要显示更新的数据,您需要了解双向数据绑定.

双向数据绑定

在双向绑定中,用户可以通过用户界面修改数据,并在源中更新数据.如果在用户查看视图时源更改,则需要更新视图.

让我们采用相同的示例,但在此,我们将绑定模式从One Way更改为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>

让我们再次运行这个应用程序.

双向数据绑定

它将产生相同的输出 :

输出双向数据绑定

现在让我们更改名称和年龄值 :

以双向方式更改

如果单击"立即显示"按钮,它将显示更新的消息.

更新输出

我们建议您使用这两种情况执行上述代码,以便更好地理解该概念.