WPF: Use diffrenent orientation for grouped ICollectionView

Question

I have a grouped ListCollectionView which is displayed in a ListBox.

    <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                    <StackPanel>
                        <Label Content="{Binding Path=Name}"/>
                        <WrapPanel Orientation="Horizontal">                                
                            <ItemsPresenter />
                        </WrapPanel>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ListBox ItemsSource="{Binding MyElementView, Mode=OneWay}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.GroupStyle>
            <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}" />
        </ListBox.GroupStyle>

        <ListBox.ItemTemplate>
            <DataTemplate DataType="{x:Type model:MyElementViewModel}">
                ...
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Now all elements are listed in vertical manner, but I would like to place the groups horizontaly, but the items inside a group should be listed verticaly. How could I realize it?

score 1 · Accepted Answer · answered Oct 27 '17 at 15:09

The GroupStyle has a Panel property that you can set to an ItemsPanelTemplate:

<ListBox ...>
    <ListBox.GroupStyle>
        <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </ListBox.GroupStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

WPF: Use diffrenent orientation for grouped ICollectionView

1 Answers1