WPF：如何创建自定义项目控制面板？ [英] WPF: How to create a custom items control panel?

问题描述

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

I want to design a custom items control panel for a ListBox. There are 3 requirements:

1. 它应具有属性 int行和 int列将定义组成面板的单元格的矩阵。这是面板的外观（颜色无关紧要，我只想显示该面板由3x4矩阵中的12个空单元格组成）：
   

1. It should have the properties int rows and int columns which would define the matrix of cells that the panel is made of. This is what the panel should look like (colors are irrelevant, I just wanted to show that the panel is consisted of 12 empty cells in a 3x4 matrix):

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

If the number of items in the items control is less than the number of defined cells all the cells should be drawn. E.g. if there are only 4 items to be placed in a 3x4 matrix shown in the picture, all of the cells should be drawn and only 4 of them should contain the items.

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

It should be possible to set which cell will host which item, via some data binding. For example, let's say I had a list of persons. That list contains items of type Person and the Person class contains two properties X and Y. I should be able to data bind X to the row of the cell and Y to the column of the cell, thus allowing myself to set which cell in the panel will contain which person from the list.

如果创建项目控制面板没有意义，请推荐哪种方法更好。老实说，我对如何开始使用该工具感到困惑。感谢您的所有帮助。欢呼！

If creating the items control panel doesn't make sense, please recommend what would be the better approach. To be quite honest I am puzzled on how to even get started with this. Thanks for all the help. Cheers!

推荐答案

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

A useful strategy to solve this kind of problem is to manipulate the source data into a format more suitable for consumption by an ItemsControl. For example, a two-dimensional array of items, or a linear collection of items that contain their own two-dimensional coordinates, is hard to utilize.

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

Instead, with a simple data structure transformation you can bind your ItemsSource to collection of collections. The outer collection contains three rows and each inner collection contains four items. Each item can contain its actual row and column coordinates and can handle whether the corresponding cell should display any data.

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

Here's a 2x2 example to show you what I mean:

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

这篇关于WPF：如何创建自定义项目控制面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！