Microsoft Learn

.NET MAUI Documentation

Understanding Layouts in .NET MAUI

Layouts are fundamental to building user interfaces in .NET MAUI. They control how elements are arranged on the screen, enabling you to create visually appealing and responsive applications. MAUI provides a rich set of layout containers to accommodate various UI design needs.

StackLayout

The StackLayout arranges child elements in a one-dimensional line, either horizontally or vertically. It's a simple and efficient layout for linear arrangements.

Vertical StackLayout

Item 1
Item 2
Item 3
<StackLayout>
    <Label Text="Item 1" />
    <Label Text="Item 2" />
    <Label Text="Item 3" />
</StackLayout>

Grid

The Grid allows you to arrange child elements in rows and columns. It's incredibly versatile, allowing for complex and precise UI layouts. You define rows and columns and then specify which cell each element should occupy.

Grid Layout

Header
Action Buttons
Sidebar
Main Content Area
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <Label Text="Header" Grid.Row="0" Grid.Column="0" />
    <Button Text="Actions" Grid.Row="0" Grid.Column="1" />
    <Label Text="Sidebar" Grid.Row="1" Grid.Column="0" />
    <Label Text="Content" Grid.Row="1" Grid.Column="1" />
</Grid>

FlexLayout

FlexLayout provides a powerful way to arrange items in a container, allowing for flexible alignment, ordering, and wrapping of elements. It's ideal for responsive UIs that adapt to different screen sizes.

FlexLayout (Row, Wrap)

Item A
Item B
Item C
Item D
Item E
<FlexLayout Direction="Row" Wrap="Wrap">
    <BoxView Color="Blue" FlexLayout.Basis="120" />
    <BoxView Color="LightBlue" FlexLayout.Basis="120" />
    <BoxView Color="DeepSkyBlue" FlexLayout.Basis="120" />
    <BoxView Color="DodgerBlue" FlexLayout.Basis="120" />
    <BoxView Color="PowderBlue" FlexLayout.Basis="120" />
</FlexLayout>

AbsoluteLayout

AbsoluteLayout positions child elements at a specific coordinate. While offering precise control, it's less adaptive and should be used judiciously, often for overlays or specific fixed positioning requirements.

RelativeLayout

RelativeLayout allows you to position and size child elements relative to each other or the parent container. This is useful for creating responsive layouts where element positions depend on other elements.

ScrollView

The ScrollView enables content to be scrollable when it exceeds the available screen space. It can contain a single child element, which is typically another layout container.

Frame

A Frame is a container that draws a border and/or background around its child. It's often used to visually group or highlight content.

ContentView

ContentView is a base class for custom user interface elements. It's commonly used to create reusable UI components.

Layout Interoperability

You can nest layouts within each other to create complex and sophisticated user interfaces. For example, a Grid might contain StackLayouts in its cells.

Outer Item 1
Inner A
Inner B
Outer Item 2
<StackLayout>
    <Label Text="Outer Item 1" />
    <StackLayout Orientation="Horizontal"
                 HorizontalOptions="SpaceAround">
        <Label Text="Inner A" />
        <Label Text="Inner B" />
    </StackLayout>
    <Label Text="Outer Item 2" />
</StackLayout>