Gridview Header Placement

2
votes

With a grouped datasource, the HeaderTemplate is located under the GroupStyle.ContainerStyle, with the container consisting of two rows, one for the header and the other for the items.

This doesn't seem to be the case with the GridView.HeaderTemplate. The header shows on the left side of the items like this:

Header Text [Item 1]

Is there a way to move the header text above the items list instead? I would assume one has to change the GridView Template itself, which doesn't seem to be accessible.

Here's the XAML for the GridView. It's very straight-forward:

<GridView x:Name="gridItems" ItemContainerStyle="{StaticResource GridViewListContainerStyle}" ItemsSource="{Binding Items}" SelectionMode="None" AllowDrop="True" CanDragItems="True" VerticalAlignment="Top" HorizontalAlignment="Center"  CanReorderItems="True" Padding="1">
        <GridView.HeaderTemplate>
            <DataTemplate>
                <Grid>
                   <TextBox Text="{Binding Title}" Width="290" MaxLength="20"/>                                                            
                </Grid>
            </DataTemplate>
        </GridView.HeaderTemplate>
        <GridView.ItemTemplate>
            <DataTemplate>
                <local:MyControl DataContext="{Binding}"/>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

Thanks.

3
gridviewwindows-runtimewinrt-xaml
Could you post the xaml of your gridview please. - Ross Dargan
Thanks for updating it - could you also show what your item container style looks like. Something is wrong as it shouldn't be doing what you are describing! - Ross Dargan
Actually, that style is just the default. I just created a copy of the default template without modifying it. @Ross Dargan According to MSDN, this is the default behavior: "By default, the header is shown at the top for a ListView, and on the left for a GridView". - Ali B

3 Answers

0
votes

Actually, I figured it out. It's much simpler than I thought: All one needs is to create a user control and add the header in a different control in the Grid.

0
votes

The way I handled this situation was to Encapsulate the GridView in a StackPanel with Vertical orientation and a Grid added on top of it that has a TextBlock with text property set as the Header text. Sample XAML is shown below:

<StackPanel Orientation="Vertical">
    <Grid>
        <TextBlock Text="My Header Text"/>
    </Grid>
    <GridView x:Name="GridViewName"
        Grid.Row="1" 
            Height="500" 
            SelectionMode="None" 
            IsItemClickEnabled="True" 
            ItemClick="GVItem_Click" 
            ItemTemplate="{StaticResource ItemTemplate}">
    </GridView>
</StackPanel>

Hope this helps and saves someone the time I wasted banging my head :)

0
votes

Rather than modify styles (which is pretty inconvenient at the moment since there is no way to modify just part of the style and apply default theme styling to the rest of the control), I had also done this previously using a StackPanel. I later tried this approach which also works, I'm not sure how much better it is, but it does allow you to keep the header inside the gridview control.

Note the margins of the HeaderTemplate and the ItemPanelTemplate:

<GridView.HeaderTemplate>
    <DataTemplate>
        <TextBlock
            Text="Header"
            VerticalAlignment="Top"
            Margin="10,10,-200,0"
            />
    </DataTemplate>
    </GridView.HeaderTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Margin="0,50,0,0"/>
                    </ItemsPanelTemplate>
         </GridView.ItemsPanel>
      ....
    </GridView>

You can adjust the margins of the HeaderTemplate and ItemsPanelTemplate so it suits your needs. You can also change the VariableSizedWrapGrid to the container you want..