如何在水平 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>
我有一个 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>