WPF数据绑定详细案例

代码已经上传到GitHub，附上链接DataBindingDemo，代码环境：Win10 + VS2022。

在 WPF 中，数据绑定 是将 UI 控件与后台数据源进行关联的一种机制，使得数据与 UI 自动同步更新。WPF 的数据绑定功能强大，可以绑定到属性、集合、数据库等多种数据源。

下面通过一个详细的例子来演示如何在 WPF 中进行数据绑定。

示例：数据绑定到 ViewModel 的属性

1. 创建一个简单的 MVVM 应用

• Model：存储应用的数据。
• ViewModel：管理数据并处理业务逻辑。
• View：显示数据并绑定到 ViewModel。

2. 实现步骤

步骤 1: 创建 Model

我们创建一个简单的 Person 类作为数据模型，包含姓名和年龄属性。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

步骤 2: 创建 ViewModel

ViewModel 用于处理数据的逻辑，负责暴露给 View 进行绑定。为了实现属性的自动更新，ViewModel 中的属性必须实现 INotifyPropertyChanged 接口。

using System.ComponentModel;

public class PersonViewModel : INotifyPropertyChanged
{
    private Person _person;

    public PersonViewModel()
    {
        _person = new Person { Name = "John Doe", Age = 30 };
    }

    public string Name
    {
        get { return _person.Name; }
        set
        {
            _person.Name = value;
            OnPropertyChanged("Name");
        }
    }

    public int Age
    {
        get { return _person.Age; }
        set
        {
            _person.Age = value;
            OnPropertyChanged("Age");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

• INotifyPropertyChanged: 它是一个接口，用于通知 UI 当属性值发生变化时，UI 需要更新。
• OnPropertyChanged: 当 Name 或 Age 属性改变时，触发 PropertyChanged 事件通知 UI 更新。

步骤 3: 创建 View (XAML)

在 XAML 中，我们使用 Binding 将 TextBox、TextBlock 等控件的值绑定到 ViewModel 中的属性。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    
    <Window.DataContext>
        <!-- 将窗口的 DataContext 设置为 PersonViewModel -->
        <local:PersonViewModel />
    </Window.DataContext>
    
    <Grid>
        <!-- 姓名输入框，绑定到 Name 属性 -->
        <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" 
                 Width="200" Height="30" VerticalAlignment="Top" Margin="20"/>
        
        <!-- 显示年龄的文本框，绑定到 Age 属性 -->
        <TextBlock Text="{Binding Age}" 
                   Width="200" Height="30" VerticalAlignment="Center" Margin="20"/>
        
        <!-- 更新年龄的按钮 -->
        <Button Content="Increase Age" Width="120" Height="30" 
                VerticalAlignment="Bottom" Margin="20"
                Click="Button_Click"/>
    </Grid>
</Window>

• Text="{Binding Name}": TextBox 的内容绑定到 PersonViewModel 中的 Name 属性，UpdateSourceTrigger=PropertyChanged 使得每次文本改变时立即更新 ViewModel。
• Text="{Binding Age}": TextBlock 绑定到 PersonViewModel 中的 Age 属性。

步骤 4: 更新 ViewModel 的属性

在代码隐藏文件 MainWindow.xaml.cs 中，我们通过按钮点击事件更新 Age 属性。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // 获取 DataContext 并将其强制转换为 PersonViewModel
        var viewModel = (PersonViewModel)this.DataContext;
        viewModel.Age += 1; // 每次点击按钮，年龄加 1
    }
}

3. 运行效果

1. 初始状态: 界面上会显示一个文本框（用于输入姓名），一个文本块（显示年龄），和一个按钮（增加年龄）。
2. 数据绑定更新: 当你在 TextBox 中输入新的姓名时，ViewModel 的 Name 属性会自动更新；当点击按钮时，Age 属性会增加 1，并且 UI 会自动更新年龄的显示。

关键点

1. DataContext: 是 WPF 中数据绑定的核心，它指向了控件数据源对象。在这个例子中，Window.DataContext 被设置为 PersonViewModel 实例，这样整个窗口内的控件都可以绑定到 ViewModel 的属性。
2. Binding: 使用 Binding 将 UI 控件绑定到 ViewModel 的属性，双向绑定可以让 View 和 ViewModel 双向同步数据。
3. INotifyPropertyChanged: 实现这个接口后，当属性的值发生变化时，UI 会自动响应变化并更新显示。
4. 更新源触发器 (UpdateSourceTrigger): TextBox 的 Text 属性绑定通常在控件失去焦点时更新，但通过设置 UpdateSourceTrigger=PropertyChanged，可以使其在每次文本变化时立即更新 ViewModel。

总结

WPF 的数据绑定机制让 UI 和数据逻辑分离，并且可以使得 UI 随着数据源的改变而自动更新。通过结合 MVVM 模式、数据绑定和 INotifyPropertyChanged 接口，WPF 开发者可以非常高效地构建灵活且可维护的应用程序。