Styling ListView.GroupStyle with a WrapPanel

Question

Okay, here is my pretty simple problem.

I have a ListView that I styled so as to make it look like the Windows Explorer.

Now, I'd like to group the items inside. Therefore, I defined a GroupStyle with an Expander to group it. The grouping is now fine.

What I don't like is that now, my ListView displays each group on a separate line, while I'd like to have some expander-wrapping in order to display many groups on the same line.

An image is better than some text I guess.

Here is what I have:

Here is what I want:

I cannot find which property should I have to style in order to make the GroupItems fit in a WrapPanel, just like I did for the items.

Here is my ListView style:

<ResourceDictionary>

                    <!-- Explorer-style layout-->
                    <DataTemplate x:Key="ExplorerView">
                        <StackPanel Orientation="Horizontal" Height="Auto" Width="150">
                            <Image Source="{Binding Path=Value.AppConfig.Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5"
                                   Height="50" Width="50"/>
                            <StackPanel VerticalAlignment="Center" Width="90">
                                <TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppName}" 
                     FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow"
                     Margin="0,0,0,1" />
                                <TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppType}" FontSize="9" 
                     HorizontalAlignment="Left" Margin="0,0,0,1" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>

                    <!-- Group header style-->
    <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">


        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">

                    <Expander x:Name="exp" IsExpanded="True" Width="310"
                                   BorderBrush="CornflowerBlue">

                        <Expander.Header>
                            <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                        Background="CornflowerBlue" x:Name="expContent"
                                        Width="{Binding RelativeSource={RelativeSource
                                            Mode=FindAncestor, AncestorType={x:Type Expander}},
                                            Path=Width}"
                                        Height="{Binding RelativeSource={RelativeSource
                                            Mode=FindAncestor, AncestorType={x:Type ToggleButton}},
                                            Path=ActualHeight}">
                                <CheckBox IsChecked="False" DockPanel.Dock="Right"/>
                                <TextBlock Text="{Binding Path=Name}" Foreground="White"
                                           FontWeight="Bold" HorizontalAlignment="Center" />
                            </DockPanel>
                        </Expander.Header>
                        <ItemsPresenter />
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



                </ResourceDictionary>
    <!-- (...) -->

    <ListView ItemsSource="{Binding GroupedConfig, Mode=TwoWay}" 
              ItemTemplate="{StaticResource ExplorerView}">



        <ListView.ItemsPanel>
            <ItemsPanelTemplate >
                <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                     RelativeSource={RelativeSource 
                                     AncestorType=Expander}}"
                     ItemWidth="{Binding (ListView.View).ItemWidth,
                     RelativeSource={RelativeSource AncestorType=ListView}}"

                     ItemHeight="{Binding (ListView.View).ItemHeight,
                     RelativeSource={RelativeSource AncestorType=ListView}}" />
                <!--MinWidth="{Binding ItemWidth,
                     RelativeSource={RelativeSource Self}}"-->
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

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


    </ListView>

Any ideas? I'm trying to insert some appropriate Setter in the style defined for GroupItem, but I'm starting to think that this is not the right way to do.

Thanks!

Answer 1

I finally found the right property to edit after many tries.

I guess it could be useful to post it here if anybody would need to do something with the same behavior:

So we actually have a property Panel in the GroupStyle in which we can add this so needed WrapPanel :

<ListView.GroupStyle>
    <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
        <GroupStyle.Panel>
            <ItemsPanelTemplate>
                <WrapPanel Width="800" />
            </ItemsPanelTemplate>
        </GroupStyle.Panel>
    </GroupStyle>
</ListView.GroupStyle>

Answer 2

In case anyone is here like I am trying to make a the ListBox Items Wrap but based on an unknown amount of items so you cannot set a Width like the above answer, this is how I did it.

<ListBox.ItemsPanel>
<ItemsPanelTemplate>
    <WrapPanel Orientation="Vertical" MaxHeight="{Binding Converter={StaticResource ListBoxHeightToItemsPanelHeightConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/> 
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

In my converter I simply subtract 30 to account for the height of the header.

Here is the complete code:

<ListBox.GroupStyle>
<GroupStyle>
    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <TextBlock Margin="8" FontSize="18" TextAlignment="Center" FontWeight="Bold" Foreground="White" >
                <TextBlock.Text>
                    <Binding Path="Name"/>
                </TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </GroupStyle.HeaderTemplate>
    <GroupStyle.Panel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GroupStyle.Panel>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
    <WrapPanel Orientation="Vertical" MaxHeight="{Binding Converter={StaticResource ListBoxHeightToGroupStyleHeightConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/> 
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
    <!-- Your template here. -->
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate >
    <!-- Your template here. -->
</DataTemplate>
</ListBox.ItemTemplate>

Hope this helps save someone some time!