MAUI Layouts

This tutorial introduces you to layout containers in .NET MAUI, which are used to arrange controls on your application's pages. Understanding how to use these layouts is fundamental to building responsive and visually appealing user interfaces.

Common Layout Containers

StackLayout

StackLayout arranges its children in a one-dimensional line, either horizontally or vertically. It's one of the most frequently used layout containers.

Orientation

You can control the orientation using the Orientation property:

StackOrientation.Vertical (default): Arranges children top-to-bottom.
StackOrientation.Horizontal: Arranges children left-to-right.

Example:


<StackLayout Orientation="StackOrientation.Vertical"
             Spacing="10"
             Padding="10,0,10,0">
    <Label Text="First Item" />
    <Button Text="Second Item" />
    <Image Source="third_item.png" />
</StackLayout>

Grid

Grid is a powerful layout container that arranges its children in rows and columns. It's ideal for creating complex UIs where precise alignment is needed.

Defining Rows and Columns

You define rows and columns using the RowDefinitions and ColumnDefinitions properties. You can specify sizes using absolute values, percentages, or auto-sizing.

Absolute(value): A fixed pixel value.
Auto: Sizes the row/column to fit its content.
Star(value): Occupies a proportion of the available space. The default is 1*.

Example:


<Grid RowDefinitions="Auto,*,Auto"
      ColumnDefinitions="Auto,*">

    <Label Grid.Row="0" Grid.Column="0" Text="Header" />
    <Button Grid.Row="1" Grid.Column="0" Text="Left Button" />
    <Label Grid.Row="1" Grid.Column="1" Text="Main Content" />
    <Label Grid.Row="2" Grid.Column="1" Text="Footer" />
</Grid>

FlexLayout

FlexLayout is a versatile layout container that can arrange its children in a flexible manner, either horizontally or vertically. It supports wrapping and justification, making it suitable for adaptive UIs.

Key Properties

Direction: Controls the main axis (Column, Row, ColumnReverse, RowReverse).
Wrap: Determines if items should wrap to the next line (NoWrap, Wrap, WrapReverse).
JustifyContent: Aligns items along the main axis.
AlignItems: Aligns items along the cross axis.

Example:


<FlexLayout Direction="Direction.Row"
            Wrap="Wrap"
            JustifyContent="SpaceBetween"
            AlignItems="Center">
    <BoxView Color="Red" WidthRequest="100" HeightRequest="100" />
    <BoxView Color="Green" WidthRequest="100" HeightRequest="100" />
    <BoxView Color="Blue" WidthRequest="100" HeightRequest="100" />
    <BoxView Color="Yellow" WidthRequest="100" HeightRequest="100" />
</FlexLayout>

Layout Best Practices

Tip: Use Layouts Appropriately

Choose the layout container that best suits the arrangement needs of your UI elements. Overlapping or nesting layouts excessively can impact performance. For simple linear arrangements, StackLayout is often sufficient. For complex grids, Grid is the go-to. For adaptive or flowing content, consider FlexLayout.

Conclusion

Layouts are the building blocks of your .NET MAUI user interface. By mastering StackLayout, Grid, and FlexLayout, you can create robust and adaptable UIs that look great on any device.

Next, explore how to implement data binding to dynamically populate your UI.

Note

The specific appearance of layouts can be influenced by platform conventions and further styling applied to individual controls.