.Net Maui Layout Controls Flexlayout Absolutelayout Complete Guide

1. FlexLayout Example

Step-by-Step Guide:

Step 1: Create a New .NET MAUI Project

• Open Visual Studio.
• Click on Create a new project.
• Choose MAUI App (.NET 6) and click Next.
• Configure your project details (e.g., Name, Location) and click Create.

Step 2: Add a FlexLayout to the MainPage.xaml

Open the MainPage.xaml file in your new project and modify it as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiFlexLayoutExample.MainPage">

    <StackLayout VerticalOptions="CenterAndExpand"
                 Margin="20">
        <Label Text="FlexLayout Example"
               FontSize="Title"
               HorizontalTextAlignment="Center"
               Margin="0,0,0,20"/>

        <!-- FlexLayout -->
        <FlexLayout Direction="Row"
                    AlignItems="Center"
                    JustifyContent="SpaceBetween"
                    Wrap="Wrap"
                    BackgroundColor="LightGray"
                    Padding="20">

            <!-- Child Elements -->
            <BoxView BackgroundColor="Red"
                     HeightRequest="50"
                     WidthRequest="50" />

            <BoxView BackgroundColor="Green"
                     HeightRequest="50"
                     WidthRequest="50" />

            <BoxView BackgroundColor="Blue"
                     HeightRequest="50"
                     WidthRequest="50" />

            <BoxView BackgroundColor="Yellow"
                     HeightRequest="50"
                     WidthRequest="50" />
            
            <BoxView BackgroundColor="Purple"
                     HeightRequest="50"
                     WidthRequest="50" />
        </FlexLayout>
    </StackLayout>
</ContentPage>

Step 3: Explanation of FlexLayout Properties

• Direction: Defines the direction in which items are placed. Options include Row, Column, RowReverse, ColumnReverse.
• AlignItems: Vertically aligns items within each line. Options include Stretch, Start, Center, End, Baseline.
• JustifyContent: Horizontally aligns content along the main axis (defined by Direction). Options include Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly.
• Wrap: Specifies whether items should wrap when they exceed the container's capacity. Options are Wrap or NoWrap.
• BackgroundColor, Padding, Margin: These properties are used to style the FlexLayout.

Step 4: Run Your Application

Press F5 or click the Run button in Visual Studio to build and deploy your application. Depending on your platform (Android/iOS/WPF), you will see a FlexLayout with two rows of colored boxes.

Output:

2. AbsoluteLayout Example

Step-by-Step Guide:

Step 1: Ensure You Have a .NET MAUI Project

If you already have a .NET MAUI project, skip this step. Otherwise, create a new project following Step 1 from the previous example.

Step 2: Modify the MainPage.xaml to Include AbsoluteLayout

Open the MainPage.xaml file and update it as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAbsoluteLayoutExample.MainPage">

    <StackLayout VerticalOptions="CenterAndExpand"
                 Margin="20">
        <Label Text="AbsoluteLayout Example"
               FontSize="Title"
               HorizontalTextAlignment="Center"
               Margin="0,0,0,20"/>

        <!-- AbsoluteLayout -->
        <AbsoluteLayout BackgroundColor="LightGray"
                        Padding="20">

            <!-- Positioning using AbsoluteLayout -->
            <BoxView BackgroundColor="Red"
                     HeightRequest="50"
                     WidthRequest="50"
                     AbsoluteLayout.LayoutBounds="0.1, 0.1, 0.2, 0.2" <!-- X,Y,Width,Height as fractions -->
                     AbsoluteLayout.LayoutFlags="All"/>

            <BoxView BackgroundColor="Green"
                     HeightRequest="50"
                     WidthRequest="50"
                     AbsoluteLayout.LayoutBounds="0.5, 0.5, 50, 50" <!-- X,Y,Width,Height as pixels -->
                     AbsoluteLayout.LayoutFlags="None"/>

            <BoxView BackgroundColor="Blue"
                     HeightRequest="50"
                     WidthRequest="50"
                     AbsoluteLayout.LayoutBounds="0.9, 0.9, 100, 100" <!-- X,Y,Width,Height as pixels -->
                     AbsoluteLayout.LayoutFlags="PositionProportional"/>
        </AbsoluteLayout>
    </StackLayout>
</ContentPage>

Step 3: Explanation of AbsoluteLayout Properties

The primary way to control positioning and sizing is via the AbsoluteLayout.LayoutBounds attached property, which accepts four values:

• X: Horizontal position relative to the left edge of the layout.
• Y: Vertical position relative to the top edge of the layout.
• Width: Width of the element.
• Height: Height of the element.

Values can be specified as absolute pixel positions or as fractions of the layout's dimensions. The AbsoluteLayout.LayoutFlags attached property modifies how the bounds are interpreted:

• None: Positions and sizes elements using absolute pixels.
• XProportional: Only the X position is proportional.
• YProportional: Only the Y position is proportional.
• PositionProportional: Both X and Y positions are proportional.
• WidthProportional: Only the width is proportional.
• HeightProportional: Only the height is proportional.
• SizeProportional: Both width and height are proportional.
• All: Positions (X and Y) and sizes (Width and Height) are proportional.

Step 4: Run Your Application

Execute the application by pressing F5 or clicking the Run button in Visual Studio. You will see red, green, and blue boxes positioned at different locations within an AbsoluteLayout.

Output:

Summary

• FlexLayout is great for creating responsive layouts that automatically adjust based on available space.
• AbsoluteLayout offers precise control over child element positioning and sizing, using fractional or pixel-based coordinates.