如何在水平 StackPanel 内的 ListView 中显示组?

How to display groups in a ListView inside a horizontal StackPanel?

我有一个 ListView,用于显示具有一级分组的项目,但我没有设法在水平 StackPanel 中显示组,我设置了 ListView 的模板,它的 ItemsPanel 属性、它的 ItemTemplate 属性 和它的 GroupStyle 属性 但它并没有像下图那样显示。

我读过 this post 但我不明白如何在我的案例中应用这些知识。

XAML

<SolidColorBrush x:Key="ListBox.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="ListBox.Static.Border" Color="#FFABADB3"/>
<SolidColorBrush x:Key="ListBox.Disabled.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="ListBox.Disabled.Border" Color="#FFD9D9D9"/>
<Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
    <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListView}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                    <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                        <StackPanel Orientation="Horizontal">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </StackPanel>
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Border}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsGrouping" Value="true"/>
                            <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

(此处不相关标记,则:)

<ListView Background="Green"
    Foreground="White" VerticalAlignment="Center"
    ItemsSource="{x:Static local:GameLevels.Levels}" Name="LevelsListBox" HorizontalAlignment="Center" Style="{DynamicResource ListViewStyle1}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid HorizontalAlignment="Left" VerticalAlignment="Top">
            </UniformGrid>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" TextAlignment="Center"></TextBlock>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Padding="5,0,0,0" FontWeight="Bold" FontSize="14" Text="{Binding Name}" Visibility="{Binding Name, Converter={StaticResource IsGroupTitleInChapter0Conv}}"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>
</ListView>

代码隐藏

CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(LevelsListBox.ItemsSource);
PropertyGroupDescription gd = new PropertyGroupDescription("Category");
view.GroupDescriptions.Add(gd);

实际截图

预期的屏幕截图

您应该设置 Panel 属性 的 GroupStyle:

<ListView Background="Green"
    Foreground="White" VerticalAlignment="Center"
    ItemsSource="{x:Static local:GameLevels.Levels}" Name="LevelsListBox" HorizontalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" TextAlignment="Center"></TextBlock>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Padding="5,0,0,0" FontWeight="Bold" FontSize="14" Text="{Binding Name}" Visibility="{Binding Name, Converter={StaticResource IsGroupTitleInChapter0Conv}}"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </ListView.GroupStyle>
</ListView>