WPF ItemsControl控件的详细使用教程

WPF 中的 ItemsControl 是一个灵活的控件，可以显示绑定到集合的多个数据项。ItemsControl 是所有具有列表功能的控件（如 ListBox、ComboBox、TreeView 和 ListView）的基类。本文将详细介绍如何在 WPF 中使用 ItemsControl，包括数据绑定、自定义模板、样式和事件处理等内容。

目录

1. 基本使用
2. 数据绑定
3. ItemTemplate 模板
4. 使用 StackPanel 和 WrapPanel 布局
5. 样式与自定义
6. 处理事件
7. 高级功能
8. 完整示例
9. 总结

---

1. 基本使用

基础 XAML 示例

ItemsControl 可以用于简单地显示一组静态数据。下面是如何在 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="ItemsControl Example" Height="200" Width="300">
    <Grid>
        <ItemsControl>
            <ItemsControl.Items>
                <TextBlock Text="Item 1"/>
                <TextBlock Text="Item 2"/>
                <TextBlock Text="Item 3"/>
            </ItemsControl.Items>
        </ItemsControl>
    </Grid>
</Window>

运行结果

该示例将显示一个简单的三项列表，分别是 “Item 1”、“Item 2” 和 “Item 3”。

---

2. 数据绑定

绑定到对象集合

ItemsControl 的核心功能是通过 ItemsSource 属性绑定到集合数据。

数据模型

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

XAML 中绑定 ItemsSource

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ItemsControl Binding" Height="200" Width="300">
    <Grid>
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

设置 DataContext

public partial class MainWindow : Window
{
    public ObservableCollection<Item> Items { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Items = new ObservableCollection<Item>
        {
            new Item { Name = "Item 1" },
            new Item { Name = "Item 2" },
            new Item { Name = "Item 3" }
        };
        DataContext = this;
    }
}

运行效果

ItemsControl 将自动生成 TextBlock 列表，每个 TextBlock 显示 Item 对象的 Name 属性。

---

3. ItemTemplate 模板

ItemTemplate 用于定义 ItemsControl 中每个数据项的显示方式。

自定义 ItemTemplate

在数据绑定时，可以使用 ItemTemplate 自定义每个数据项的布局。例如，将每个项显示为一个带有图标和名称的水平布局：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="icon.png" Width="16" Height="16" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这样，ItemsControl 中的每个项都将显示一个图标和对应的名称。

---

4. 使用 StackPanel 和 WrapPanel 布局

ItemsControl 的默认布局容器是 StackPanel，它会将所有项垂直排列。你可以自定义布局容器来改变排列方式。

使用 StackPanel

默认情况下，ItemsControl 使用 StackPanel 垂直排列项。如果想要水平排列，可以显式设置：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

使用 WrapPanel

如果你希望控件自动换行，可以使用 WrapPanel 作为 ItemsControl 的布局容器：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

当控件的宽度不足以显示所有项时，WrapPanel 会将多余的项换到下一行。

---

5. 样式与自定义

你可以通过 ItemsControl.ItemContainerStyle 来自定义项容器的外观。

自定义 ItemContainerStyle

例如，改变项容器的背景颜色：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Background" Value="LightGray"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

每个项的容器（即 ContentPresenter）将拥有 5 像素的间距和浅灰色背景。

---

6. 处理事件

虽然 ItemsControl 不像 ListBox 那样直接支持选择功能，但你可以手动处理交互事件，如鼠标点击。

处理项的点击事件

你可以使用 MouseLeftButtonUp 事件来捕获用户点击项的操作：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" MouseLeftButtonUp="Item_Clicked"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

后台代码

private void Item_Clicked(object sender, MouseButtonEventArgs e)
{
    var clickedItem = (sender as TextBlock)?.DataContext as Item;
    MessageBox.Show($"You clicked on: {clickedItem?.Name}");
}

---

7. 高级功能

ItemsControl 的灵活性还允许你实现更复杂的功能，如分组、排序和分页。

分组数据

你可以使用 CollectionViewSource 来对数据进行分组并展示在 ItemsControl 中：

<Window.Resources>
    <CollectionViewSource x:Key="GroupedItems" Source="{Binding Items}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Category" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
</Window.Resources>

<ItemsControl ItemsSource="{Binding Source={StaticResource GroupedItems}}">
    <ItemsControl.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ItemsControl.GroupStyle>
</ItemsControl>

动态更新

如果数据源是 ObservableCollection，则对集合的添加或删除项会自动反映到 ItemsControl 中。

---

8. 完整示例

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="ItemsControl Example" Height="200" Width="300">
    <Grid>
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" MouseLeftButtonUp="Item_Clicked"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

后台代码

public partial class MainWindow : Window
{
    public ObservableCollection<Item> Items { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Items = new ObservableCollection<Item>
        {
            new Item { Name = "Item 1" },
            new Item { Name = "Item 2" },
            new Item { Name

 = "Item 3" }
        };
        DataContext = this;
    }

    private void Item_Clicked(object sender, MouseButtonEventArgs e)
    {
        var clickedItem = (sender as TextBlock)?.DataContext as Item;
        MessageBox.Show($"You clicked on: {clickedItem?.Name}");
    }
}

---

9. 总结

ItemsControl 是一个高度灵活的控件，适用于展示数据集合。通过数据绑定、自定义模板和样式、以及结合布局容器如 StackPanel 或 WrapPanel，你可以实现多种布局方式。此外，ItemsControl 的扩展性使其适合处理各种场景，如动态数据、分组、事件处理等。