How To Use Grid Layout In Xamarin.Forms Application For Android And UWP

Grid Layout supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables, and is not intended to present tabular data. Grid does not have the concept of row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out the content.

Before reading this article, please go through the following article.

• How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

Reading this article, you will learn how to use Grid Layout in Xamarin Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross-platform application development.

The following important tools are required for developing UWP app.

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)
3. Using Visual Studio 2015 Installer, enable the Xamarin (Cross-Platform Mobile development) and C#/.NET while installing/modifyig Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

 

Open Visual Studio 2015. Go to Start -> New Project -> select Cross-Platform (under Visual C# -> Blank App (Xamarin.Forms Portable) -> Give a suitable name for your app (XamFormGrid) -> OK.

 

 

Step 2

 

Now, creating project “XamFormGrid_Droid” …

 

Step 3

Choose the target and minimum platform versions for your Universal Windows Project.

Create project “XamFormGrid_UWP” ….

 

 

 

Step 4

 

After that, Visual Studio creates 6 projects and displays GettingStarted.Xamarin Page.

 

Now, we have to update the Xamarin.Forms reference for Portable Project and XamFormGrid_Droid project. (Please refer to How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform).

Step 5

Add an XAML page for Grid Layout demo. For this, right click XamFormGrid(Portable) project, select ADD -> NewItem, and

select CrossPlatform-> FormXamlPage-> Give a relevant name.

Step 6

 

Add the Grid Layout tag in the project and inside the Grid Layout, add 7 Labels.

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

        <RowDefinition Height="100" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="Auto" />

        <ColumnDefinition Width="*" />

        <ColumnDefinition Width="100" />

    </Grid.ColumnDefinitions>

    <Label Text="One" Grid.Row="0" Grid.Column="0" TextColor="Green" BackgroundColor="Black" />

    <Label Text="Xamarin Forms Grid Demo" TextColor="Yellow" BackgroundColor="Black" Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

    <Label Text="Xamarin Forms" TextColor="Blue" BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

    <Label Text="C Sharp Corner" FontSize="Large" Grid.Row="1" Grid.Column="1" TextColor="Yellow" BackgroundColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

    <Label Text="Xamarin Forms" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" TextColor="Blue" BackgroundColor="Yellow" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

    <Label Text="Cross Platform Development" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Blue" BackgroundColor="Yellow" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

    <Label Text="UWP Android Apple" Grid.Row="2" Grid.Column="2" TextColor="Red" BackgroundColor="Aqua" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

</Grid>

 

 

Step 7

 

We will test Android and UWP. So, we can set the multiple startup projects, such as- XamFormGrid.Droid and XamFormGrid.UWP (Universal Windows).

 

 

 

Step 8

 

Open (double click) the file App.cs in the Solution Explorer-> XamFormGrid (portable) and set the Root Page.

 

 

 

Step 9

 

Change the Configuration Manager settings. For this, go to Build -> Configuration Manager.

Uncheck all the "Build" and "Deploy" options for iOS, Windows, WinPhone. On the other hand, check the Droid and UWP.

 

Step 10

 

Deploy your app on a local machine. The output of the XamFormGrid app is given below.

 

 

Summary

 

Now, you have successfully created and tested your Grid Layout in Xamarin.Forms application, using Visual C# and Xamarin.