Working with GridLayout in Xamarin Forms

When we are developing an application, is very important to know what Layout is better for our needs. For example, imagine we are writing a calculator app, we can use a StackLayout or a GridLayout. But… Really, what would happen if we create a calculator based on a set of StackLayouts? Because of the amount of nested views we need for our app to resemble a calculator, the performance of our app will be affected, (In this case, the performance reduction might be subtle, but on bigger applications, the decrease would be notable). So, whenever you need to create a design that contains a set of columns and rows, It may be the best choice to use the GridLayout. In this article, I will explain how to make use of it. Let’s see!!!

Explaining the GridLayout structure

Let’s start reviewing the GridLayout’s Structure, then we’ll break down step by step the components of this example:

Rows

To create a Row, you just have to add as many <RowDefinition /> tags you need and add the required height property, inside the <Grid.RowDefinitions>  tag, like this:

Columns

To create a Column, you just have to add as many <ColumnDefinition />. tags you need and add the required width property, inside the <Grid.ColumnDefinitions>  tag, like this

⚠ Both Rows and Columns must be inside the <Grid> tags.

Adding height and width to our Rows and Columns

We have three options to do it:

Let’s see the definitions

⚪ Auto This type resizes the row or column depending on the size of the children on its content. In the XAML is named “Auto” and in C# code is specified as GridUnitType.Auto.

⚪ Proportional (*) This type sizes columns and rows as a proportion of the remaining space. In the C# code is specified as GridUnitType.Star. (Default Value)

⚪ Absolute  This type specifies the size of the rows and columns with a static number.  In the C# code is specified as GridUnitType.Absolute.

But… How can I start to place the GridLayout rows and columns? ?

Once, you finished your Grid structure, you just have to add the UI controls that you need. To specify your structure you just have to add: Grid.Row or Grid.Column.

Spacing

The Grid, has two properties, to handle the spacing between rows and columns. You can use the following:

⚪ ColumnSpacing: Is the amount of space between columns. This property has as Default value “6”.

⚪ RowSpacing: Is the amount of space between rows. This property has as Default value “6”.

You just have to add these properties to the principal Grid tag, as I showed below:

Span

The Span is used when you what occupy more that one row or column. We just have to add the value that we want to occupy, with the following properties: Grid.RowSpan or Grid.ColumnSpan.

Spanish post:https://medium.com/@reyes.leomaris/trabajando-con-gridlayout-in-xamarin-forms-db3506001eaa 

.

References:  https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid?WT.mc_id=DT-MVP-5003353