FlexLayout in MAUI

  In this example we are going to see FlexLayout Example in MAUI. 

1) Add new page and Update code as below.

<?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="MauiApp1.FlexLayoutEXP1"

             Title="FlexLayoutEXP1">

    <FlexLayout Direction="Row"

            AlignItems="Start"

            JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action" />

        <Button Text="Button 1" />

        <Label Text="Another Label" />

        <Button Text="Button 2" />

        <Button Text="Button 3" />

        <Button Text="Button 4" />

    </FlexLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

AbsoluteLayout in MAUI

 In this example we are going to see AbsoluteLayout  Example in MAUI.

1) Add new page and Update code as below.

<?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="MauiApp1.AbsoluteLayoutEXP1"

             Title="AbsoluteLayoutEXP1">

    <AbsoluteLayout Margin="40">

        <BoxView Color="Blue"

             AbsoluteLayout.LayoutFlags="PositionProportional"

             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"

             Rotation="30" />

        <BoxView Color="Green"

             AbsoluteLayout.LayoutFlags="PositionProportional"

             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"

             Rotation="60" />

        <BoxView Color="Red"

             AbsoluteLayout.LayoutFlags="PositionProportional"

             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />

    </AbsoluteLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

Grid Layout in MAUI

 In this example we are going to see GridLayoutEXP1 Example in MAUI.

1) Add new page and Update code as below.

<?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="MauiApp1.GridLayoutEXP1"

             Title="GridLayoutEXP1">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50" />

            <RowDefinition Height="50" />

            <RowDefinition Height="50" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Button Text="Column 0,Row 0"

           WidthRequest="200"  />

        <Button Grid.Column="1"

           Text="Column 1,Row 0" />

        <Button Grid.Row="1"

           Text="Column 0,Row 1" />

        <Button Grid.Column="1"

           Grid.Row="1"

           Text="Column 1,Row 1" />

        <Button BackgroundColor="Green"

            Grid.Row="2"

            Grid.Column="0"

           Grid.ColumnSpan="2"

           Text="Column Span" />

        <Button  BackgroundColor="Red"

            Grid.Column="2"

           Grid.RowSpan="3"

           Text="Row Span" />

    </Grid>    

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

VerticalStackLayout in MAUI

  In this example we are going to see VerticalStackLayout Example in MAUI.

1) Add new page and Update code as below.

<?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="MauiApp1.VerticalStackLayoutEXP1"

             Title="VerticalStackLayoutEXP1">

    <VerticalStackLayout Spacing="10" >

        <Label 

            Text="VerticalStackLayout"

            VerticalOptions="Center" 

            HorizontalOptions="Start"  ></Label>

        <Label 

            Text="VerticalStackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Red" />

        <Label 

            Text="VerticalStackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Yellow" />

        <Label 

            Text="VerticalStackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Brown" />

    </VerticalStackLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

HorizontalStackLayout in MAUI

 In this example we are going to see HorizontalStackLayout Example in MAUI.

1) Add new page and Update code as below.

<?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="MauiApp1.HorizontalStackLayoutEXP1"

             Title="HorizontalStackLayoutEXP1">

    <HorizontalStackLayout Spacing="10" >

        <Label 

            Text="HorizontalStackLayout "

            VerticalOptions="Center" 

            HorizontalOptions="Start"  ></Label>

        <Label 

            Text="HorizontalStackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Red" />

        <Label 

            Text="HorizontalStackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Yellow" />

        <Label 

            Text="HorizontalStackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Brown" />

    </HorizontalStackLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

StackLayout in MAUI

In this example we are going to see StackLayout Example in MAUI.

1) Add new page and Update code as below.

<?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="MauiApp1.StackLayoutEXP1"

             Title="StackLayoutEXP1">

    <StackLayout Spacing="10" VerticalOptions="Center" >

        <Label 

            Text="StackLayout "

            VerticalOptions="Center" 

            HorizontalOptions="Start"  ></Label>

        <Label 

            Text="StackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Red" />

        <Label 

            Text="StackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Yellow" />

        <Label 

            Text="StackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="Brown" />

        <Label 

            Text="StackLayout EXP1"

            VerticalOptions="Center" 

            HorizontalOptions="Center" BackgroundColor="BlueViolet" />

    </StackLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

Layout types in MAUI

 In MAUI there are 4 important Layout types are available, those are as below.

• StackLayout
• HorizontalStackLayout
• VerticalStackLayout
• AbsoluteLayout
• Grid
• FlexLayout