MAUI Layout Tutorials - MSDN Documentation

Introduction to MAUI Layouts

Layouts are the building blocks of your .NET MAUI application's user interface. They define how elements are arranged and sized on the screen, ensuring a consistent and responsive user experience across different devices and screen sizes.

In .NET MAUI, you'll primarily use layout containers like StackLayout, Grid, FlexLayout, and AbsoluteLayout to structure your UI.

Getting Started with StackLayout

The StackLayout is one of the most fundamental layout containers. It arranges its children in a linear sequence, either horizontally or vertically.

Orientation: You can control the direction of the arrangement using the Orientation property (Vertical or Horizontal).

Spacing: The Spacing property adds uniform space between each child element.

Example: Vertical StackLayout

<VerticalStackLayout Spacing="10" Padding="20">
    <Label Text="Welcome to MAUI Layouts!" FontSize="24" HorizontalOptions="Center"/>
    <Button Text="Learn More"/>
    <Image Source="dotnet_bot.png" WidthRequest="200" HeightRequest="200"/>
</VerticalStackLayout>

Example: Horizontal StackLayout

<HorizontalStackLayout Spacing="10" Padding="20">
    <Image Source="icon_star.png" WidthRequest="50" HeightRequest="50"/>
    <Label Text="Featured Content" VerticalOptions="Center"/>
</HorizontalStackLayout>

Exploring the Grid Layout

The Grid provides a powerful way to arrange elements in a table-like structure of rows and columns. It's ideal for complex UIs where precise alignment is needed.

ColumnDefinitions and RowDefinitions: Define the structure of your grid. You can specify sizes using absolute values, percentages, or Auto.

Grid.Column and Grid.Row: Attached properties used to specify which cell a child element occupies.

Example: Grid Layout

<Grid ColumnSpacing="5" RowSpacing="5" Padding="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

    <Label Text="Header" Grid.Row="0" Grid.Column="0" FontAttributes="Bold"/>
    <Label Text="Main Content Area" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="LightBlue"/>
    <Label Text="Sidebar" Grid.Row="0" Grid.Column="1" HorizontalOptions="End"/>
</Grid>

FlexLayout for Dynamic Arrangement

FlexLayout offers advanced control over how items are arranged, aligned, and distributed within a container. It's especially useful for creating responsive UIs and aligning items along a main or cross axis.

Direction: Controls the axis along which children are laid out (Row, Column, RowReverse, ColumnReverse).

JustifyContent: Aligns items along the main axis.

AlignItems: Aligns items along the cross axis.

Example: FlexLayout

<FlexLayout Direction="Row" JustifyContent="SpaceBetween" AlignItems="Center" Padding="20">
    <Image Source="logo_small.png" HeightRequest="40"/>
    <Label Text="Application Title" FontSize="18"/>
    <Button Text="Menu"/>
</FlexLayout>

Next Steps

Continue exploring MAUI layouts by diving deeper into the specific tutorials for each layout type. Understanding these fundamental concepts will empower you to build sophisticated and visually appealing user interfaces for your cross-platform applications.

.NET MAUI Layout