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

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

我注意到，当我为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>

“边距”属性应用于整个网格。GroupPadding属性正确地设置了组之间的间距，但在本例中，我需要为每个组设置背景色红色，每个组之间有一个透明的间距

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

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

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

我也很想知道如何正确地做到这一点，我一直在尝试在我的团队之间获得一个边际效应，这已经太久了。注意：这是一款Win 8.1商店应用程序

我采用了以下非常丑陋的、骇人的解决方案，我对此不满意

我的具体要求

在分组的GridView中，分隔每个组的25px较浅背景阴影的边距/边框恰好位于SemanticZoom.ZoomedInView内 每个组的标题都是水平的，并跨越组的整个宽度 组中的项目以GridView方式显示，即垂直堆叠成行，直到填充列，然后溢出到新列中 骇人听闻的丑陋解决方案

需要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行网格之外的其他地方布局组标题与组项目，效果很好。。。除了恼人的事实，它只在我使用ItemsRapGrid以外的东西时才起作用，即StackPanel，这违反了我的要求3

您好，Nate，感谢您的尝试，但正如我在问题中指出的，我已经尝试指定GroupStyle设置，但这仅在GridView.ItemsPanel不是ItemsWrapGrid时有效。不幸的是，GroupStyle.ContainerStyle属性在8.1中被弃用，并在使用默认ItemsRapGrid作为GridView ItemsPanel时被忽略。添加了一个说明。我为GroupStyle的面板添加了一个空白，这很有效。再次感谢，但正如我提到的，只有当GridView.ItemsPanel不是ItemsRapGrid时，您的解决方案才能在Win 8.1中工作。有关详细信息，请参阅。它可能适合您，但您不会使用ItemsWrapGrid，这是出于性能原因我们需要的。您可以在ItemTemplate或ItemContainerStyle中添加填充/着色吗？我确实尝试过在ItemContainerStyle中填充/着色，但在获得一致的项目间距时遇到了一些问题，再加上我的团队背景有一定的透明度，如果我尝试应用负的边距，这会造成糟糕的效果。这对我没有帮助，但它可能会帮助其他人，所以我将+1它。谢谢

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