Understanding Horizontal, Vertical, and Flex Layouts in .NET MAUI XAML

Episode 4 picks up where episode 3 left off, moving beyond the Grid layout that was covered previously. The hosts introduce three new layout containers for .NET MAUI XAML: HorizontalStackLayout, VerticalStackLayout, and FlexLayout. These options give developers more flexibility when arranging UI elements.

Horizontal Stack Layout

A simple way to place controls side‑by‑side is to use a HorizontalStackLayout. In the demo the “Save” and “Cancel” buttons are positioned horizontally with the markup

<Grid.Row="7" Grid.Column="1" Spacing="5">
    <HorizontalStackLayout>
        …buttons…
    </HorizontalStackLayout>

The Spacing="5" attribute inserts a 5‑pixel gap between the buttons, keeping the layout tidy.

Vertical Stack Layout

When a vertical arrangement is needed, VerticalStackLayout works the same way but stacks its children top‑to‑bottom. The episode shows a login form where a Entry for the user ID and a help Label are placed inside a VerticalStackLayout:

<Grid.Row="3" Grid.Column="1">
    <VerticalStackLayout>
        <Entry Placeholder="Login ID"/>
        <Label Text="please use a combination of letters and numbers"/>
    </VerticalStackLayout>

The label’s text gives the user guidance, and the Placeholder on the entry field reinforces that guidance.

Generic Stack Layout vs. Specific Stack Layouts

XAML also provides a generic StackLayout that requires an Orientation attribute (Horizontal or Vertical). However, the hosts point out that the generic version is “heavier” because it decides the orientation at runtime. In contrast, HorizontalStackLayout and VerticalStackLayout are compiled with a fixed orientation, delivering better performance.

The documentation even advises developers not to use the generic StackLayout unless they need to switch orientation dynamically in code‑behind—an edge case that might arise when the screen is resized. In such a scenario you could change StackLayout.Orientation programmatically, something you cannot do with the specific stack layouts.

Flex Layout

FlexLayout brings CSS‑like flexibility to MAUI. By setting Wrap="Yes" and Direction="Row" the layout automatically moves child elements to the next line when there isn’t enough horizontal space:

<FlexLayout Wrap="Yes" Direction="Row">
    <HorizontalStackLayout>
        <CheckBox/>
        <Label Text="Option 1"/>
    </HorizontalStackLayout>
    …more items…
</FlexLayout>

If Wrap is omitted, items can overflow or look “funky.” Switching Direction to Column changes the primary flow direction, but the wrapping behavior still works. The hosts note that child elements are grouped by their immediate parent (e.g., a HorizontalStackLayout containing a label and a checkbox), ensuring that related controls stay together when the layout wraps. This mirrors the behavior of the web’s Flexbox model.

Layout Best Practices and Responsiveness

Choosing the right container depends on the target device and layout complexity:

• Grid Layout – Ideal for simple phone screens, typically limited to two columns.
• FlexLayout – Better for complex or dynamic UIs that must adapt to phones, tablets, and desktops.

The guiding principle is “right once, let it adapt.” By using FlexLayout with wrapping, a set of checkboxes can appear in a single row on a wide desktop screen and automatically wrap into multiple rows on a narrow phone. Spacing can be added at the Grid level (column/row spacing) or within stack layouts (the Spacing property) to keep the UI visually balanced.

XAML Naming and Code‑Behind Interaction

To manipulate a layout at runtime—such as changing spacing or swapping orientations—the XAML element must have an x:Name. This naming enables the code‑behind file to reference the UI element directly, which is essential for any dynamic adjustments that go beyond static XAML definitions.

Summary and Next Steps

Episode 4 demonstrates that HorizontalStackLayout, VerticalStackLayout, and FlexLayout each have distinct performance and responsiveness characteristics. By applying the recommended best practices—using specific stack layouts for speed, reserving the generic StackLayout for rare dynamic cases, and leveraging FlexLayout for adaptable designs—developers can build .NET MAUI applications that look right on any screen size.