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

Question

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

1. 它应该具有属性int rows和int columns，用于定义面板所构成的单元格矩阵。该面板应如下图所示（颜色不重要，只是为了显示该面板由3行4列的12个空单元格组成）：

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

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

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

- Boris

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 |
+---+---+

- Rick Sladkey

---

感谢您的回复。我寻求的解决方案并不完全是您所提供的。我确实喜欢您的想法，但以下是问题所在：使用您的代码，无法省略元素“3”并仍然使“4”位于“2”下面。我需要能够指定哪个元素将放置在哪个矩形中。 - Boris

您可以为任何想要为空的单元格提供一个虚拟的“空白”项。换句话说，即使它们全部为空，也总是有十二个项目。然后，通过将值分配给sampleData[row][col]来填写非空白项。 - Rick Sladkey