Creating grid layouts

Linear layouts address most scenarios, but what if you need to create something more complex? For example, what if we want to create a simple editing form with labels and editors, where the first column is resized based on the longest label in all rows?

We can use Grid, which is an extremely powerful panel with a simple concept, but as with any other control, it may pose unexpected challenges for those who don’t fully understand its specifics.

Let’s look at some common grid-related layouts/techniques and potential pitfalls you may encounter.

Getting ready

To follow the steps described in this recipe, we just need to create a blank .NET MAUI application. The default template includes sample code in the MainPage.xaml and MainPage.xaml.cs files, but you can remove it and leave only a blank ContentPage in XAML and a constructor with the InitializeComponent method in CS.

The code for this recipe is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter01/c1-GridLayouts.

How to do it…

In this recipe, we will create two simple layouts using the Grid panel, allowing us to use most of Grid’s capabilities, which we will discuss in later sections on this topic:

Figure 1.3 – Grid row spanning and alignment

I used a non-transparent background for child elements in the Grid to demonstrate the space occupied by the elements in grid cells.

1. Create a two-column layout where the first column is increased based on the largest element. To automatically adjust the size of the first column based on its content, set the first column’s width to Auto using the ColumnDefinitions property:

   MainPage.xaml

   <Grid RowDefinitions="40,80"
         ColumnDefinitions="Auto, *">
       <Label Text="Title"/>
       <Label Text="Description"
              Grid.Row="1"/>
       <Editor Grid.Column="1"/>
       <Editor Grid.Row="1"
               Grid.Column="1"/>
   </Grid>

   If you run the project, you should see the result shown on the left-hand side of Figure 1.3.

2. Now, let’s create a layout with two columns and stretch a label in the second column across two rows. To do this, define two columns and two rows, and set Grid.RowSpan to span multiple lines with the label:

   <Grid RowDefinitions="40,40"
         ColumnDefinitions="*, 60">
       <Label Text="Headline"/>
       <Label Text="Supporting text"
              TextColor="DarkGray"
              Grid.Row="1" />
       <Label Text="100+"
              VerticalOptions="Center"
              HorizontalOptions="End"
              Grid.RowSpan="2"
              Grid.Column="1" />
   </Grid>

Run the project to see the result.

How it works…

As you may know, the Grid panel uses the RowDefinitions and ColumnDefinitions properties to specify rows and columns, respectively. Both properties accept a collection of RowDefinitions and ColumnDefinitions classes that can be automatically converted to XAML from the following values:

• Double: A constant value
• Auto: The space required to display a child element without trimming
• * (star): All the remaining space after other rows or columns

Sometimes, developers are confused by * and Auto because both values calculate the width/height automatically, but there is a key difference between them:

When a row definition is set to Auto, Grid provides elements in the row with as much space as they need. In this mode, content in a row is measured similarly to elements in VerticalStackLayout. For example, if you add three rows with the Auto value, you will get the same output as with VerticalStackLayout. For example, the following two layouts will have the same output:

<Grid RowDefinitions="Auto,Auto,Auto">
    <Button Text="Button1"/>
    <Button Text="Button2" Grid.Row="1"/>
    <Button Text="Button3" Grid.Row="2"/>
</Grid>
<VerticalStackLayout>
    <Button Text="Button1"/>
    <Button Text="Button2"/>
    <Button Text="Button3"/>
</VerticalStackLayout>

Of course, if you have only Auto rows, it’s better to choose VerticalStackLayout for performance and code simplicity reasons.

Key point

Multiple Auto rows in Grid work the same way as VerticalStackLayout. Multiple Auto columns work like HorizontalStackLayout.

• Rows whose definition is set to * proportionally divide all the space left after other rows. If you need to change the proportion between * rows, you can use numeric multipliers. For example, in the following code snippet, we add three rows – the first row will have a height of X, the second will have a height of 2X, and the third will have a height of 3X:

  <Grid RowDefinitions="*,2*,3*">
      <Button Text="Button1"/>
      <Button Text="Button2" Grid.Row="1"/>
      <Button Text="Button3" Grid.Row="2"/>
  </Grid>

There’s more…

Choosing the right row/column type may be challenging, due to performance and device scaling issues. Let me demonstrate to you a few common issues in grid-based layouts:

• Cropped elements because of fixed sizes: In cross-platform applications, screen dimensions, resolution, DPI, and font scale may vary, depending on the device and user settings. This may pose a challenge because elements that appear correctly on a developer machine may get cropped on a user device. For example, let’s define grid columns and rows in the following manner:

  <Grid ColumnDefinitions="80,*" RowDefinitions="30">
      <Label Text="First Name"
          BackgroundColor="LightGreen"/>
      <Editor Grid.Column="1"/>
  </Grid>

  With that, you may get the following output:

Figure 1.4 – The issue with a fixed size and different device font settings

To fix this, you can use Auto for the first column. However, before using it, pay attention to the next point in this list.

• Performance issues because of too many Auto rows/columns: Auto rows/columns may lead to performance issues, as a grid may require multiple layout calculation cycles when several child elements are arranged based on their preferred size. Of course, you are unlikely to notice significant delays even on mobile devices if your root or a few nested grids contain Auto rows, but if you have a collection whose ItemTemplate includes many Auto values, you may consider other techniques:
  • Use fixed double values, applied based on the device type/settings:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition
                Height="{OnIdiom Desktop=200, Phone=*}"/>
        </Grid.RowDefinitions>
    </Grid>

  We will delve into the details of this technique in the next recipe (Implementing device-specific layouts).

  • Create your own panel with custom measure/arrange logic. This technique will be covered in the Implementing a custom arranging algorithm recipe of this chapter. Typically, you will need this technique only when you have a complex layout and many elements on the screen.
• Lists added to Auto rows: In the How it works… section, we learned that to measure child elements, a grid’s Auto rows use a basic rule similar to the one used in Vertical/HorizontalStackLayout – it provides the children as much space as they want. Lists, such as CollectionView, usually request the space required to display all their items. As a result, you may face the same issue with the collection infinite height as described in the Creating horizontal/Vertical layouts recipe:

  <Grid RowDefinitions="Auto, 50">
      <CollectionView>
          <CollectionView.ItemsSource>
              <x:Array Type="{x:Type x:String}">
                  <x:String>Item1</x:String>
                  <x:String>Item2</x:String>
                  <x:String>Item3</x:String>
                  <!--more items here-->
                  <x:String>Item100</x:String>
              </x:Array>
          </CollectionView.ItemsSource>
      </CollectionView>
      <Button Grid.Row="1" Text="Some Button"/>
  </Grid>

  Refer to the right-hand side of Figure 1.2 to see the layout produced by this code snippet.

  The fix depends on your layout requirements, but typically, you would need to replace Auto with a * value:

  <Grid RowDefinitions="*, 50">
      <!--...-->
  </Grid>

  Alternatively, you would replace Auto with a fixed size:

  <Grid RowDefinitions="300, 50">
      <!--...-->
  </Grid>

  The second option is applicable when you need to create a collection with a fixed size instead of stretching it.