Как добавить заголовок столбца в gridview - UWP

Question

Я хочу отображать динамические данные в табличном формате. Он должен иметь заголовок столбца для каждого столбца. Как добавить к этому заголовок столбца Gridview? А также нужно поставить строку для столбца строки разделителя. Кажется, элементы управления Gridview более гибкие в формах веб-сайта asp.net.

    <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

Я хотел бы подойти к этому так:

1) Создать вертикальную StackPanel.

2) Создать сетку для заголовков

3) Создать прокрутку

4) Создайте сетку для данных (вложенных в скроллвью)

В поддержку 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>

Обновленный код

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