Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
The Grid
extensions provide a series of extension methods that support configuring a Grid
.
To define rows and columns for a Grid
, CommunityToolkit.Maui.Markup
provides two helper methods:
Columns.Define
Rows.Define
To leverage these helper methods, we first add the following using static
directive to the top of our class:
using static CommunityToolkit.Maui.Markup.GridRowsColumns;
After adding the above using static
directive, we can then define our Row + Column sizes using the following values to set the GridLength
:
Microsoft.Maui.GridLength | XAML | CommunityToolkit.Maui.Markup.GridRowsColumns |
---|---|---|
GridLength.Auto |
Auto |
Auto |
GridLength.Star |
* |
Star |
new GridLength(2, GridLength.Star) |
2* |
Stars(2) |
new GridLength(20, GridLength.Absolute) |
20 |
20 |
Putting it all together, we can now define a Grid's Rows + Columns:
new Grid
{
ColumnDefinitions = Columns.Define(30, Star, Stars(2)),
RowDefinitions = Rows.Define(Auto, Star),
};
The following example demonstrates how to create a Grid
with 2 Rows:
GridLength.Auto
GridLength.Star
The following example demonstrates how to create a Grid
with 3 Columns:
new GridLength(30, GridLength.Absolute)
GridLength.Star
new GridLength(GridLength.Star, 2)
:// Add this using static to enable Columns.Define and Rows.Define
using static CommunityToolkit.Maui.Markup.GridRowsColumns;
// ...
new Grid
{
ColumnDefinitions = Columns.Define(30, Star, Stars(2)),
RowDefinitions = Rows.Define(Auto, Star),
Children =
{
new Label()
.Text("This Label is in Row 0 Column 0")
.Row(0).Column(0)
new Label()
.Text("This Label is in Row 0 Column 1")
.Row(0).Column(1)
new Label()
.Text("This Label is in Row 0 Column 2")
.Row(1).Column(2)
new Label()
.Text("This Label is in Row 1 Column 0")
.Row(1).Column(0)
new Label()
.Text("This Label is in Row 1 Column 1")
.Row(1).Column(1)
new Label()
.Text("This Label is in Row 1 Column 2")
.Row(1).Column(2)
}
}
We can also define and name our Rows and Columns by creating a custom Enum
. Using an Enum
allows us to define a name for each row and column making it easier to place our controls in the Grid
.
The following example demonstrates how to define rows + columns for a Grid
using two Enum
s.
To leverage these helper methods, we first add the following using static
directive:
using static CommunityToolkit.Maui.Markup.GridRowsColumns;
We then define the names of our Rows and Columns by creating a custom Enum
for each:
enum Row { Username, Password, Submit }
enum Column { Description, UserInput }
We then then populate our Grid
using these Enum
s to define our rows + columns and to assign each control to a row + column accordingly:
using static CommunityToolkit.Maui.Markup.GridRowsColumns;
class LoginPage : ContentPage
{
public LoginPage()
{
Content = new Grid
{
RowDefinitions = Rows.Define(
(Row.Username, 30),
(Row.Password, 30),
(Row.Submit, Star)),
ColumnDefinitions = Columns.Define(
(Column.Description, Star),
(Column.UserInput, Star)),
Children =
{
new Label()
.Text("Username")
.Row(Row.Username).Column(Column.Description),
new Entry()
.Placeholder("Username")
.Row(Row.Username).Column(Column.UserInput),
new Label()
.Text("Password")
.Row(Row.Password).Column(Column.Description),
new Entry { IsPassword = true }
.Placeholder("Password")
.Row(Row.Password).Column(Column.UserInput),
new Button()
.Text("Submit")
.Row(Row.Password).RowSpan(All<Column>())
}
}
}
enum Row { Username, Password, Submit }
enum Column { Description, UserInput }
}
The Row
method sets the Grid.RowProperty
and Grid.RowSpanProperty
on a BindableObject
.
The following example sets the Grid.RowProperty
of a Button
to 0
and its Grid.RowSpanProperty
to 2
, then sets the Grid.RowProperty
of a Label
to 1
:
new Grid
{
Children =
{
new Button()
.Text("This Button is in Row 0 and spans 2 Columns")
.Row(0, 2),
new Label()
.Text("This Label is in Row 1 and does not span multiple columns")
.Row(1)
}
};
The Column
method sets the Grid.ColumnProperty
and Grid.ColumnSpanProperty
on a BindableObject
.
The following example sets the Grid.ColumnProperty
of a Button
to 0
and its Grid.ColumnSpanProperty
to 2
, then sets the Grid.ColumnProperty
of a Label
to 1
:
new Grid
{
Children =
{
new Button()
.Text("This Button is in Row 0 and spans 2 Columns")
.Column(0, 2),
new Label()
.Text("This Label is in Row 1 and does not span multiple columns")
.Column(1)
}
};
The RowSpan
method allows us to define how many Grid Rows a control will span across. I.e. If our Grid
has 3 Rows, .RowSpan(3)
will ensure the control spans across all 3 Columns.
Here's an example of a Button
that spans vertically across 3 Rows:
new Button()
.Text("This Button Spans Across 3 Grid Rows")
.RowSpan(3)
When defining our Rows using an Enum
, we can use All<TEnum>()
to ensure our control spans vertically across every row:
enum Row { Username, Password, Submit }
// ...
new Button()
.Text("This Button Spans Vertically Across Every Row Defined in our Enum")
.RowSpan(All<Row>());
The ColumnSpan
method allows us to define how many Grid Columns a control will span across. I.e. If our Grid
has 3 Columns, .ColumnSpan(3)
will ensure the control spans across all 3 Columns.
Here's an example of a Button
that spans horizontally across 3 Columns:
new Button()
.Text("This Button Spans Across 3 Grid Columns")
.ColumnSpan(3)
When defining our Rows using an Enum
, we can use All<TEnum>()
to ensure our control spans horizontally across every column:
enum Column { Description, UserInput }
// ...
new Button()
.Text("This Button Spans Vertically Across Every Row Defined in our Enum")
.ColumnSpan(All<Column>());
When defining our rows and columns using an Enum
, we can ensure a control is added to the last Row or the last Column by using .Last<TEnum>()
.
This example demonstrates how to add a Button
to the final row and column in a Grid
enum Row { Username, Password, Submit }
enum Column { Description, UserInput }
// ...
new Button()
.Text("This Button Spans Vertically Across Every Row Defined in our Enum")
.Row(Last<Row>()).Column(Last<Column>());
.NET MAUI Community Toolkit feedback
.NET MAUI Community Toolkit is an open source project. Select a link to provide feedback:
Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.