WPF Binding的详细使用教程

生命不息-学无止境

已于 2024-09-22 21:02:54 修改

阅读量1.3k

点赞数 17

分类专栏： WPF 文章标签： wpf

于 2024-09-21 12:57:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_39604653/article/details/142415149

版权

WPF 专栏收录该内容

91 篇文章

订阅专栏

WPF (Windows Presentation Foundation) 是一种用于创建桌面应用程序的强大框架，其中数据绑定 (Binding) 是核心功能之一，它可以将 UI 元素与数据源进行连接，使得 UI 随数据的变化而自动更新，而不需要手动更新每个控件。

下面是 WPF 数据绑定的详细教程，涵盖从基础到进阶的内容。

一、WPF Binding 的基础概念

数据源：可以是任何对象，常见的数据源包括 CLR 对象、集合、XML 数据、数据库等。
目标：绑定的目标是 UI 控件的属性，比如 TextBox 的 Text 属性、Label 的 Content 属性等。
Binding 的组成部分：
- 目标：绑定的 UI 属性，如 TextBox.Text。
- 源：绑定的数据对象或数据上下文 (DataContext)。
- 路径：从源对象到目标属性的路径，比如 Person.Name。
- 模式：数据的传输方向，如 OneWay、TwoWay。
- 转换器：用于在源和目标之间转换数据类型。

二、简单的数据绑定

假设我们有一个类 Person，并希望将它与 UI 绑定：

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

在 XAML 中进行绑定：

<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">
    <Grid>
        <TextBox Text="{Binding Name}" Width="200" Height="30" Margin="20"/>
    </Grid>
</Window>

在 MainWindow.xaml.cs 中设置 DataContext 为 Person 对象：

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

        Person person = new Person { Name = "Alvin" };
        this.DataContext = person;
    }
}

三、Binding 传输模式

OneWay：从数据源到目标，UI 会随着数据源变化自动更新，但反过来不行。
```
<TextBox Text="{Binding Name, Mode=OneWay}"/>
```
TwoWay：数据在源和目标之间双向传输。当用户更新 UI 中的数据时，数据源会同步更新。
```
<TextBox Text="{Binding Name, Mode=TwoWay}"/>
```
OneWayToSource：从目标到数据源传输，用户输入会更新数据源，但不会自动从数据源更新 UI。
```
<TextBox Text="{Binding Name, Mode=OneWayToSource}"/>
```
OneTime：仅在绑定时传输一次，不会随着数据源变化而更新。
```
<TextBox Text="{Binding Name, Mode=OneTime}"/>
```

四、绑定的路径 (Path)

可以通过 Path 来指定数据源中的属性层次，例如：

<TextBox Text="{Binding Path=Address.Street}"/>

假设 Person 类中嵌套了 Address 类：

public class Address
{
    public string Street { get; set; }
}

public class Person
{
    public string Name { get; set; }
    public Address Address { get; set; }
}

这样 UI 中 TextBox 会显示 Address 的 Street 属性。

五、IValueConverter 转换器

有时候 UI 显示的数据需要转换，比如布尔值转成可见性。我们可以实现 IValueConverter 接口来进行数据转换：

1. 创建转换器：

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool boolValue = (bool)value;
        return boolValue ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        Visibility visibility = (Visibility)value;
        return visibility == Visibility.Visible;
    }
}

2. 在 XAML 中使用转换器：

首先需要在资源中声明转换器：

<Window.Resources>
    <local:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
</Window.Resources>

然后在绑定中引用：

<TextBox Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>

六、绑定集合 (ItemsControl)

ListBox、DataGrid 等控件可以绑定到集合数据源。假设有一个 People 集合：

public ObservableCollection<Person> People { get; set; }

在 XAML 中使用 ItemsSource 绑定：

<ListBox ItemsSource="{Binding People}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

在后台代码中初始化集合：

public MainWindow()
{
    InitializeComponent();

    People = new ObservableCollection<Person>
    {
        new Person { Name = "Alvin" },
        new Person { Name = "Bob" }
    };
    this.DataContext = this;
}

七、INotifyPropertyChanged 接口

为了让 UI 随数据变化自动更新，数据类需要实现 INotifyPropertyChanged 接口。当属性值发生变化时，界面会相应更新。

public class Person : INotifyPropertyChanged
{
    private string name;

    public string Name
    {
        get { return name; }
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

八、命令绑定 (Command Binding)

Button、MenuItem 等控件可以通过 Command 属性绑定命令。首先创建一个命令：

public class RelayCommand : ICommand
{
    private Action execute;
    private Func<bool> canExecute;

    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        this.execute = execute;
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => canExecute == null || canExecute();

    public void Execute(object parameter) => execute();

    public event EventHandler CanExecuteChanged;
}

在 XAML 中绑定：

<Button Content="Click Me" Command="{Binding MyCommand}"/>

在后台代码中初始化命令：

public RelayCommand MyCommand { get; set; }

public MainWindow()
{
    InitializeComponent();

    MyCommand = new RelayCommand(ExecuteMethod);
    this.DataContext = this;
}

private void ExecuteMethod()
{
    MessageBox.Show("Button clicked!");
}