Simplifying Grid Layout in .NET MAUI Using Extension Methods

The grid extension methods from the Community Toolkit can make working with grids in .NET MAUI cleaner. Learn more!

The grid is one of the layouts that provides the best performance for your .NET MAUI apps, and I love it because it’s also very flexible. You can create designs that look complex, and a grid even works as a replacement for the old RelativeLayout.

But beyond all its advantages, today we’ll talk about some tips and tricks to help you get the most out of it using the extension methods that the Maui.Community.Toolkit provides for the grid.

What Is an Extension Method? 🤔

An extension method is a C# feature that allows you to add methods to an existing type, such as classes, interfaces or structs. Thanks to them, you don’t need to inherit from a class or modify its original code to use new functionality. It’s like giving superpowers to a class that already exists.

For example, if the grid originally didn’t have a method called Rows(), you could create an extension method to add it, and it would behave as if that method were part of the grid itself.

What Are Grid Extension Methods?

Grid extensions are a set of extensions specifically designed for the grid included in the Maui.Community.Toolkit. Let’s explore which extensions are available and what each of them does!

Row

Its purpose is to set the Grid.Row value and, optionally, the RowSpan (Grid.RowSpan) if you want an element to extend horizontally across multiple rows.

This method can be used with any element that inherits from BindableObject, such as Label, Button, Image, etc.

Here’s an example of how to implement it:

❌ Without Extension Methods

var button = new Button { Text = "This Button is in Row 1 and spans 5 rows" }; 
    Grid.SetRow(button, 1); 
    Grid.SetRowSpan(button, 5); 
var grid = new Grid { Children = { button } };

✅ Using Extension Methods

new Grid { Children = { new Button().Text("This Button is in Row 1 and spans 5 rows").Row(1, 5) } };

Column

Its purpose is to set the Grid.Column value and, optionally, the ColumnSpan (Grid.ColumnSpan) if you want an element to extend vertically across multiple columns. This method can be used with any element that inherits from BindableObject.

Here’s an example of how to implement it:

❌ Without Extension Methods

var button = new Button { Text = "This Button is in Column 2 and spans 4 columns" }; 
    Grid.SetColumn(button, 2); 
    Grid.SetColumnSpan(button, 4); 
var grid = new Grid { Children = { button } };

✅ Using Extension Methods

new Grid { Children = { new Button().Text("This Button is in Column 2 and spans 4 columns").Column(2, 4) } };

Defining Rows & Columns

The Toolkit provides an extension that lets you define your Grid’s rows and columns in a simpler and more direct way, offering shorter, more expressive equivalents for common GridLength values. This is possible thanks to the following helpers:

• Columns.Define
• Rows.Define

To use them, you just need to add the following line at the top of your class:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

This using static allows you to replace long expressions like GridLength.Auto or new GridLength(2, GridLength.Star) with their shorter forms such as Auto, Star, Stars(2), etc.

For better clarity, here’s a comparison table:

And here’s how that translates into code:

❌ Without Extension Methods

ColumnDefinitions = new ColumnDefinitionCollection 
{ 
    new ColumnDefinition { Width = new GridLength(20, GridLength.Absolute) }, 
    new ColumnDefinition { Width = new GridLength(1, GridLength.Star) }, 
    new ColumnDefinition { Width = new GridLength(2, GridLength.Star) } 
};

✅ Using Extension Methods

ColumnDefinitions = Columns.Define(20, Star, Stars(2));

😱😱😱 When you compare both versions, look at everything you gain:

• Far less code—from six lines down to just one
• Much more readable and expressive
• And the best part: way easier to maintain

Defining Rows & Columns Using Enums

This is my favorite one! 😍 Normally, when defining the rows and columns of a grid, you use numeric values: row 2, column 2, etc. But the more rows and columns you have, the harder it becomes to identify, read and maintain that layout.

Now imagine that instead of numbers, you could use names. Well, now you can! 💃💃💃

The Community Toolkit allows you to name your rows and columns using enums (for example: Row.Username, Column.UserInput). This makes your code so much more readable, easier to understand and incredibly simple when identifying or modifying any coordinate inside the Grid.

And now, let’s see how to do it!

Step 1: Import the Required Helpers

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Step 2: Create Your Enum for Both Rows and Columns

First, the rows:

enum Row { Username, Password, Submit }

Then the columns:

enum enum Column { Description, UserInput }

Step 3: Use the Enum

Now that we’ve created our enums, let’s define the grid’s rows and columns using them, just like in the following example:

RowDefinitions = Rows.Define( 
(Row.Username, 30), 
(Row.Password, 30), 
(Row.Submit, Star)), 

ColumnDefinitions = Columns.Define( 
(Column.Description, Star), 
(Column.UserInput, Star)),

You can also use the enum to position your controls.

Instead of doing something like this:

.Row(0).Column(1)

You can simply do:

.Row(Row.Username).Column(Column.Description)

That’s it!! 🤓 Much cleaner, more expressive and easier to understand at a glance.

RowSpan & ColumnSpan

RowSpan and ColumnSpan are extension methods that allow you to define the number of rows or columns, respectively, that the grid should occupy. For example, if my grid has three rows and two columns, you would have something like this:

new Button() 
  .Text("Button to test")  
  .RowSpan(3) 
  .ColumnSpan(2)

And you can get even more out of your enum by using these special helpers:

➖ All<TEnum>() – This indicates that the control should occupy all the rows and/or columns defined in your enum, respectively. For example, if I have the following enums:

enum Row { Username, Password, Submit }
enum Column { Description, UserInput }

My definition would look like this:

new Button() 
   .Text("Button to test") 
   .RowSpan(All<Row>()) 
   .ColumnSpan(All<Column>())

➖ Last<TEnum> – Allows you to place a control in the last row or last column defined in your enum. You can do it as follows:

⚠️ For this example, we’ll use the enums defined above (Rows and Columns). In the code, a button is added to the last row and last column of the grid.

new Button() 
   .Text("Button to test") 
   .Row(Last<Row>()) 
   .Column(Last<Column>());

Conclusion

And that’s it! 🎉 In this article, you explored how the grid extension methods from the CommunityToolkit.Maui.Markup make working with grids in .NET MAUI simpler, cleaner and much more expressive. You learned what each helper does, how to define rows and columns with a shorter syntax, and how the Row/Column extension methods improve readability and reduce boilerplate.

Now you have the tools to make grid extensions your ally—helping you build layouts faster, write more maintainable UI code and create interfaces that are both easier to understand and easier to evolve over time.

If you have any questions or want me to cover more related topics, feel free to leave a comment. I’d be happy to help you! 💚 See you in the next article! 🙋‍♀️✨

References

The explanation was based on the official documentation:

• https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/markup/extensions/grid-extensions

Need a More Robust Grid?

The Progress Telerik UI for .NET MAUI DataGrid is one of the most powerful native MAUI grids available. It comes with 70+ other components in a free 30-day trial if you want to explore it in detail.

Try Telerik UI for .NET MAUI