Необходимо отображать элементы представления списка с настраиваемым выравниванием

Question

Я пытаюсь отобразить элементы группы listview, как показано на прилагаемом снимке экрана, но все еще сталкиваюсь с проблемой при отображении элементов группового просмотра.

* 1002 горизонтальное выравнивание и соответствующие элементы группы необходимо выровнять по вертикали

Answer 1

Чтобы изменить ориентацию, вам необходимо установить GroupStyle.Panel. Из-за вашего требования расположить элементы в несколько строк, вы должны использовать WrapPanel.

Чтобы заставить его вести себя правильно, вы должны отключить горизонтальный ScrollViewer из ListView (чтобы позволить элементам переноситься) и задайте фиксированную высоту ListView (чтобы сделать вертикальную ScrollViewer видимой).

Поскольку вы не изменяете макет GroupItem и ListView, вы можете безопасно удалить GroupStyle.ContainerStyle (по крайней мере, Controltemplate) и ListView.ItemsPanel шаблон. Фактически установка ItemsPanelTemplate из ListBox или ListView явно на StackPanel или вообще на что-то иное, кроме VirtualizingPanel, удаляет возможность виртуализировать элементы. Виртуализация пользовательского интерфейса значительно повышает производительность, поэтому отключать ее не стоит.

<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

Вы должны определить свойство Panel для GroupStyle, и вы можете удалить ItemsPanel для ListView:

<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; }
}