WPF ItemsControl控件

ItemsControl 是 WPF 中一个非常灵活的控件，用于显示一组数据项。它是一个基类，许多其他控件（如 ListBox, ListView, ComboBox 等）都是从 ItemsControl 继承而来。ItemsControl 的主要特点是它可以自定义数据项的显示方式，因此非常适合用于创建自定义布局的列表。

基本用法

1. 数据绑定

首先，你需要一个数据源来绑定到 ItemsControl。数据源可以是任何实现了 IEnumerable 接口的集合，例如 List<T>, ObservableCollection<T> 等。

public class MyViewModel
{
    public ObservableCollection<string> Items { get; set; }

    public MyViewModel()
    {
        Items = new ObservableCollection<string>
        {
            "Item 1",
            "Item 2",
            "Item 3"
        };
    }
}

2. XAML 布局

接下来，在 XAML 中定义 ItemsControl 并绑定数据源。

<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="350" Width="525">
    <Window.DataContext>
        <local:MyViewModel />
    </Window.DataContext>

    <Grid>
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

自定义布局

ItemsControl 的强大之处在于它可以自定义数据项的布局。你可以通过 ItemsPanel 和 ItemTemplate 属性来控制布局和外观。

1. 使用 ItemsPanel 自定义布局

ItemsPanel 属性允许你指定一个面板来排列数据项。常见的面板包括 StackPanel, WrapPanel, Canvas 等。

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Margin="5" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

2. 使用 ItemContainerStyle 自定义容器样式

ItemContainerStyle 属性允许你自定义每个数据项的容器样式。

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Control.Margin" Value="5" />
            <Setter Property="Control.Background" Value="LightBlue" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

示例：使用 DataTemplate 创建复杂布局

你可以使用 DataTemplate 创建更复杂的布局，例如每个数据项包含多个控件。

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="1" Padding="5" Margin="5">
                <StackPanel>
                    <TextBlock Text="{Binding}" FontSize="16" FontWeight="Bold" />
                    <TextBlock Text="This is a description." />
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

动态生成数据项

你还可以在代码中动态生成数据项并添加到 ItemsControl 中。

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

        var viewModel = new MyViewModel();
        viewModel.Items.Add("Dynamically Added Item");
        this.DataContext = viewModel;
    }
}

总结

ItemsControl 是一个非常强大的控件，适用于需要自定义布局和外观的场景。通过 ItemsPanel, ItemTemplate, 和 ItemContainerStyle 属性，你可以灵活地控制数据项的排列和样式。希望这些示例能帮助你更好地理解和使用 ItemsControl。