.NET MAUI Layouts

Organizing your UI elements effectively in cross-platform applications.

Introduction to Layouts

Layouts are fundamental to building user interfaces in .NET MAUI. They define how UI elements are arranged and positioned on the screen. Understanding different layout containers allows you to create responsive and visually appealing applications that adapt to various screen sizes and orientations.

MAUI provides a rich set of layout containers, each with its own strengths and use cases. We'll explore the most common ones in this tutorial.

StackLayout

The StackLayout arranges its children in a linear fashion, either horizontally or vertically. It's a simple and versatile layout for basic arrangements.

  • Orientation: Can be set to Vertical (default) or Horizontal.
  • Spacing: You can specify space between child elements.

Vertical StackLayout Example

Item 1
Item 2
Item 3

A typical XAML definition for a vertical StackLayout:

<StackLayout Spacing="10">
    <Label Text="First Item" />
    <Button Text="Second Item" />
    <Image Source="icon.png" />
</StackLayout>

Grid

The Grid is a powerful layout that divides its available space into rows and columns. You can then position elements within specific cells of this grid.

  • Rows and Columns Definitions: Define the structure using RowDefinitions and ColumnDefinitions.
  • Placement: Use Grid.Row and Grid.Column attached properties to place elements.
  • Spanning: Elements can span multiple rows or columns using Grid.RowSpan and Grid.ColumnSpan.

Grid Example (2x2)

Top Left
Top Right
Bottom Left
Bottom Right

XAML for a 2x2 Grid:

<Grid RowDefinitions="Auto,*" ColumnDefinitions="*,Auto">
    <Label Text="Header" Grid.Row="0" Grid.Column="0" />
    <Button Text="Action" Grid.Row="0" Grid.Column="1" />
    <ScrollView Grid.Row="1" Grid.ColumnSpan="2">
        <!-- Content -->
    </ScrollView>
</Grid>

FlexLayout

FlexLayout provides a flexible and efficient way to lay out items in one dimension (either a row or a column). It's ideal for distributing space among items and aligning them.

  • Direction: Can be Row, Column, RowReverse, or ColumnReverse.
  • JustifyContent: Controls how items are spaced along the main axis (e.g., Start, Center, SpaceBetween).
  • AlignItems: Controls how items are aligned along the cross axis (e.g., Stretch, Center, Start).

FlexLayout Example (Row, SpaceBetween)

Item A
Item B
Item C

XAML for a row-based FlexLayout:

<FlexLayout Direction="Row" JustifyContent="SpaceEvenly" AlignItems="Center">
    <Label Text="Logo" />
    <SearchBar Placeholder="Search..." />
    <Button Text="Profile" />
</FlexLayout>

AbsoluteLayout

AbsoluteLayout positions child elements at specific X and Y coordinates, with optional width and height. It gives you pixel-perfect control but can make your UI less adaptable to different screen sizes.

  • Absolute Positioning: Set AbsoluteLayout.LayoutBounds to define position and size.
  • Proportional Sizing: Use values between 0 and 1 for proportional sizing relative to the parent.

AbsoluteLayout Example

Top-Left
Bottom-Right
Center

XAML for AbsoluteLayout:

<AbsoluteLayout>
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0, 0, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

RelativeLayout

RelativeLayout allows you to position elements relative to the parent container or other sibling elements. It's more flexible than AbsoluteLayout for dynamic positioning.

  • Relative Positioning: Use RelativeLayout.XConstraint, RelativeLayout.YConstraint, etc.
  • Alignments: Position elements relative to the parent's edges or center.
  • Sibling Relationships: Position elements relative to another element within the same parent.

RelativeLayout Example

Aligned to Parent Top-Left
Aligned to Parent Bottom-Right

XAML for RelativeLayout:

<RelativeLayout>
    <Label Text="Header" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" />
    <Button Text="Save" RelativeLayout.AlignHorizontal="{ConstraintExpression Type=RelativeToParent, Property=HorizontalOptions, Constant=End}" />
</RelativeLayout>

ScrollView

The ScrollView is not a layout container itself but a view that allows its content to be scrollable. It's essential when your content exceeds the available screen space.

You typically place another layout container (like a StackLayout or Grid) inside a ScrollView.

ScrollView Example (Conceptual)

This is a long piece of content that would normally be cut off...

...

...but because it's inside a ScrollView, you can scroll down to see the rest.

...

More content here.

...

Even more content.

XAML with ScrollView:

<ScrollView>
    <StackLayout>
        <!-- Lots of content -->
        <Label Text="Item 1" />
        <Label Text="Item 2" />
        <!-- ... many more items ... -->
        <Label Text="Last Item" />
    </StackLayout>
</ScrollView>

Conclusion

Choosing the right layout container is crucial for creating efficient and maintainable UIs in .NET MAUI. Experiment with these layouts and combine them to achieve complex designs. Remember to consider responsiveness and how your UI will adapt to different screen sizes and device orientations.

Mastering layouts is a key step in becoming proficient with .NET MAUI development.