📐 Layouts in .NET MAUI – StackLayout

StackLayout in .NET MAUI

The StackLayout remains a foundational building block for creating user interfaces in .NET MAUI. It is designed to organize child views in a one-dimensional "stack," which can be arranged either vertically or horizontally. While it is a versatile tool for simple arrangements, modern MAUI development often favors more specialized, high-performance versions of this layout for standard use cases.

Core Functionality of StackLayout

The primary role of a StackLayout is to take a collection of UI elements—such as buttons, labels, and images—and line them up without them overlapping.

• Orientation: By default, a StackLayout stacks its children vertically (top-to-bottom). You can change this to a horizontal (left-to-right) arrangement by setting the Orientation property to Horizontal.
• Spacing: One of its most useful properties is Spacing, which allows you to define a specific amount of empty space between each child element. The default value is 0, but values like 6 or 10 help prevent cluttered layouts.
• Alignment: StackLayout uses HorizontalOptions and VerticalOptions to position child views within the available space. For example, in a vertical stack, a label can be centered horizontally using HorizontalOptions="Center".

Modern Alternatives: Vertical and Horizontal StackLayouts

In the latest versions of .NET MAUI, Microsoft introduced VerticalStackLayout and HorizontalStackLayout as more performant alternatives.

• Why use them? Standard StackLayout is bindable, meaning the framework checks for orientation changes. The specialized versions avoid this overhead, resulting in better performance.
• Simplified Syntax: Because the orientation is implied by the name, there is no need to set an Orientation property, leading to cleaner XAML.

XAML Example: A Simple Vertical Profile Card

The following example demonstrates a standard vertical layout for a user profile section using Spacing and HorizontalOptions.

<StackLayout Spacing="15"
        Padding="20"
        VerticalOptions="Center">

<Image Source="user_avatar.png"
       HeightRequest="100"
       WidthRequest="100"
       HorizontalOptions="Center" />

<Label Text="Jane Doe"
       FontSize="24"
       FontAttributes="Bold"
       HorizontalOptions="Center" />

<Label Text="Senior Software Engineer based in Seattle."
       HorizontalOptions="Fill"
       HorizontalTextAlignment="Center" />

<Button Text="Follow"
        BackgroundColor="DeepSkyBlue"
        TextColor="White"
        WidthRequest="150"
        HorizontalOptions="Center" />
</StackLayout>

Critical Do's and Don'ts

• DON'T Nest Unconstrained Scrolling Things: Avoid placing a CollectionView or ScrollView directly inside a StackLayout without a defined height, as it can cause performance issues or crashes.
• DO Use Spacing instead of Margins: Use the Spacing property to create consistent gaps between elements rather than applying individual margins.
• DO Prefer Grid for Complex Sizing: For layouts that require elements to expand or share space proportionally, Grid is more efficient and predictable than StackLayout.

The StackLayout remains the easiest way to prototype and build simple linear UIs. As applications grow in complexity, using VerticalStackLayout, HorizontalStackLayout, and switching to Grid when appropriate is key to maintaining high performance in cross-platform MAUI apps.

StackLayout is a layout container in .NET MAUI that arranges its child elements in a single line, either vertically or horizontally. It is one of the simplest and most commonly used layouts.

Key Features

• 📏 Orientation: Can be set to Vertical (default) or Horizontal.
• 📦 Simple stacking of elements without complex positioning.
• ⚡ Lightweight and easy to use for basic UI structures.
• 🎨 Supports spacing and padding between child elements.
• 🔧 Works well for forms, menus, and linear content.

Example: Vertical StackLayout

<StackLayout Orientation="Vertical" Spacing="10">
    <Label Text="Welcome to MAUI!" />
    <Entry Placeholder="Enter your name" />
    <Button Text="Submit" />
</StackLayout>
  

Example: Horizontal StackLayout

<StackLayout Orientation="Horizontal" Spacing="15">
    <Label Text="Username:" />
    <Entry Placeholder="Enter username" />
</StackLayout>
  

Use Cases

• 📝 Forms with fields stacked vertically.
• 📊 Toolbars or menus arranged horizontally.
• 📱 Simple linear layouts for mobile apps.

Conclusion

StackLayout is ideal when you need to arrange elements in a straight line. For more complex layouts, other containers like Grid or FlexLayout may be better suited.