WPF ItemsPanelTemplate的详细使用教程

WPF 中的 ItemsPanelTemplate 主要用于自定义 ItemsControl 控件（如 ListBox、ListView、ComboBox）的布局行为。它定义了如何排列 ItemsControl 的子元素。在默认情况下，大多数 ItemsControl 使用 StackPanel 垂直排列子项，但通过 ItemsPanelTemplate 可以实现更加灵活的布局。

ItemsPanelTemplate 基本概念

• 作用：定义 ItemsControl 如何排列其子项。不同于 ItemTemplate 定义每个子项的样式，ItemsPanelTemplate 负责定义所有子项的容器布局。
• 适用控件：ListBox、ListView、ComboBox、DataGrid 等 ItemsControl 派生类。

定义 ItemsPanelTemplate

ItemsPanelTemplate 是定义在 ItemsControl.ItemsPanel 属性中的模板，通常包含一个 Panel 类型的布局控件，如 StackPanel、WrapPanel、UniformGrid 或者自定义的 Panel。

基本语法

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 定义布局面板，比如 StackPanel、WrapPanel、UniformGrid 等 -->
            <StackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

常用布局面板

1. StackPanel：默认布局，垂直或水平排列子项。
2. WrapPanel：子项按行排列，自动换行。
3. UniformGrid：子项在均匀的网格中排列。
4. VirtualizingStackPanel：优化大量数据的渲染，滚动时只显示可见的子项，常用于 ListView 和 ListBox。

示例详解

1. 使用默认 StackPanel

StackPanel 默认垂直排列子项。

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBoxItem>Item 1</ListBoxItem>
    <ListBoxItem>Item 2</ListBoxItem>
    <ListBoxItem>Item 3</ListBoxItem>
</ListBox>

2. 使用 WrapPanel

WrapPanel 会按水平或垂直方向排列子项，并在空间不足时自动换行。

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBoxItem>Item 1</ListBoxItem>
    <ListBoxItem>Item 2</ListBoxItem>
    <ListBoxItem>Item 3</ListBoxItem>
    <ListBoxItem>Item 4</ListBoxItem>
    <ListBoxItem>Item 5</ListBoxItem>
</ListBox>

3. 使用 UniformGrid

UniformGrid 会将所有子项均匀分布在网格中，列数由 Columns 属性指定。

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="3" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBoxItem>Item 1</ListBoxItem>
    <ListBoxItem>Item 2</ListBoxItem>
    <ListBoxItem>Item 3</ListBoxItem>
    <ListBoxItem>Item 4</ListBoxItem>
    <ListBoxItem>Item 5</ListBoxItem>
    <ListBoxItem>Item 6</ListBoxItem>
</ListBox>

4. 使用 VirtualizingStackPanel

当显示大量数据时，VirtualizingStackPanel 会只渲染可见的元素，优化性能。

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBoxItem>Item 1</ListBoxItem>
    <ListBoxItem>Item 2</ListBoxItem>
    <ListBoxItem>Item 3</ListBoxItem>
    <!-- 假设有很多其他项目 -->
</ListBox>

自定义 ItemsPanelTemplate

WPF 中你还可以自定义 Panel，并在 ItemsPanelTemplate 中使用。假设你创建了一个自定义的 CircularPanel，用来将子项以圆形排列：

1. 定义自定义面板：

public class CircularPanel : Panel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        foreach (UIElement child in InternalChildren)
        {
            child.Measure(availableSize);
        }
        return availableSize;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        double angleStep = 360.0 / InternalChildren.Count;
        double angle = 0;

        foreach (UIElement child in InternalChildren)
        {
            double x = (finalSize.Width / 2) + (finalSize.Width / 4 * Math.Cos(angle * Math.PI / 180)) - child.DesiredSize.Width / 2;
            double y = (finalSize.Height / 2) + (finalSize.Height / 4 * Math.Sin(angle * Math.PI / 180)) - child.DesiredSize.Height / 2;
            child.Arrange(new Rect(new Point(x, y), child.DesiredSize));
            angle += angleStep;
        }

        return finalSize;
    }
}

2. 在 XAML 中使用自定义面板：

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <local:CircularPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBoxItem>Item 1</ListBoxItem>
    <ListBoxItem>Item 2</ListBoxItem>
    <ListBoxItem>Item 3</ListBoxItem>
    <ListBoxItem>Item 4</ListBoxItem>
</ListBox>

总结

• ItemsPanelTemplate 可以显著增强 ItemsControl 的布局能力。
• 通过自定义面板，WPF 提供了极大的灵活性来设计复杂的 UI 布局。
• 使用 VirtualizingStackPanel 能提升渲染大数据列表的性能。

在实际应用中，根据需求选择合适的 Panel 是关键，既要考虑视觉效果，也要考虑性能优化。