UWP 网格视图 Table

Question

我想在 HTML 中制作一个 table。所以我从我的数据库中获取了一些数据。

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

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

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

Answer 1

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

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

下面是UserDataclass模型和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; }
    }
}

Answer 2

您好，您可以使用 StackPanel 添加列名称，如下所示，为每个 TextBlock 提供与 Column Width 相同的宽度，并选择 TextAlignment 作为中心

      <StackPanel Orientation="Horizontal">
            <TextBlock
                Width="200"
                Text="UserName"
                TextAlignment="Center"
                />

            <TextBlock
                Width="200"
                Text="IMEI"
                TextAlignment="Center"
                />
            <TextBlock
                Width="200"
                Text="FirstName"
                TextAlignment="Center"
                />
            <TextBlock
                Width="200"
                Text="LastName"
                TextAlignment="Center"
                />
            <TextBlock
                Width="200"
                Text="Email"
                TextAlignment="Center"
                />

        </StackPanel>

UWP 网格视图 Table

UWP GridView Table

gridview

html-table

win-universal-app