Nico's digital footprint

I grew up in the nineties, that makes me awesome by default

Grid column behavior–Xamarin XAML vs MS XAML

by Nico

There’s a small detail difference in how rows and columns in a Grid behave in Xamarin Forms vs Microsoft XAML. A small difference but with quite a big impact. Look at the following XAML snippet (Microsoft XAML)

Code Snippet
  1. <Grid Background="Red">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="50" />
  4.         <RowDefinition Height="*" />
  5.     </Grid.RowDefinitions>
  6.  
  7.     <Grid Grid.Row="1" Background="Blue">
  8.         <Grid.RowDefinitions>
  9.             <RowDefinition Height="Auto" />
  10.             <RowDefinition Height="300" />
  11.         </Grid.RowDefinitions>
  12.     </Grid>
  13. </Grid>

At runtime this looks like:

Exactly what we as seasoned XAML developers would expect.

Converted to Xamarin Forms XAML this turns into:

Code Snippet
  1. <Grid BackgroundColor="Red">
  2.   <Grid.RowDefinitions>
  3.     <RowDefinition Height="50" />
  4.     <RowDefinition Height="*" />
  5.   </Grid.RowDefinitions>
  6.   
  7.   <Grid Grid.Row="1" BackgroundColor="Blue">
  8.     <Grid.RowDefinitions>
  9.       <RowDefinition Height="Auto" />
  10.       <RowDefinition Height="300" />
  11.     </Grid.RowDefinitions>
  12.   </Grid>
  13. </Grid>

Only difference is the property name to set the background color. However, if we look at this at runtime we see a completely different story.

It looks like the inner Grid isn’t rendered at all. But let’s try to add a Label to the inner Grid.

Code Snippet
  1. <Grid BackgroundColor="Red">
  2.   <Grid.RowDefinitions>
  3.     <RowDefinition Height="50" />
  4.     <RowDefinition Height="*" />
  5.   </Grid.RowDefinitions>
  6.   
  7.   <Grid Grid.Row="1" BackgroundColor="Blue">
  8.     <Grid.RowDefinitions>
  9.       <RowDefinition Height="Auto" />
  10.       <RowDefinition Height="300" />
  11.     </Grid.RowDefinitions>
  12.     <Label Text="Hello Xamarin!" />
  13.   </Grid>
  14. </Grid>

So what exactly is going on here? The inner Grid (the blue one) doesn’t specify any columns, that means that by default there’s only one column available. In Microsoft XAML the width of that default column is set to “*” so it takes up all available space. In Xamarin Forms that width is set to “Auto” so it only takes up the space it needs. A subtle difference with a big impact.

To fix this, add a column with “*” as width

Code Snippet
  1. <Grid BackgroundColor="Red">
  2.   <Grid.RowDefinitions>
  3.     <RowDefinition Height="50" />
  4.     <RowDefinition Height="*" />
  5.   </Grid.RowDefinitions>
  6.   <Grid.ColumnDefinitions>
  7.     <ColumnDefinition Width="*" />
  8.   </Grid.ColumnDefinitions>
  9.   
  10.   <Grid Grid.Row="1" BackgroundColor="Blue">
  11.     <Grid.RowDefinitions>
  12.       <RowDefinition Height="Auto" />
  13.       <RowDefinition Height="300" />
  14.     </Grid.RowDefinitions>
  15.  
  16.   </Grid>
  17. </Grid>

result:

Conclusion

In this post I’ve shown a difference in implementation between Xamarin Forms XAML and Microsoft XAML and how to fix it.

Note that this sample is based on Xamarin Forms 1.2. Xamarin has stated that they will change the implementation in Forms 1.3 to reflect the Microsoft implementation.


Tags:

XAML | WinRT | WP8 | WPF | Xamarin

blog comments powered by Disqus
  Log in

About the author

Hi,

My name is Nico, I’m an MVP Windows Platform Development living in Belgium.
I’m currently employed as a .NET consultant at RealDolmen, one of Belgium’s leading IT single source providers.

I'm also founding member and board member of the Belgian Metro App Developer Network, a user group focussed on Windows 8 and Windows Phone development. If you're in Belgium feel free to drop by if we're doing an event. http://www.madn.be

Since June 2012 I'm a proud member of Microsoft's Extended Experts Team Belgium. And in February 2013 I became a member of DZone's Most Valuable Bloggers family.

In 2013 I became a book author and wrote "Windows 8 app projects, XAML & C# edition".

In 2014 I received the MVP award for the very first time.

I hope to get feedback from my readers either through comments, mail (nico_vermeir@hotmail.com), twitter, facebook, …

 

mvp

 

mvp

 

 

MeetLogo

 

MVBLogo

mybook

 

Month List