如何在gridview中添加列标题-UWP

Question

I want to display dynamic datas in a table format. It should have column header for each column. How to add Gridview column header to this? And also need to put line for column row seperator. Seems Gridview controls are more flexible in asp.net website forms.

    <StackPanel>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="Header"/>
        <TextBlock Grid.Column="1" Text="Header"/>
        <TextBlock Grid.Column="2" Text="Header"/>
        <TextBlock Grid.Column="3" Text="Header"/>
    </Grid>
    <ScrollViewer>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
          <TextBlock Grid.Column="0" Text="{Binding Name}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>
                    <TextBlock Grid.Column="1" Text="{Binding ID}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>
                    <TextBlock Grid.Column="2" Text="{Binding RollNo}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>
                    <TextBlock Grid.Column="3" Text="{Binding Division}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>

        </Grid>
    </ScrollViewer>
</StackPanel>

Answer 1

I would approach it as this:

1) Create vertical StackPanel.

2) Create a gridlayout for the headers

3) Create a scrollview

4) Create a gridlayout for the data (nested in the scrollview)

In suppo xml:

 <StackPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Text="Header"/>
            <TextBlock Grid.Column="1" Text="Header"/>
            <TextBlock Grid.Column="2" Text="Header"/>
            <TextBlock Grid.Column="3" Text="Header"/>
        </Grid>
        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Data"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="Data"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Text="Data"/>
                <TextBlock Grid.Row="0" Grid.Column="3" Text="Data"/>

                <TextBlock Grid.Row="1" Grid.Column="0" Text="Data"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="Data"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Text="Data"/>
                <TextBlock Grid.Row="1" Grid.Column="3" Text="Data"/>

                <TextBlock Grid.Row="2" Grid.Column="0" Text="Data"/>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="Data"/>
                <TextBlock Grid.Row="2" Grid.Column="2" Text="Data"/>
                <TextBlock Grid.Row="2" Grid.Column="3" Text="Data"/>                 
            </Grid>
        </ScrollViewer>
    </StackPanel>

Updated code

  <StackPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Text="Header"/>
            <TextBlock Grid.Column="1" Text="Header"/>
            <TextBlock Grid.Column="2" Text="Header"/>
            <TextBlock Grid.Column="3" Text="Header"/>
        </Grid>
        <ScrollViewer>
            <GridView ItemsSource="{Binding}" >
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType = "local:student" >  <!--local:student is your class model to bind -->
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="200"/>
                                <ColumnDefinition Width="200"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock Grid.Column="0" Text="{Binding ID }" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>
                            <TextBlock Grid.Column="1" Text="{Binding Name}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>
                            <TextBlock Grid.Column="2" Text="{Binding RollNumber}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>
                            <TextBlock Grid.Column="3" Text="{Binding Division}" Foreground="Blue" FontSize="20" FontWeight="ExtraBold"/>

                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </ScrollViewer>
    </StackPanel>