UWP – HOW TO CREATE A RESPONSIVE LAYOUT

One of the best practice to create a responsive layout is to use Grid controls. What we have to do is divide the screen in different rows and columns that have a relative height and width. We can divide the screen in two columns that have the same width. In this way they will be equals on every type of resolution and pixel.
For simplicity we will create a simple grid that has two rows and two columns as the following image

When a new page is created all the content is inside a Grid control. To create different columns and rows we have to use the following lines of code

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”0.3*”></RowDefinition>
<RowDefinition Height=”0.7*”></RowDefinition>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”></ColumnDefinition>
<ColumnDefinition Width=”*”></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>

In this way we will create two columns that have the same width and two rows with height different. We use the definition Height=”0.3*” to represent that this row is one third of the screen. It is a general proportion that doesn’t depends by a specific screen and resolution.
The columns and rows are sorted in ascending order start from 0.

We can color the sections with different color using the component background. We will color them with Microsoft colors.

<Border Grid.Row=”0″ Grid.Column=”0″ Background=”#F65314″/>
<Border Grid.Row=”0″ Grid.Column=”1″ Background=”#FFBB00″/>
<Border Grid.Row=”1″ Grid.Column=”0″ Background=”#7CBB00″/>
<Border Grid.Row=”1″ Grid.Column=”1″ Background=”#00A1F1″/>

To know more about Grid visit Microsoft doc at https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.grid

The final .xaml script

<Page
x:Class=”UWP_tutorials.ResponsiveLayout.ResponsiveLayout”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:UWP_tutorials.ResponsiveLayout”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d”
Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

<Grid>
<Grid.RowDefinitions >
<RowDefinition Height=”0.3*”></RowDefinition>
<RowDefinition Height=”0.7*”></RowDefinition>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”></ColumnDefinition>
<ColumnDefinition Width=”*”></ColumnDefinition>
</Grid.ColumnDefinitions>

<Border Grid.Row=”0″ Grid.Column=”0″ Background=”#F65314″/>
<Border Grid.Row=”0″ Grid.Column=”1″ Background=”#FFBB00″/>
<Border Grid.Row=”1″ Grid.Column=”0″ Background=”#7CBB00″/>
<Border Grid.Row=”1″ Grid.Column=”1″ Background=”#00A1F1″/>
</Grid>
</Page>

If we run the application we can see that the proportions are always the same with different resolution and at the same time with different values of height and width.

 

YOU CAN DOWNLOAD THE EXAMPLE FROM HERE

The example is integrated in a solution that contains all the UWP tutorials. It is available from here


A simple tutorial about how to create a responsive layout.
For any problem and info contact me! I will reply as soon as possible.
cuomomario@hotmail.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *