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

Question

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

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

如果项目控件中的项目数小于定义的单元格数，则应绘制所有单元格。例如。如果只有 4 个项目要放置在图片所示的 3x4 矩阵中，则应绘制所有单元格，其中只有 4 个应包含项目。

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

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

Answer 1

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

相反，通过简单的数据结构转换，您可以绑定(bind) 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 |
+---+---+