Simplifying Xamarin.Forms Grid Column and Row Definitions

One of the downsides of XAML is that it can become very verbose. A specific area where this happens is when using a Grid and you start defining rows and columns. To overcome this, a change has been merged that will make your live (and XAML!) a whole lot easier. In this post you will learn how.

Simplifying Xamarin.Forms Grid Column and Row Definitions
Video version of this blog post

Grid Column and Row Definitions

Let’s first have a look at the “old” way. Of course, there is no old way, everything will still work as it did before, there is now just another way of doing this. Before you would probably define your grid something like this.

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="25" />
<RowDefinition Height= "14" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
</Grid>
view raw Grid.xaml hosted with ❤ by GitHub

While this works just fine, you can imagine that when your layout starts growing, this will become unreadable.

Simplicity is Awesome

Then came this proposal. In the proposal we see how Morten suggests that the syntax will be simplified to a way where you can just specify all values in a comma-separated way. The column and row definitions are nothing more than a list of values, so it should be pretty easy to parse that.

When implemented, the same grid we saw above could now be reduced to this one line below.

<Grid ColumnDefinitions="1*, 2*, Auto, *, 300" RowDefinitions="1*, Auto, 25, 14, 20"/>
view raw SimplifiedGrid.xaml hosted with ❤ by GitHub

That is amazing, right?! This will save you so much typing and improves readability. That same proposal has gone to the WinUI and WPF repos as well, hopefully they will follow soon.

Under the Hood

How was this implemented you ask? The change was implemented by Stephane, here. If we look at the code, we see that a TypeConverter has been used. Simply put what happens is you adorn a property with an attribute that tells the XAML engine to use a specific TypeConverter. Then in the actual type converter you simply parse that value that is coming in, which will always be a string and convert that into something the property understands. And that will then be assi

To make that more concrete; in this case a string like "1*, 2*, Auto, *, 300" comes in, the logic in the implemented type converter will split the string on the commas and the resulting values are converted into column or row definitions depending on which property we are looking at.

Wrapping Up

I hope you will enjoy this new functionality as much as I will! I know I will be removing loads of XAML from my apps. At the time of writing this has just been merged and is not available in NuGets yet. If you really want to try it, check out the nightly packages of Forms. This is now available as of Xamarin.Forms 4.7-pre1.

Hero image based on: Paper vector created by freepik – www.freepik.com