Search code examples
c#wpflistboxicollectionview

WPF: Use diffrenent orientation for grouped ICollectionView


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?


Solution

  • 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>