WPF：如何创建自定义项目控制面板？

Question

我想为 ListBox 设计一个自定义项目控制面板。有 3 个要求：

1. 它应该具有属性 int rows 和 int columns，它们将定义面板组成的单元格矩阵。这就是面板的样子（颜色无关紧要，我只是想表明面板由 3x4 矩阵中的 12 个空单元组成）：

2. 如果项目控件中的项目数小于定义的单元格数，则所有单元格应被绘制。例如，如果如图所示的 3x4 矩阵中仅放置 4 个项目，则应绘制所有单元格，并且其中只有 4 个单元格应包含这些项目。

3. 应该可以通过某些数据绑定来设置哪个单元格将托管哪个项目。例如，假设我有一份人员名单。该列表包含 Person 类型的项目，并且 Person 类包含两个属性 X 和 Y。我应该能够将 X 数据绑定到单元格的 row 并将 Y 数据绑定到单元格的 column ，从而允许我自己设置面板中的哪个单元格将包含列表中的哪个人。

如果创建项目控制面板没有意义，请推荐更好的方法。老实说，我对如何开始这件事感到困惑。感谢您的所有帮助。干杯!

Answer 1

解决此类问题的一个有用策略是将源数据处理为更适合 ItemsControl 使用的格式。例如，项目的二维数组或包含其自己的二维坐标的项目的线性集合很难利用。

相反，通过简单的数据结构转换，您可以将 ItemsSource 绑定到集合的集合。外部集合包含三行，每个内部集合包含四个项目。每个项目都可以包含其实际的行和列坐标，并且可以处理相应的单元格是否应显示任何数据。

这是一个 2x2 的示例，向您展示我的意思：

<Grid>
    <Grid.Resources>
        <coll:ArrayList x:Key="sampleData">
            <x:Array Type="sys:String">
                <sys:String>1</sys:String><sys:String>2</sys:String>
            </x:Array>
            <x:Array Type="sys:String">
                <sys:String>3</sys:String<sys:String>4</sys:String>
            </x:Array>
        </coll:ArrayList>
    </Grid.Resources>
    <ItemsControl ItemsSource="{StaticResource sampleData}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black" BorderThickness="1" Width="50" Height="50">
                                <TextBlock Text="{Binding}"/>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

它会产生：

+---+---+
| 1 | 2 |
+---+---+
| 3 | 4 |
+---+---+