将WPFToolkit DataGrid从一维列表转换为二维矩阵

Question

我想知道是否有人曾尝试以下或对如何做这件事有想法。

我有一个WPFToolkit DataGrid，它绑定到条目的ObservableCollection上。因此，DataGrid显示的行在ObservableCollection中的数量与我为DataGrid定义的列一样多。一切都很好。我现在需要的是提供相同数据的另一个视图，相反，DataGrid显示的单元格在ObservableCollection中是一样多的。

比方说，我的ObservableCollection中有100个项目。最初的场景显示了具有100行和1列的DataGrid。在修改后的场景中，我需要用10行10列来显示它，其中每个单元格都显示原始表示中的值。换句话说，我需要将我的一维ObservableCollection转换成一个2D ObservableCollection，并在DataGrid中显示它。我知道如何在后面的代码中以编程方式这样做，但是在XAML中可以这样做吗？

让我把这个问题简化一下，以防有人对此有好感。下面的XAML做了以下工作：

* Defines an XmlDataProvider just for dummy data
* Creates a DataGrid with 10 columns
      o each column is a DataGridTemplateColumn using the same CellTemplate
* The CellTemplate is a simple TextBlock bound to an XML element

如果在下面运行XAML，您会发现DataGrid最后有5行，每本书一行，以及10个内容相同的列(都显示书名)。然而，我想要完成的是，尽管有不同的数据集，在这种情况下，我最终会有一行，每本书的标题出现在第1行的单个单元格中，占据单元格0-4，而在单元格5-9中没有。然后，如果我添加了更多的数据，并且在XML数据源中有12本书，我将完全填充第1行(涵盖前10个标题的单元格)，第2行将填充前2个单元格。

我的场景可以主要在XAML中完成吗?还是应该让自己在后面的代码中工作呢？

如有任何指导，将不胜感激。非常感谢！

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:custom="http://schemas.microsoft.com/wpf/2008/toolkit"
mc:Ignorable="d"
x:Name="UserControl"
d:DesignWidth="600" d:DesignHeight="400"  >
<UserControl.Resources>
    <XmlDataProvider x:Key="InventoryData" XPath="Inventory/Books">
        <x:XData>
            <Inventory xmlns="">
                <Books>
                    <Book ISBN="0-7356-0562-9" Stock="in" Number="9">
                        <Title>XML in Action</Title>
                        <Summary>XML Web Technology</Summary>
                    </Book>
                    <Book ISBN="0-7356-1370-2" Stock="in" Number="8">
                        <Title>Programming Microsoft Windows With C#</Title>
                        <Summary>C# Programming using the .NET Framework</Summary>
                    </Book>
                    <Book ISBN="0-7356-1288-9" Stock="out" Number="7">
                        <Title>Inside C#</Title>
                        <Summary>C# Language Programming</Summary>
                    </Book>
                    <Book ISBN="0-7356-1377-X" Stock="in" Number="5">
                        <Title>Introducing Microsoft .NET</Title>
                        <Summary>Overview of .NET Technology</Summary>
                    </Book>
                    <Book ISBN="0-7356-1448-2" Stock="out" Number="4">
                        <Title>Microsoft C# Language Specifications</Title>
                        <Summary>The C# language definition</Summary>
                    </Book>
                </Books>
                <CDs>
                    <CD Stock="in" Number="3">
                        <Title>Classical Collection</Title>
                        <Summary>Classical Music</Summary>
                    </CD>
                    <CD Stock="out" Number="9">
                        <Title>Jazz Collection</Title>
                        <Summary>Jazz Music</Summary>
                    </CD>
                </CDs>
            </Inventory>
        </x:XData>
    </XmlDataProvider>

    <DataTemplate x:Key="GridCellTemplate">
        <TextBlock>
            <TextBlock.Text>
                <Binding XPath="Title"/>
            </TextBlock.Text>
        </TextBlock>
    </DataTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <custom:DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsSynchronizedWithCurrentItem="True"
    Background="{DynamicResource WindowBackgroundBrush}" HeadersVisibility="All" RowDetailsVisibilityMode="Collapsed"
    SelectionUnit="CellOrRowHeader" CanUserResizeRows="False" GridLinesVisibility="None" RowHeaderWidth="35" AutoGenerateColumns="False"
    CanUserReorderColumns="False" CanUserSortColumns="False">
        <custom:DataGrid.Columns>
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="01" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="02" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="03" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="04" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="05" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="06" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="07" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="08" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="09" />
            <custom:DataGridTemplateColumn CellTemplate="{StaticResource GridCellTemplate}" Header="10" />
        </custom:DataGrid.Columns>
        <custom:DataGrid.ItemsSource>
            <Binding Source="{StaticResource InventoryData}" XPath="Book"/>
        </custom:DataGrid.ItemsSource>
    </custom:DataGrid>
</Grid>

​

Answer 1

因此，简单地重新表述您的问题，您有一个对象集合，并且您希望以10到一行的方式水平显示它们。如果超过10项，则额外的项将环绕(再流)到下一行。

，以下是您如何非常容易地做到这一点：

不要使用DataGrid。这基本上只用于将对象1对象显示到行中，其中列显示该对象的各种数据片段。

相反，使用ListBox或ListView，并给它一个新的ItemsPanel，如下所示(使用数据模板显示复杂的对象)：

<ListBox ItemsSource="{Binding SomeCollectionOfObjects}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="10"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

这将取代ListBox使用的默认UniformGrid来安排其项目。使用UniformGrid的原因是您可以指定网格应该拥有的列和/或行数。该面板将同样地将显示区域划分到ListBox的项中，但有10列(如您所需)。

如果您不需要固定数量的列/行，则可以使用WrapPanel，它将尽可能多的对象放入一行，并包装到下一行，有点像html中的inline-block元素，或者左对齐文本。

最后一点:请记住，我刚才提到的这三个面板中的每一个都可以将其Orientation设置为Horizontal ( UniformGrid和WrapPanel的默认值)或Vertical ( VirtualizingStackPanel和StackPanel的默认设置)。

此外，您还可以为自定义项目布局编写自己的面板(例如，将项目安排在一个圆圈中)。