CODEWITHSUNDEEP
c#xamllayoutuwpuwp-xaml
Paul Alexander
Paul Alexander

Reputation: 2748

UWP - add a header row to to my gridview

I'm very new to Universal Windows Platform apps and I'm trying to get my head around designing a form/page in XAML.
I've managed to create a GridView which is bound to a class containing data which is all working great but I can't work out how to add headers to my columns.

Do I need to add a row at the top before I add my rows of bound data?

Any help would be great.

XAML code: 

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <GridView ItemsSource="{x:Bind data}" IsItemClickEnabled="True">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="local:DataStructure">

                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBlock FontSize="18" Text="{x:Bind ItemNumber}" HorizontalAlignment="Right" Margin="0,0,20,0" ></TextBlock>
                            <TextBlock FontSize="18" Text="{x:Bind ItemDetails}" HorizontalAlignment="Right"></TextBlock>
                            <CheckBox IsChecked="{x:Bind YesNo}"></CheckBox>
                            <CheckBox IsChecked="{x:Bind NotApplicable}"></CheckBox>
                        </StackPanel>

            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    <TextBlock Grid.Row="1" Name="ResultTextBlock" FontSize="24" Foreground="Red" FontWeight="Bold" />
</Grid>

Upvotes: 2

Views: 2243

Answers (1)

user2297037
user2297037

Reputation: 1217

Have you tried to add a Grid inside the Header property?

<GridView>
        <GridView.Header>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Header 1" Grid.Column="0"/>
                <TextBlock Text="Header 2" Grid.Column="1"/>
            </Grid>
        </GridView.Header>
        <GridView.Items>
            <GridViewItem>
                <TextBlock Text="Item 1"/>
            </GridViewItem>
            <GridViewItem>
                <TextBlock Text="Item 2"/>
            </GridViewItem>
        </GridView.Items>
    </GridView>

Of course you need to work a bit to align column headers with items, but this could be an approach. Look at the documentation for other useful properties like HeaderTemplate.

Upvotes: 4

Related Questions