UWP GridView表

Anthony Nfr 发表于 Dev

安东尼·恩弗

我想制作一张HTML表格。因此，我从数据库中获取了一些数据。

每个项目都是一个User。用户具有用户名，名字，姓氏和电子邮件。我想创建一张表来列出该用户。

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

如果有人可以帮助我，那将非常好。

用户名

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

下面的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>

以下是用于绑定的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 = "[email protected]" });

            this.Add(new UserData() {
                UserName = "user2",
                FirstName = "FN2",
                LastName = "LN2",
                Email = "[email protected]" });

            this.Add(new UserData() {
                UserName = "user3",
                FirstName = "FN3",
                LastName = "LN3",
                Email = "[email protected]" });
        }
    }

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