Microsoft Docs

MAUI Layouts

Layouts in .NET MAUI are essential for arranging user interface elements on the screen. They provide powerful and flexible ways to position and size controls, ensuring your application looks great on a variety of device screen sizes and orientations.

Understanding Layout Panels

MAUI provides several built-in layout panels, each with its own strengths and use cases:

StackLayout

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

<StackLayout Orientation="Vertical" Spacing="10">
    <Label Text="Item 1" />
    <Button Text="Click Me" />
    <Image Source="icon.png" />
</StackLayout>

Key properties include Orientation (Vertical or Horizontal) and Spacing.

Grid

The Grid is a powerful layout panel that arranges its children into rows and columns. It's ideal for creating complex UIs and forms where elements need to align precisely.

<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="*,Auto">
    <Label Grid.Row="0" Grid.Column="0" Text="Header" />
    <Button Grid.Row="1" Grid.Column="0" Text="Main Content" />
    <Image Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Source="thumbnail.png" />
    <Label Grid.Row="2" Grid.Column="0" Text="Footer" />
</Grid>

Define rows and columns using RowDefinitions and ColumnDefinitions. Elements can span multiple rows and columns using Grid.RowSpan and Grid.ColumnSpan attached properties.

FlexLayout

FlexLayout is a versatile layout that allows you to arrange items in any direction, wrap them onto multiple lines, and align them along the main and cross axes. It's inspired by CSS Flexbox.

<FlexLayout Direction="Row" Wrap="Wrap" Justify="SpaceBetween" AlignItems="Center">
    <Button Text="Button 1" />
    <Button Text="Button 2" />
    <Button Text="Button 3" />
    <Button Text="Button 4" />
</FlexLayout>

Use properties like Direction, Wrap, JustifyContent, and AlignItems to control the arrangement.

AbsoluteLayout

AbsoluteLayout positions its children at specific pixel coordinates. While useful for certain scenarios like overlays, it's generally discouraged for main layouts due to its lack of adaptability to different screen sizes.

<AbsoluteLayout>
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
    <Label Text="Centered" AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>

Use AbsoluteLayout.LayoutBounds and AbsoluteLayout.LayoutFlags to specify position and size. Flags like PositionProportional and SizeProportional can offer some responsiveness.

RelativeLayout

RelativeLayout allows you to position and size elements relative to sibling elements or the parent layout. It's useful for complex responsive UIs where precise control over relationships is needed.

<RelativeLayout>
    <BoxView Color="Red" HeightRequest="50" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" />
    <Button Text="Bottom Button" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8}" />
</RelativeLayout>

Define constraints using ConstraintExpression to specify relationships based on parent properties or sibling elements.

ScrollView

The ScrollView enables content to be scrolled when it exceeds the available screen space. It can contain only one child element.

<ScrollView>
    <VerticalStackLayout>
        <!-- Many elements that might exceed screen height -->
        <Label Text="Item 1" />
        <Label Text="Item 2" />
        <!-- ... more items ... -->
        <Label Text="Last Item" />
    </VerticalStackLayout>
</ScrollView>

Use Orientation to control scrolling direction (Vertical or Horizontal).

PanContainer

While not a standard layout panel, the PanContainer (previously part of third-party libraries like PancakeView, now potentially integrated or available through community extensions) allows for advanced gesture handling, including panning and scaling, often used for draggable or resizable elements.