UWP GridView表

Question

我想像HTML中的表格一样.所以我从我的数据库中获取了一些数据.

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

每个用户都必须在新的一行.我已经在互联网上搜索,但没有找到我想要的东西.

如果有人可以帮助我,那将是非常好的.

Answer 1

使用以下框架代码并围绕它构建(例如添加相关的GridView属性,例如边框粗细/颜色,宽度等,当然还要填充数据库中的数据绑定).同样,数据模板中Grid的属性.

下面的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 = "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; }
    }
}