windows-store-apps - 在 Windows 8.1 GridView 中设置组边距

Question

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

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

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

我也曾尝试用 ItemsStackPanel(支持虚拟化)替换 ItemsWrapGrid，但这会在滚动具有不同数量项目的组时产生奇怪的水平滚动条行为。 (滚动条变大变小)

这是我目前所拥有的代码片段:

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

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

长话短说:我想要一个包含分组数据的 GridView，并将 ItemsWrapGrid 作为我可以设置组边距的 ItemsPanel。

Answer 1

我也想知道如何正确地做这件事strong> 现在太久了。注意这是一个 Win 8.1 商店应用

我求助于以下(非常丑陋、古怪)的解决方案，但我对此并不满意。

我的具体要求

1. 在分组的 GridView 中分隔每个组的 25px 较浅背景的边距/边框(恰好在 SemanticZoom.ZoomedInView 内)
2. 每个组的标题是水平的并且跨越组的整个宽度
3. 组中的项目以 GridView 方式显示，即按行垂直堆叠直到列被填满，然后溢出到新列中

Hacky Nasty Ugly 解决方案

• 需要 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>

注意

我尝试使用样式(包含 ContentControl x:Name="HeaderContent"和 ItemsControl x:Name="ItemsControl"的 TargetType="GroupItem")尝试在默认 2 以外的其他内容中布局组标题与组项目行网格，它工作得很好......除了 令人恼火的事实，它只在我使用 ItemsWrapGrid 以外的东西时才起作用，即 StackPanel，这打破了我的要求 3。