gridview - UWP GridView 表

Question

我想用 HTML 制作一个表格。所以我从数据库中获取了一些数据。

每个项目都是一个用户。用户有用户名、名字、姓氏和电子邮件。我想制作一个表格来列出这些用户。

每个用户都必须换行。我已经在互联网上搜索过，但没有找到我想要的东西。

如果有人可以帮助我，那就太好了。

Answer 1

使用以下骨架代码并围绕它进行构建(例如添加相关的 GridView 属性，例如边框厚度/颜色、宽度等，当然还有从数据库填充数据绑定(bind))。同样，数据模板中网格的属性。

下面的 xaml 背后的代码未显示，因为它不包含用户代码，但包含自动添加的页面初始化。

此代码经过测试并且可以工作。

<Page x:Class="Sample.GridViewTestPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:data="using:Sample.Data"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Page.Resources>
        <data:UserDataCollection x:Key="userDataCollection"/>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <GridView ItemsSource="{StaticResource userDataCollection}"
                  IsItemClickEnabled="True"
                  IsSwipeEnabled="true"
                  SelectionMode="Single">

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="200"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0" Text="{Binding UserName}"/>
                        <TextBlock Grid.Column="1" Text="{Binding FirstName}"/>
                        <TextBlock Grid.Column="2" Text="{Binding LastName}"/>
                        <TextBlock Grid.Column="3" Text="{Binding Email}"/>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

    </Grid>
</Page>

下面是用于绑定(bind)的UserData类模型和UserData对象集合。很容易弄清楚。

using System.Collections.ObjectModel;

namespace Sample.Data
{
    class UserDataCollection: ObservableCollection<UserData>
    {
        public UserDataCollection()
        {
            // Sample data loaded here. Replace with data from your database

            this.Add(new UserData() {
                UserName = "user1",
                FirstName = "FN1",
                LastName = "LN1",
                Email = "user1@nowhere.local" });

            this.Add(new UserData() {
                UserName = "user2",
                FirstName = "FN2",
                LastName = "LN2",
                Email = "user2@nowhere.local" });

            this.Add(new UserData() {
                UserName = "user3",
                FirstName = "FN3",
                LastName = "LN3",
                Email = "user3@nowhere.local" });
        }
    }

    public class UserData
    {
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
    }
}