How to display static table/grid in UWP without using itemsource? - xaml

Question

For my project, I want to display a grid/table with 3 rows having 4 columns on each row in UWP applicatoin. All the columns will have a textbox control. I don't want to display any data on the grid rather I want to take the input from user. I've tried grid/gridview control. I'm not really sure how I can specify the xaml for displaying 3 rows and 4 columns with textbox control? Something like this picture.
Any suggestion is highly appreciated.

Answer 1

XAML
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="MyTableGrid" BorderBrush="Black" BorderThickness="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
<TextBlock Text="Column 1" FontSize="25" TextAlignment="Center"/>
</Border>
<Border Grid.Column="1" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
<TextBlock Text="Column 2" FontSize="25" TextAlignment="Center"/>
</Border>
<Border Grid.Column="2" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
<TextBlock Text="Column 3" FontSize="25" TextAlignment="Center"/>
</Border>
<Border Grid.Column="3" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
<TextBlock Text="Column 4" FontSize="25" TextAlignment="Center"/>
</Border>
<Border Grid.Column="0" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="1" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="2" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="3" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="0" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="1" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="3" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="0" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="1" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="2" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
<Border Grid.Column="3" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
<TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
</Border>
</Grid>
</Grid>
Output
I made rough sample of your screen shot you can edit height and width of row and column in row and column definition, currently i haven't set any height and width & it is for general idea so you need to customize it in your own way
Suggestion
add new user control page and and use it as table and then reference it in your main-page so whenever you want you want you can customize it separately and data binding and saving user input more clearly