WPF学习09:数据绑定之 Binding to List Data

在WPF中，数据绑定是一项非常重要的功能，它可以让我们将UI元素与数据源进行绑定，使得数据的变化能够自动地反映到UI上。本文介绍如何绑定列表数据到WPF的UI元素中。

Binding to List Data

在WPF中，Binding to List Data是一种常见的数据绑定方式，它可以将一个List类型的数据源绑定到UI元素上。

准备数据源

首先准备一份数据源，例如一个List\<Person>类型的对象列表。其中Person类包含两个公共属性：Name和Age。

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

var persons = new List<Person>
{
    new Person{ Name = "Alice", Age = 25 },
    new Person{ Name = "Bob", Age = 30 },
    new Person{ Name = "Charlie", Age = 20 }
};

创建UI元素

在WPF中，可以使用ItemsControl来显示列表数据。ItemsControl是WPF中一个非常重要的控件，它可以将一个集合中的元素按照指定的数据模板进行展示。

<ItemsControl ItemsSource="{Binding Persons}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

上述XAML代码中，ItemsControl绑定了一个名为Persons的属性作为数据源，然后定义了一个数据模板，用于将集合中的每个对象展示为一个StackPanel，并显示其Name和Age属性。

绑定数据

最后一步是将数据源绑定到UI元素上。可以使用DataContext或者使用Code-Behind的方式进行绑定。

使用DataContext进行绑定

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <ItemsControl ItemsSource="{Binding Persons}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="{Binding Age}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
}

上述代码中，MainWindow的DataContext属性被设置为一个ViewModel对象，ViewModel对象包含一个名为Persons的List\<Person>属性。

使用Code-Behind进行绑定

使用Code-Behind进行绑定的方法如下：

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="450" Width="800" Loaded="MainWindow_Loaded">
    <StackPanel>
        <ItemsControl x:Name="MyList">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="{Binding Age}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Window>

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

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var persons = new List<Person>()
        {
            new Person(){Name = "Alice", Age = 25},
            new Person(){Name = "Bob", Age = 30},
            new Person(){Name = "Charlie", Age = 20},
        };

        MyList.ItemsSource = persons;
    }
}

使用Code-Behind进行绑定时，需要在UI元素的Loaded事件中设置数据源。

总结

这篇文章介绍了WPF中如何将列表数据绑定到UI元素中。首先准备数据源，然后使用ItemsControl将数据源展示到UI元素上，并使用DataContext或者Code-Behind的方式进行绑定。