使用 WrapPanel 设置 ListView.GroupStyle 样式

Question

好的，这是我的非常简单的问题。

我有一个 ListView，我对其进行了样式设置，使其看起来像 Windows 资源管理器。

现在，我想对里面的项目进行分组。因此，我定义了一个带有 Expander 的 GroupStyle 来对其进行分组。现在分组已经很好了。

我不喜欢的是，现在我的 ListView 在单独的行上显示每个组，而我希望进行一些扩展器包装以便在同一行上显示许多组。

我想图像比一些文字更好。

这是我所拥有的：

这是我想要的：

我找不到应该设置哪个属性的样式才能使 GroupItems 适合 WrapPanel，就像我为项目。

这是我的 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>

有什么想法吗？ 我试图在为 GroupItem 定义的样式中插入一些适当的 Setter，但我开始认为这不是正确的方法。

谢谢！

Answer 1

经过多次尝试，我终于找到了合适的属性进行编辑。

我想如果有人需要做一些具有相同行为的事情，将其发布在这里可能会很有用：

所以我们实际上在 GroupStyle 中有一个属性 Panel ，我们可以在其中添加所需的 WrapPanel ：

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

Answer 2

万一有人在这里像我一样尝试制作 ListBox Items Wrap 但基于未知数量的项目，因此您无法像上面的答案那样设置宽度，这就是我的做法。

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

在我的转换器中，我只需减去 30 即可计算标题的高度。

这是完整的代码：

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

希望这有助于节省一些时间！