MAUI Layouts

Analogy categoryAnalogies

Understanding Layout Panels in .NET MAUI

Every visible screen in a .NET MAUI app is built from layout panels — container controls whose job is to measure their children, decide how much space each one needs, and then arrange them at final coordinates. MAUI ships five core layout types: StackLayout, Grid, FlexLayout, AbsoluteLayout, and the lightweight compatibility layouts like HorizontalStackLayout and VerticalStackLayout, each implementing its own measure-and-arrange algorithm inherited from the Microsoft.Maui.Layouts.ILayoutManager interface.

🏏

Cricket analogy: Choosing a layout panel is like a captain picking a fielding formation for an over — a Grid is a set field plan for a spinner like Ravichandran Ashwin, while a StackLayout is the simple straight-line slip cordon used against a pacer.

Grid: Precise Row and Column Control

Grid divides available space into rows and columns declared through RowDefinitions and ColumnDefinitions, each sized with GridUnitType.Auto (fit content), GridUnitType.Star (proportional remaining space, written as '*' or '2*'), or GridUnitType.Absolute (a fixed device-independent unit value). Children are placed into cells using the attached properties Grid.Row, Grid.Column, Grid.RowSpan, and Grid.ColumnSpan, and because Grid performs a single measure pass across its whole cell structure it is the most efficient layout for complex screens.

🏏

Cricket analogy: Grid's row/column sizing is like a scorecard table where the extras column is fixed-width (Absolute), the batsman-name column auto-fits the longest name like 'Ravindra Jadeja' (Auto), and the runs column stretches to fill remaining space (Star).

xaml

<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="2*,1*" Padding="16">
    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Profile" FontSize="24" />
    <Image Grid.Row="1" Grid.Column="0" Source="avatar.png" Aspect="AspectFill" />
    <StackLayout Grid.Row="1" Grid.Column="1" Spacing="8">
        <Label Text="Jane Doe" FontAttributes="Bold" />
        <Label Text="Software Engineer" />
    </StackLayout>
    <Button Grid.Row="2" Grid.ColumnSpan="2" Text="Edit Profile" Command="{Binding EditCommand}" />
</Grid>

StackLayout, FlexLayout, and AbsoluteLayout

StackLayout (and its lighter-weight successors HorizontalStackLayout and VerticalStackLayout) arranges children one after another along a single axis using the Orientation property, making it ideal for simple lists but inefficient when nested deeply because each nested StackLayout adds another measure pass. FlexLayout mirrors CSS flexbox, exposing Direction, JustifyContent, AlignItems, and Wrap properties so children can wrap onto multiple lines like a responsive web layout, while AbsoluteLayout positions children with LayoutBounds using proportional (0-1) or absolute coordinates relative to the AbsoluteLayoutFlags, giving pixel-perfect but non-responsive placement.

🏏

Cricket analogy: FlexLayout's wrapping behavior is like a fielding side rearranging itself over after over — JustifyContent packs fielders tightly for a pace bowler, then Wrap lets extra fielders spill onto a second line in the deep for a spinner like Kuldeep Yadav.

For screens with more than two or three nested containers, prefer a single Grid with well-defined rows and columns over nested StackLayouts. MAUI's layout system re-measures every nested container on each pass, so flattening the hierarchy with Grid.Row/Grid.Column placement noticeably reduces layout cost on complex or frequently-updated screens, such as chat lists or dashboards.

Grid uses RowDefinitions/ColumnDefinitions with Auto, Star, and Absolute sizing
A single Grid measure pass is more efficient than several nested StackLayouts
FlexLayout supports CSS-flexbox-style wrapping via Direction, JustifyContent, and Wrap
AbsoluteLayout trades responsiveness for pixel-precise placement via LayoutBounds
HorizontalStackLayout/VerticalStackLayout are lighter alternatives to StackLayout
Grid.RowSpan and Grid.ColumnSpan let a child occupy multiple cells
Prefer flattened Grid hierarchies over deep StackLayout nesting for complex screens