Stylizacja ListView.GroupStyle z WrapPanel

Question

OK, oto mój całkiem prosty problem.

Mam ListView, który zaprojektowałem tak, aby wyglądał jak Eksplorator Windows.

Teraz chciałbym zgrupować przedmioty w środku. Dlatego zdefiniowałem GroupStyle z Expander, aby go pogrupować. Grupowanie jest teraz w porządku.

To, co mi się nie podoba, to to, że teraz moja ListView wyświetla każdą grupę w oddzielnym wierszu, a ja chciałbym mieć trochę zawijania ekspandera, aby wyświetlić wiele grup w tej samej linii.

Obraz jest lepszy niż tekst, jak sądzę.

Oto co mam:

Oto, czego chcę:

nie mogę dowiedzieć się, jakie właściwości powinna muszę stylu w celu uczynienia GroupItems pasuje do WrapPanel, tak jak zrobiłem to dla przedmiotów.

Oto mój styl 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> 

Jakieś pomysły? Próbuję wstawić odpowiednie Setter w stylu zdefiniowanym dla GroupItem, ale zaczynam myśleć, że nie jest to właściwy sposób.

Dzięki!

Answer 1

W końcu znalazłem odpowiednią właściwość do edycji po wielu próbach.

Chyba to może być przydatne, aby opublikować go tutaj, jeśli ktoś będzie musiał coś zrobić z tym samym zachowanie:

Więc rzeczywiście mają właściwość Panel w GroupStyle w którym możemy dodać to tak potrzebne WrapPanel:

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

Answer 2

W przypadku gdy ktoś jest tu jak próbuję zrobić listBox przedmioty owijane ale w oparciu o nieznanej ilości przedmiotów, więc nie można ustawić szerokość jak wyżej odpowiedź, to jak ja to zrobiłem.

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

W moim konwertorze po prostu odejmuję 30, aby uwzględnić wysokość nagłówka.

Oto kompletny kod:

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

Nadzieja to pomaga uratować komuś trochę czasu!