更改 GridView 标题位置答案

【问题标题】：Change GridView header placement更改 GridView 标题位置
【发布时间】：2012-08-24 14:42:56
【问题描述】：

我有一个普通的 GridView，它显示分组数据。我的目标是将标题（一个按钮）从组的顶部移动到组的左侧。

<GridView>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Button Content="{Binding Title}"/>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemWidth="240" ItemHeight="160" Orientation="Vertical" Margin="0,0,80,0"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>

    <GridView.ItemTemplate>
        <!-- item template -->
    </GridView.ItemTemplate>
</GridView>

这个问题的答案Grouping GridView in Windows 8 Metro App - 虽然不完全相同的所需布局 - 表示如果不添加额外的“虚拟瓷砖”，所需的布局是不可能的。

我想知道是否有可能实现我的目标 - 将标题从组的顶部移动到组的左侧 - 没有这样一个额外的“虚拟磁贴”。

【问题讨论】：

标签： c# xaml gridview microsoft-metro windows-runtime

【解决方案1】：

您需要编辑标题容器样式。在 Visual Studio 中，右键单击 GridView 并选择

Edit Group Style -> Edit Generated Item Container (Container Style) -> Edit a Copy

您将看到 Group Header，它是一个 Content Control，以及 Group Items，它是一个 ItemsControl。两者都包含在一个网格中，默认情况下，它是简单的两行。您可以添加一列，将组标题移动到 Grid.Column=0 和 Grid.Row=1 中，您应该一切顺利。

【讨论】：