不同高度和包装的分组 GridView 项目

Question

我的 Windows 应用商店应用有一个 GridView，它必须包含分组的 GridViewItems，它们的宽度相同，但可以是任意高度，具体取决于其内容。在每个组中，项目应该从上到下流动，然后当可用高度用完时，换行到下一列。整个GridView 位于Grid 行内，该行具有星形（*）高度，我认为这给了它一个固定的垂直空间。所以我不明白为什么我在包装物品时遇到这么多麻烦，从而流入下一列。

我一直在尝试ItemsPanelTemplate、GridView.ItemsPanel 和GroupStyle.Panel 中的各种面板，但一直无法达到想要的布局。

除非我误解了VariableSizedWrapGrid 的用法，否则在Panel 属性中使用它似乎是我需要的。虽然它给了我正确的包装，但它不允许高度变化。也就是说，每个项目的高度都设置为第一个项目的高度。

ItemsWrapGrid 的问题在于它将第一个单元格的高度应用于每个单元格。

我尝试使用 VariableSizedWrapGrid 并将其 Orientation 属性设置为 Horizontal 仅用于 GridView.ItemsPanel 属性（将 GroupStyle.Panel 保留为其默认值）。这允许我需要不同的项目高度。但随后这些项目不会流入每个组内的下一列。设置 MaximumRowsOrColumns 属性没有任何效果，但即使这样做也不是我想要的，因为换行应该取决于特定屏幕的高度 - 而不是 XAML 中设置的任意数字。

我尝试了很多变化，但都没有成功。这就是 XAML 现在的样子。

<Grid>
    <Grid.Resources>
        <CollectionViewSource x:Key="subItems" Source="{Binding SubItems}" IsSourceGrouped="True" ItemsPath="SubItems"/>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Text="My Subheader" Style="{StaticResource SubheaderTextBlockStyle}" Margin="0,0,7,3"/>
    <GridView Grid.Row="1" ItemsSource="{Binding Source={StaticResource subItems}}" SelectionMode="None" Margin="0,3"
              ItemTemplateSelector="{StaticResource myTemplateSelector}">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="Width" Value="294"/>
                <Setter Property="Margin" Value="0,5"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </GridView>
</Grid>

如何实现高度可变但包含在每个组内的分组单元格？

Answer 1

我找到了一个related question，其答案是推荐使用移植的 WrapPanel。那里使用的 WrapPanel 的宽度有问题，但我也发现 a proper WrapPanel implementation 有效。