需要显示具有自定义对齐方式的列表视图项

Question

我正在尝试像附加的屏幕截图一样显示列表视图组项目，但在显示组视图项目时我仍然遇到问题

要求：

组头需要水平对齐显示，对应的组项需要垂直对齐

 <ListView
        x:Name="listview"
        BorderThickness="0"
        ItemsSource="{Binding Source={StaticResource cvs}}"
        SelectedItem="{Binding SelectedProduct}">
       
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Product}" />
            </DataTemplate>
        </ListView.ItemTemplate>

        


        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock
                            Padding="5,0,0,0"
                            FontSize="14"
                            FontWeight="Bold"
                            Text="{Binding Name}"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GroupItem">
                                    <StackPanel Orientation="Vertical">
                                        <ContentPresenter/>
                                        <ItemsPresenter/>
                                    </StackPanel>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ListView.GroupStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

请提出一个解决方案来实现这一点。

Answer 1

要更改方向，您必须设置GroupStyle.Panel。由于您需要多行排列项目，您应该使用WrapPanel。

要使其正常运行，您应该禁用ListView 的水平ScrollViewer（以允许项目换行）并为ListView 提供固定高度（以使垂直ScrollViewer 可见） .

由于您不修改GroupItem 和ListView 的布局，您可以安全地删除GroupStyle.ContainerStyle（至少Controltemplate 覆盖）和ListView.ItemsPanel 模板覆盖。事实上，将ListBox 或ListView 中的ItemsPanelTemplate 显式设置为StackPanel 或通常设置为VirtualizingPanel 以外的其他内容会删除虚拟化项目的能力。 UI 虚拟化显着提高了性能，因此您不想禁用它。

<ListView ItemsSource="{Binding Source={StaticResource cvs}}" 
          Height="400"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled">
  <ListView.GroupStyle>
    <GroupStyle>
      <GroupStyle.Panel>
        <ItemsPanelTemplate>
          <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
      </GroupStyle.Panel>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
          <TextBlock
            Padding="5,0,0,0"
            FontSize="14"
            FontWeight="Bold"
            Text="{Binding Name}" />
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
    </GroupStyle>
  </ListView.GroupStyle>
</ListView>

Answer 2

您应该为 GroupStyle 定义 Panel 属性，并且可以删除 ListView 的 ItemsPanel：

<GroupStyle.Panel>
    <ItemsPanelTemplate>
         <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GroupStyle.Panel>

为感兴趣的人设置组的完整代码：

<Window.Resources>
    <CollectionViewSource x:Key='cvs' 
                  Source="{Binding Path=Products}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="ProductType" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
</Window.Resources>
<Grid>
    <ListView
    x:Name="listview"
    BorderThickness="0"
    ItemsSource="{Binding Source={StaticResource cvs}}"
    SelectedItem="{Binding SelectedProduct}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Product}" />
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock
                        Padding="5,0,0,0"
                        FontSize="14"
                        FontWeight="Bold"
                        Text="{Binding Name}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GroupItem">
                                    <StackPanel Orientation="Vertical">
                                        <ContentPresenter/>
                                        <ItemsPresenter/>
                                    </StackPanel>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</Grid>

关于使用的模型：我设置了一个简单的 ProductCvs 类

public class ProductCvs
{
    public string Product { get; set; }

    public string ProductType { get; set; }
}