Estilo ListView.GroupStyle con un WrapPanel

Question

Bien, este es mi problema bastante simple.

Tengo un ListView que he diseñado para que se vea como el Explorador de Windows.

Ahora, me gustaría agrupar los elementos dentro. Por lo tanto, definí un GroupStyle con un Expander para agruparlo. La agrupación ahora está bien.

Lo que no me gusta es que ahora, mi ListView muestra cada grupo en una línea separada, mientras que me gustaría tener algún tipo de envoltura de expansión para mostrar muchos grupos en la misma línea.

Una imagen es mejor que un texto, supongo.

Aquí es lo que tengo:

Aquí es lo que quiero:

no puedo encontrar que la propiedad debería tengo que estilo con el fin de hacer que el GroupItems encajar en un WrapPanel, al igual que hice para los artículos.

Aquí es mi estilo ListView:

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

¿Alguna idea? Estoy tratando de insertar algunos Setter apropiados en el estilo definido para GroupItem, pero estoy empezando a pensar que esta no es la manera correcta de hacerlo.

Gracias!

Answer 1

Finalmente encontré la propiedad correcta para editar después de muchos intentos.

supongo que podría ser útil para publicar aquí si alguien tendría que hacer algo con el mismo comportamiento:

Así que en realidad tienen una propiedad Panel en el GroupStyle en el que podemos añadir este modo es necesario WrapPanel:

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

Answer 2

en caso de que alguien está aquí como que estoy tratando de hacer un cuadro de lista de artículos Wrap pero en base a una cantidad desconocida de artículos de modo que no se puede establecer un ancho igual que la respuesta anterior, esto es cómo lo hice.

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

En mi convertidor simplemente restar 30 para tener en cuenta la altura del encabezado.

Aquí está el código completo:

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

Esperanza esto ayuda a salvar a alguien algún tiempo!