Docs / Documentation / .NET / MAUI / Tutorials / Layout

Designing Layouts in .NET MAUI

Learn how to arrange visual elements in your MAUI applications using the built‑in layout containers. This tutorial covers the most common layouts, when to use them, and provides hands‑on code examples.

StackLayout

The StackLayout arranges its children in a single line, either vertically or horizontally.


<StackLayout Orientation="Vertical" Spacing="10">
    <Label Text="Welcome to MAUI!" />
    <Button Text="Click Me" />
    <Entry Placeholder="Enter text" />
</StackLayout>

Use Orientation="Horizontal" for a side‑by‑side layout.

Grid

The Grid provides a flexible table‑like system with rows and columns.


<Grid RowDefinitions="Auto, *" ColumnDefinitions="*, 2*" Margin="20">
    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Header" FontSize="24" HorizontalOptions="Center" />
    <BoxView Grid.Row="1" Grid.Column="0" Color="LightBlue" />
    <BoxView Grid.Row="1" Grid.Column="1" Color="LightCoral" />
</Grid>

Combine RowDefinitions and ColumnDefinitions to create complex UI structures.

FlexLayout

FlexLayout mimics CSS Flexbox. It's ideal for responsive designs.


<FlexLayout Direction="Row" Wrap="Wrap" AlignItems="Center" JustifyContent="SpaceBetween">
    <Button Text="One" WidthRequest="100" />
    <Button Text="Two" WidthRequest="100" />>
    <Button Text="Three" WidthRequest="100" />
    <Button Text="Four" WidthRequest="100" />
</FlexLayout>

AbsoluteLayout

Position elements using explicit coordinates or proportional values.


<AbsoluteLayout>
    <BoxView Color="Gold" AbsoluteLayout.LayoutBounds="0.5,0.5,200,200" AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional, HeightProportional" />
    <Label Text="Centered" AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>

Responsive Design

Combine layouts with VisualStateManager to adapt to device size.


<ContentPage.VisualStateGroups>
    <VisualStateGroup x:Name="ScreenSize">
        <VisualState x:Name="Small">
            <VisualState.Setters>
                <Setter Target="MyStackLayout.Orientation" Value="Vertical" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Large">
            <VisualState.Setters>
                <Setter Target="MyStackLayout.Orientation" Value="Horizontal" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</ContentPage.VisualStateGroups>

Next Steps