Table in UWP App

2
votes

I have some UWP apps in Microsoft/Windows Store, and I want develop a new UWP app. It is a simple and static application, and I want to put a table (with always equal data - static), but I have already been searching and found nothing of how to make a table in a UWP app (XAML and C #).

Is it possible to create a table in a UWP app?

3
c#xamluwpuwp-xaml
A table is a grid of cells. - IInspectable
Use a GridView :) - Ibrahim Malluf
You could use a third party control like Telerik's controls for UWP - Telerik Grid - jsmyth886
You have two option first is use grid and borders stackoverflow.com/questions/47406382/… or second use telerik grid - Shubham Sahu

3 Answers

2
votes

As said in the comments, you can use Telerik Grid. However, if you want to build the table yourself the Grid control will suffice.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
</Grid>

The above will create a grid with 3 rows and 3 columns. If you want to autosize the columns:

<ColumnDefinition Width="*"/>
<RowDefinition Width="Auto"/>

This will create, respectively, a column that sizes itself based on the amount of available space and a row that sizes itself to its content.

To make your grid look like a table (ie. borders between each cell), use the border control:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        ...
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        ...
    </Grid.ColumnDefinitions>

    <Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="2">
        //Content here
    </Border>
</Grid>

You can place the Border control in each 'cell' by adjusting the Grid.Row and Grid.Column properties.

1
votes

The most recent version of Windows Community Toolkit features the DataGrid https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid. I haven't used it myself so I don't know how easy or hard data binding it is but it looks very capable.

0
votes

The Grid nad ListView are OK, but the DataGrid control will be the best choice.
Under the link you will find the MS documentation for it:
Windows Community Toolkit DataGrid XAML control documentation
It's best to use a native solution and not reinvent the wheel from scratch.

Example bellow:

<controls:DataGrid x:Name="dataGrid1" 
Height="600" Margin="12"
AutoGenerateColumns="False"
ItemsSource="{x:Bind MyViewModel.Customers}">
<controls:DataGrid.Columns>
    <!-- Name Column -->
    <controls:DataGridTemplateColumn Header="Name">
        <controls:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <TextBlock Padding="5,0,5,0"
                        Text="{x:Bind FirstName}"/>
                    <TextBlock Text="{x:Bind LastName}"/>
                </StackPanel>
            </DataTemplate>
        </controls:DataGridTemplateColumn.CellTemplate> 
        <controls:DataGridTemplateColumn.CellEditingTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBox Text="{x:Bind FirstName}" BorderThickness="0"/>
                    <TextBox Text="{x:Bind LastName}" BorderThickness="0"/>
                </StackPanel>
            </DataTemplate>
        </controls:DataGridTemplateColumn.CellEditingTemplate> 
    </controls:DataGridTemplateColumn>              
    <!-- other columns below -->
</controls:DataGrid>