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

【问题标题】：How to add Column Header in gridview - UWP如何在gridview中添加列标题 - UWP
【发布时间】：2018-04-08 14:46:36
【问题描述】：

我想以表格格式显示动态数据。它应该有每列的列标题。如何为此添加 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>

【问题讨论】：

标签： c# gridview uwp uwp-xaml

【解决方案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>

【讨论】：

有示例链接可以参考吗？
更新了我的答案。
动态绑定数据时，这种布局很混乱。
请在您的问题中添加更新后的代码以进行检查。