Question

I have a normal GridView, that displays grouped data. My goal is to move the header (a button) from the top of the group to the left of the group.

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

An answer to this question Grouping GridView in Windows 8 Metro App – while not completely the same desired layout – says that the desired layout is not possible without adding an extra “dummy tile”.

I’m wondering if it is possible to achieve my goal – to move the header from the top of the group to the left of the group – without such an extra “dummy tile”.

Answer 1

You need to edit the header container style. In Visual Studio, right-click the GridView and select

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

You will see the Group Header, which is a Content Control, and the Group Items, which are an ItemsControl. Both are contained inside a grid that, in the default, is simple two rows. You can add a column, move the Group Header into Grid.Column=0 & Grid.Row=1 and you should be good to go.