UWP GridView Table

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

Answer 2

Привет можно добавить имена столбцов, используя StackPanel следующим образом и давая каждому TextBlock же ширину, как и ширина столбца и выбрать 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>