C# WPF入门学习主线篇（二十九）—

C# WPF入门学习主线篇（二十九）—— 绑定到对象和集合

news2025/7/18 18:28:06

C# WPF入门学习主线篇（二十九）—— 绑定到对象和集合

在这里插入图片描述

在WPF中，数据绑定是开发动态和交互性用户界面的核心技术。通过数据绑定，我们可以轻松地将UI控件与后台的数据源连接起来，实现数据的自动更新和显示。在本篇文章中，我们将介绍如何将WPF中的控件绑定到对象和集合。

一、数据绑定的基础概念

数据绑定是指将UI元素的属性与数据源的属性关联起来，当数据源的值发生变化时，UI元素的值会自动更新。反之，当UI元素的值发生变化时，数据源的值也会自动更新。

数据绑定的方向

单向绑定（One-Way Binding）：数据源的变化会更新到UI控件，但UI控件的变化不会影响数据源。
双向绑定（Two-Way Binding）：数据源和UI控件的变化会相互影响。
单向到源绑定（One-Way to Source Binding）：UI控件的变化会更新到数据源，但数据源的变化不会影响UI控件。

二、绑定到对象

首先，我们来看看如何将WPF中的控件绑定到对象。

1. 定义数据对象

定义一个简单的Person类，其中包含两个属性：Name和Age。

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

2. 在MainWindow中绑定对象

在MainWindow类中，我们创建一个Person对象，并将其作为窗口的DataContext。

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new Person { Name = "John Doe", Age = 30 };
        }
    }
}

3. 在XAML中绑定属性

在XAML中，我们通过Binding标记扩展来绑定TextBlock控件的Text属性到Person对象的属性。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Object Binding Demo" Height="200" Width="300">
    <Grid>
        <StackPanel>
            <TextBlock Text="{Binding Name}" FontSize="16" Margin="10"/>
            <TextBlock Text="{Binding Age}" FontSize="16" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>

三、绑定到集合

接下来，我们来看看如何将WPF中的控件绑定到集合。

1. 定义ObservableCollection

我们使用ObservableCollection来定义一个包含多个Person对象的集合，并将其作为窗口的DataContext。

using System.Collections.ObjectModel;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public ObservableCollection<Person> People { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            People = new ObservableCollection<Person>
            {
                new Person { Name = "John Doe", Age = 30 },
                new Person { Name = "Jane Smith", Age = 25 },
                new Person { Name = "Sam Brown", Age = 20 }
            };
            this.DataContext = this;
        }
    }
}

2. 在XAML中绑定集合

在XAML中，我们将ListBox控件的ItemsSource属性绑定到People集合，并通过DisplayMemberPath属性指定显示Person对象的Name属性。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Collection Binding Demo" Height="300" Width="400">
    <Grid>
        <ListBox ItemsSource="{Binding People}" DisplayMemberPath="Name" />
    </Grid>
</Window>

四、动态更新集合

ObservableCollection的一个主要优势是能够动态更新并自动通知UI。因此，我们可以在运行时向集合中添加或删除项，并立即在UI中看到相应的变化。

1. 添加和删除项

在MainWindow类中，添加两个按钮的点击事件处理程序，用于添加和删除Person对象。

private void AddPerson_Click(object sender, RoutedEventArgs e)
{
    People.Add(new Person { Name = "Michael Green", Age = 35 });
}

private void RemovePerson_Click(object sender, RoutedEventArgs e)
{
    if (People.Any())
    {
        People.Remove(People.First());
    }
}

2. 修改XAML代码

在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="Collection Binding Demo" Height="300" Width="400">
    <Grid>
        <StackPanel>
            <ListBox ItemsSource="{Binding People}" DisplayMemberPath="Name" />
            <Button Content="Add Person" Click="AddPerson_Click" Margin="5"/>
            <Button Content="Remove Person" Click="RemovePerson_Click" Margin="5"/>
        </StackPanel>
    </Grid>
</Window>