在 WPF 中，如何实现数据的双向绑定？

news2024/12/23 10:31:22

在 WPF 中，数据绑定是一个非常重要的特性，它允许 UI 与数据源之间自动同步。双向绑定是一种常见的绑定方式，当数据源更新时，UI 会自动更新；同样，当 UI 中的元素（如文本框）发生改变时，数据源也会自动更新。

如何实现双向绑定

我们可以通过以下步骤来实现 WPF 中的数据双向绑定。

步骤 1: 创建一个 WPF 项目

打开 Visual Studio。
点击创建新项目。
选择 WPF 应用，然后点击下一步。
输入项目名称和存储路径，点击创建。

步骤 2: 创建数据源类

数据源类可以是一个简单的 C# 类，用于存储我们要绑定的数据。为了实现双向绑定，通常需要让这个类实现 INotifyPropertyChanged 接口，这样当属性值发生变化时，UI 就会自动更新。

using System.ComponentModel;

namespace WpfApp
{
    // 创建数据源类
    public class Person : INotifyPropertyChanged
    {
        private string _name;
        private int _age;

        public string Name
        {
            get { return _name; }
            set
            {
                if (_name != value)
                {
                    _name = value;
                    // 每当属性的值改变时，会调用 OnPropertyChanged 方法，通知 UI 更新。
                    OnPropertyChanged(nameof(Name));  // 通知 UI 更新
                }
            }
        }

        public int Age
        {
            get { return _age; }
            set
            {
                if (_age != value)
                {
                    _age = value;
                    OnPropertyChanged(nameof(Age));
                }
            }
        }

        //实现 INotifyPropertyChanged 接口，这样当属性值发生变化时，UI 就会自动更新。
        public event PropertyChangedEventHandler? PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
        	// 展示数据变化
            MessageBox.Show($"属性更改: {propertyName}");
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在这里插入图片描述

在上面的代码中，Person 类有两个属性：Name 和 Age。每当这两个属性的值改变时，我们会调用 OnPropertyChanged 方法，通知 UI 更新。

步骤 3: 设置数据绑定

接下来，我们需要将 Person 类的实例绑定到 XAML 中的控件。双向绑定可以通过 TextBox 控件与数据源中的属性进行绑定。以下是具体的步骤。

3.1. 修改 MainWindow.xaml

在 MainWindow.xaml 中，我们需要设置绑定。假设我们想要将 Name 和 Age 绑定到两个 TextBox 控件，并实现双向绑定。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="双向绑定示例" Height="200" Width="400">

    <Grid>
        <StackPanel>
            <TextBox Text="{Binding Name,Mode=TwoWay}" Width="120" Margin="10" />
			<TextBox Text="{Binding Age,Mode=TwoWay}" Width="120" Margin="10" />
			<Button Content="修改" Width="120" Margin="10" Click="Button_Click" />
        </StackPanel>
    </Grid>
</Window>

3.2. 设置数据上下文

为了实现绑定，我们需要将 Person 实例设置为 Window 的数据上下文。可以在 MainWindow.xaml.cs 文件中完成。

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
	{
	    public MainWindow()
	    {
	        InitializeComponent();
	
	        // 为了实现绑定，我们需要将 Person 实例设置为 Window 的数据上下文。
	        var person = new Person { Name = "张三", Age = 25 };
	        DataContext = person;
	    }
	
	    private void Button_Click(object sender, RoutedEventArgs e)
	    {
	        // 修改数据源中的值
	        (DataContext as Person).Name = "李四";
	        (DataContext as Person).Age = 30;
	    }
	}
}