title: Styling ListView.GroupStyle with a WrapPanel
body: <p>Okay, here is my pretty simple problem.</p>
  
  <p>I have a <code>ListView</code> that I styled so as to make it look like the Windows Explorer.</p>
  
  <p>Now, I'd like to group the items inside. Therefore, I defined a <code>GroupStyle</code> with an <code>Expander</code> to group it. The grouping is now fine.</p>
  
  <p>What I don't like is that now, my <code>ListView</code> 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.</p>
  
  <p>An image is better than some text I guess.</p>
  
  <p>Here is what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/Q0pKh.jpg" alt="What I Have"></p>
  
  <p>Here is what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/QxtDP.jpg" alt="What I want"></p>
  
  <p>I cannot find which property should I have to style in order to make the <code>GroupItems</code> fit in a WrapPanel, just like I did for the items.</p>
  
  <p>Here is my ListView style:</p>
  
  <pre><code>&lt;ResourceDictionary&gt;
  
                      &lt;!-- Explorer-style layout--&gt;
                      &lt;DataTemplate x:Key="ExplorerView"&gt;
                          &lt;StackPanel Orientation="Horizontal" Height="Auto" Width="150"&gt;
                              &lt;Image Source="{Binding Path=Value.AppConfig.Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5"
                                     Height="50" Width="50"/&gt;
                              &lt;StackPanel VerticalAlignment="Center" Width="90"&gt;
                                  &lt;TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppName}" 
                       FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow"
                       Margin="0,0,0,1" /&gt;
                                  &lt;TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppType}" FontSize="9" 
                       HorizontalAlignment="Left" Margin="0,0,0,1" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/StackPanel&gt;
                      &lt;/DataTemplate&gt;
  
                      &lt;!-- Group header style--&gt;
      &lt;Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}"&gt;
  
  
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type GroupItem}"&gt;
  
                      &lt;Expander x:Name="exp" IsExpanded="True" Width="310"
                                     BorderBrush="CornflowerBlue"&gt;
  
                          &lt;Expander.Header&gt;
                              &lt;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}"&gt;
                                  &lt;CheckBox IsChecked="False" DockPanel.Dock="Right"/&gt;
                                  &lt;TextBlock Text="{Binding Path=Name}" Foreground="White"
                                             FontWeight="Bold" HorizontalAlignment="Center" /&gt;
                              &lt;/DockPanel&gt;
                          &lt;/Expander.Header&gt;
                          &lt;ItemsPresenter /&gt;
                      &lt;/Expander&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  
  
  
                  &lt;/ResourceDictionary&gt;
      &lt;!-- (...) --&gt;
  
      &lt;ListView ItemsSource="{Binding GroupedConfig, Mode=TwoWay}" 
                ItemTemplate="{StaticResource ExplorerView}"&gt;
  
  
  
          &lt;ListView.ItemsPanel&gt;
              &lt;ItemsPanelTemplate &gt;
                  &lt;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}}" /&gt;
                  &lt;!--MinWidth="{Binding ItemWidth,
                       RelativeSource={RelativeSource Self}}"--&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ListView.ItemsPanel&gt;
  
          &lt;ListView.GroupStyle&gt;
              &lt;GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}" /&gt;
          &lt;/ListView.GroupStyle&gt;
  
  
      &lt;/ListView&gt;
  </code></pre>
  
  <p>Any ideas?
  I'm trying to insert some appropriate <code>Setter</code> in the style defined for <code>GroupItem</code>, but I'm starting to think that this is not the right way to do.</p>
  
  <p>Thanks!</p>