Home / News / Simplifying Grids In Xamarin.Forms
Simplifying Grids In Xamarin.Forms

Simplifying Grids In Xamarin.Forms

In Xamarin.Forms, the Grid is a powerful layout container where we can use rows and columns to place controls.

Historically, we would declare our rows and columns using the Grid.RowDefinitions or Grid.ColumnDefinitions properties. To create a row or column, we would define a new RowDefinition or ColumnDefinition element and specify its size:

<Grid VerticalOptions="FillAndExpand">
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="2*"/>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="300"/>
          <RowDefinition Height="1*"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="25"/>
          <RowDefinition Height="14"/>
          <RowDefinition Height="20"/>

Introduced in Xamarin.Forms v4.7, developers can declare grid row and columns using a comma-separated list of values. The simplified format for declaring and makes declaring .

With this new simplified format, our previous example becomes:

<Grid VerticalOptions="FillAndExpand"
        RowDefinitions="1*, Auto, 25, 14, 20"
        ColumnDefinitions="*, 2*, Auto, 300">

Using the new format, we removed a significant amount of XAML and made our row and column definitions terser. Adding a new row or column becomes as simple as adding another comma separated value, making makes our code easier to understand and easier to maintain.

Beautiful stuff! 😍

Migrating To Simplified Rows/Columns

To help you convert your grids to the new format, we introduced the Convert to attribute format refactoring into MFractor Professional.

This refactoring converts your existing row and column definitions into the new simplified format:

Using the convert to attribute format refactoring

As grid row/column shorthand format was introduced in Xamarin.Forms 4.7, the Convert To Attribute Format refactoring will not appear in lower versions of Xamarin.Forms

To learn more about this refactoring, please see our documentation.


Leave a comment