WPF实现数据绑定

在 WPF 中，数据绑定是一种强大的机制，用于将 UI 元素（如TextBox、Button等）与数据对象进行关联。

INotifyPropertyChanged接口允许数据对象在其属性值发生改变时通知 UI，从而使 UI 能够自动更新以反映最新的数据状态。

ToolMainWindow中实现

ToolMainWindow.xaml.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public partial class ToolMainWindow : UserControl, INotifyPropertyChanged
{
    private int _count = 0;  // 数据源，也可以是自定义的数据模型
    
    public int Count
    {
        get { return _count; }
        set { _count = value; OnPropertyChanged(nameof(Count)); }  // 通知属性值已更改
    }

    public ToolMainWindow()
    {
        InitializeComponent();
        DataContext = this;  // 设置数据上下文
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Count++;
    }
    
    public event PropertyChangedEventHandler? PropertyChanged;  // 实现接口

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ToolMainWindow.xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<UserControl x:Class="demo.ToolMainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:demo"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance local:ToolMainWindow,
                                IsDesignTimeCreatable=False}"
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel>
        <Button Content="click it!" Click="Button_Click"/> 
        <TextBlock Text="{Binding Count, Mode=OneWay}"/>  
    </StackPanel>
</UserControl>
  • 实现INotifyPropertyChanged接口
  • 数据上下文设置
  • 数据源设置

ToolMainWindowViewModel中实现

适用于需要多个数据模型，方便管理

ToolMainWindowViewModel.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ToolMainWindowViewModel : INotifyPropertyChanged
{
    private int _count = 0;  // 数据源，也可以是自定义的数据模型
    
    public int Count
    {
        get { return _count; }
        set { _count = value; OnPropertyChanged(nameof(Count)); }  // 通知属性值已更改
    }
    
    public event PropertyChangedEventHandler? PropertyChanged;  // 实现接口

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ToolMainWindow.xaml.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public partial class ToolMainWindow : UserControl, INotifyPropertyChanged
{
    public ToolMainWindowViewModel ViewModel { get; set; }
    
    public ToolMainWindow()
    {
        ViewModel = new ToolMainWindowViewModel();
        InitializeComponent();
        DataContext = ViewModel;  // 设置数据上下文
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ViewModel.Count++;
    }
}

ToolMainWindow.xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<UserControl x:Class="demo.ToolMainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:demo"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance local:ToolMainWindowViewModel,
                                IsDesignTimeCreatable=False}"
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel>
        <Button Content="click it!" Click="Button_Click"/> 
        <TextBlock Text="{Binding Count, Mode=OneWay}"/>  
    </StackPanel>
</UserControl>