在 Windows 8.1 GridView 中设置组边距

Question

我正在使用 WinRT GridView，显示分组数据。我的设计要求是在网格中的每组项目之间指定 20px 的间隙。

我注意到当我为 ItemsPanelTemplate 使用 ItemsWrapGrid 时，我可以设置 GroupPadding 属性，但没有 GroupMargin 属性。

我尝试用 StackPanel 替换 ItemsWrapGrid，这允许我设置 GroupStyle.Panel（我可以在其中指定 VariableSizedWrapGrid 并设置组边距）。这完全符合我的视觉设计要求，但不幸的是，使用 StackPanel 会对性能产生负面影响，因为这将不允许 GridView 使用虚拟化。

我还尝试用 ItemsStackPanel（它确实支持虚拟化）替换 ItemsWrapGrid，但是当滚动具有不同数量的项目的组时，这会产生奇怪的水平滚动条行为。 （滚动条变得越来越小）。

这是我目前所拥有的代码 sn-p：

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid  Margin="20,0,0,0"
                                Background="Red" 
                                GroupPadding="0,0,80,0">
                </ItemsWrapGrid>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

Margin 属性适用于整个 Grid。 GroupPadding 属性正确设置了组之间的间隙，但我需要为每个组设置背景颜色（在本例中为红色），并在每个组之间设置透明间隙。

tl;博士： 我想要一个带有分组数据的 GridView，其中 ItemsWrapGrid 作为我可以设置组边距的 ItemsPanel。

Answer 1

我也很想知道如何正确地做到这一点我一直在搞砸，试图在我的团队之间获得利润效应 strong> 现在太久了。注：这是一个 Win 8.1 商店应用程序

我采用了以下（非常丑陋，hacky）的解决方案，但我对此并不满意。

我的具体要求

1. Margin / Border of 25px较浅的背景阴影将分组GridView中的每个组分开（恰好在SemanticZoom.ZoomedInView内）
2. 每个组的标题是水平的并且跨越组的整个宽度
3. 组内的项目以 GridView 方式显示，即垂直堆叠成行直到列被填满，然后溢出到新列中

Hacky Nasty Ugly Solution

• 需要 ItemsWrapGrid 以确保组内项目的“流动”正确
• 添加了 GroupPadding 以提供每个组之间所需的间隙
• 使用 ImageBrush 作为背景 - 这是一个非常宽的图像，较浅的阴影作为每 X 个像素的垂直条（x=组的宽度）

如果有人有更好的解决方案，我会非常感谢，因为这让我感觉有点不舒服，让我想起了网络上令人讨厌的 1px 间隔图片；(

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsWrapGrid Background="{StaticResource ImgBack}"
            GroupHeaderPlacement="Top"
            GroupPadding="25,0,0,0">
        </ItemsWrapGrid>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

...

<ImageBrush x:Key="ImgBack" ImageSource="/Assets/GridBackRepeat.png"
    AlignmentX="Left" Stretch="None" AlignmentY="Top">
</ImageBrush>

注意

我尝试使用样式（TargetType="GroupItem" 包含 ContentControl x:Name="HeaderContent" 和 ItemsControl x:Name="ItemsControl"）来尝试将组标题与组项布局在默认 2 以外的其他位置行网格，效果很好...除了 令人愤怒的事实，它只在我使用 ItemsWrapGrid 以外的东西时才有效，即 StackPanel，这违反了我的要求 3。

Answer 2

查看GroupStyle 课程。它允许您为每个组设置样式，包括标题和组本身的单独模板。该页面中给出的示例样式是：

<GridView.GroupStyle>
    <GroupStyle HidesIfEmpty="True">
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <Grid Background="LightGray" Margin="0">
                    <TextBlock Text='{Binding Name}' 
                               Foreground="Black" Margin="30"
                               Style="{StaticResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>

        <GroupStyle.ContainerStyle>
            <Style TargetType="GroupItem">
                <Setter Property="MinWidth" Value="600"/>
                <Setter Property="BorderBrush" Value="DarkGray"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Margin" Value="3,0"/>
            </Style>
        </GroupStyle.ContainerStyle>

        <GroupStyle.Panel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid/>
            </ItemsPanelTemplate>
        </GroupStyle.Panel>
    </GroupStyle>
</GridView.GroupStyle>

注意ContainerStyle 属性，您可以在其中设置Margin。您还可以在那里为每个项目设置面板。

您应用于 GridView 的 ItemsPanel 正在应用于整个列表（如您所见）。分组的 GridView 是列表的列表，因此您需要将更改应用于每个单独的组。 GroupStyle 就是你这样做的方式。

希望这对编码有所帮助！

编辑：我个人在我的应用中所做的是更改 GroupStyle.Panel 上的边距。

<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>