UWP GridView Table

Question

I would like to make like a table in HTML. So I get some data from my database.

Each item is a User. The user has a username, firstname, lastname and email. And I want to make a table to list this users.

Each user have to be on a new line. I have already search on internet, but didn't find anything like I want.

If someone can help me, it will be very nice.

Answer 1

Use the following skeleton code and build around it (such as adding relevant GridView attributes such as border thickness/color, width, etc. and of course populating data binding from your database). Likewise, attributes for the Grid in the data template.

The code behind for the xaml below is not shown as it contains no user code but page initialization which is added automatically.

This code is tested and works.

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

The following is the UserData class model and the UserData object collection for binding. It's easy to figure out.

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; }
    }
}