.NET MAUI Grid Layout: A Powerful Way to Arrange Your UI Elements

If you are developing cross-platform applications with .NET Multi-platform App UI (.NET MAUI), you might be wondering how to create a flexible and responsive layout for your user interface. One of the most versatile and useful layout classes that .NET MAUI provides is the Grid, which allows you to organize your UI elements into rows and columns, with proportional or absolute sizes.

In this blog post, I will show you how to use the .NET MAUI Grid to create a simple calculator app, with buttons arranged in a grid layout. I will also explain some of the key features and properties of the Grid class, and how to use them to customize your layout.

What is a Grid?

The Grid is a layout class that inherits from the Layout class. It can contain multiple child views, which are positioned and sized according to the grid’s rows and columns. Please refer to the official .NET MAUI documentation here for further information about their properties, and more.

How to use the Grid?

To use the Grid, you need to declare it in your XAML file, and then add child views to it. You can also define the rows and columns of the grid by using the RowDefinitions and ColumnDefinitions properties, which accept a comma-separated list of values. Each value can be one of the following:

• A number, which represents an absolute size in device-independent units (dip).
• A star (*), which represents a proportional size based on the available space.
• Auto, which represents a size that is determined by the size of the child view.

For example, the following XAML code defines a grid with four rows and four columns, each with a proportional size of 1*:

<Grid RowDefinitions="1*,1*,1*,1*" ColumnDefinitions="1*,1*,1*,1*">
  <!-- Child views go here -->
</Grid>

To position and size a child view within the grid, you need to use the attached properties Row, Column, RowSpan, and ColumnSpan. For example, the following XAML code adds a button to the grid, and sets its row and column to 0:

<Grid RowDefinitions="1*,1*,1*,1*" ColumnDefinitions="1*,1*,1*,1*">
  <Button Text="Follow Me" Grid.Row="0" Grid.Column="0" />
</Grid>

You can also span a child view across multiple rows or columns by using the RowSpan and ColumnSpan properties. For example, the following XAML code adds a label to the grid, and sets it to span across the first row and all four columns:

<Grid RowDefinitions="1*,1*,1*,1*" ColumnDefinitions="1*,1*,1*,1*">
  <Label Text="0" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" />
</Grid>

Note: These properties are backed by BindableProperty objects.

A simple calculator app

To demonstrate how to use the Grid in a real-world scenario, let’s create a simple calculator app with buttons arranged in a grid layout. The app will look like this:

To create this app, we need to define a grid with five rows and four columns. The first row will contain a label that displays the result of the calculation, and the remaining rows will contain buttons for the digits and the operators. We will also use some styling to make the buttons look nicer. Here is the complete XAML code for the app:

Conclusion

The Grid is a powerful layout class that enables you to create flexible and responsive UI layouts for your .NET MAUI apps. By using the Grid, you can easily arrange your UI elements into rows and columns, with proportional or absolute sizes. You can also customize the alignment, spacing, and spanning of your child views within the grid. The Grid is especially useful for creating complex layouts that need to adapt to different screen sizes and orientations.

I hope you enjoyed this blog post. If you have any questions or feedback, please leave a comment below. Thank you for reading! 😊