Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Grid Column Behavior: Xamarin XAML vs Micorsoft XAML

DZone's Guide to

Grid Column Behavior: Xamarin XAML vs Micorsoft XAML

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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):

    <Grid Background="Red">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
     
        <Grid Grid.Row="1" Background="Blue">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="300" />
            </Grid.RowDefinitions>
        </Grid>
    </Grid>


At runtime this looks like:


Exactly what we as seasoned XAML developers would expect.

Converted to Xamarin Forms XAML this turns into:

    <Grid BackgroundColor="Red">
      <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      
      <Grid Grid.Row="1" BackgroundColor="Blue">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="300" />
        </Grid.RowDefinitions>
      </Grid>
    </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.

    <Grid BackgroundColor="Red">
      <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      
      <Grid Grid.Row="1" BackgroundColor="Blue">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="300" />
        </Grid.RowDefinitions>
        <Label Text="Hello Xamarin!" />
      </Grid>
    </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:

    <Grid BackgroundColor="Red">
      <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      
      <Grid Grid.Row="1" BackgroundColor="Blue">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="300" />
        </Grid.RowDefinitions>
     
      </Grid>
    </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.

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Published at DZone with permission of Nico Vermeir, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}