DotNet MAUI notes

XAML Layout Types

Stacklayout 

Stacklayout can stack its children in vertical manner or in the horizontal manner depending with the content of the Orientation.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.StackPage">

    <StackLayout Orientation="Vertical" Spacing="20" Padding="30">
        <Label Text="Vertical Item 1" BackgroundColor="LightCoral" HeightRequest="50" />
        <Label Text="Vertical Item 2" BackgroundColor="LightYellow" HeightRequest="50" />
        <Label Text="Vertical Item 3" BackgroundColor="LightPink" HeightRequest="50" />
    </StackLayout>

</ContentPage>

VerticalStackLayout

While positioned with the help of VerticalStackLayout, its children are positioned in vertical direction from the top downwards.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.VerticalStackPage">

    <VerticalStackLayout Spacing="20" Padding="30">
        <Label Text="Item 1" BackgroundColor="LightGray" HeightRequest="50" />
        <Label Text="Item 2" BackgroundColor="LightBlue" HeightRequest="50" />
        <Label Text="Item 3" BackgroundColor="LightGreen" HeightRequest="50" />
    </VerticalStackLayout>

</ContentPage>

HorizontalStackLayout

The HorizontalStackLayout places the children in the layout horizontally in the order from left to right.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.HorizontalStackPage">

    <HorizontalStackLayout Spacing="15" Padding="20">
        <Button Text="Button 1" WidthRequest="100" />
        <Button Text="Button 2" WidthRequest="100" />
        <Button Text="Button 3" WidthRequest="100" />
    </HorizontalStackLayout>

</ContentPage>

AbsoluteLayout

It has some special characteristics: AbsoluteLayout is used to position its child objects freely across the stage in X and Y directions. This means that you can place each child element to anywhere in the container with some point coordinates.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.AbsolutePage">

    <AbsoluteLayout>
        <BoxView Color="Red" WidthRequest="100" HeightRequest="100"
                 AbsoluteLayout.LayoutBounds="0.1, 0.1, 100, 100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />

        <BoxView Color="Blue" WidthRequest="100" HeightRequest="100"
                 AbsoluteLayout.LayoutBounds="0.5, 0.5, 100, 100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />

        <Label Text="Centered Label"
               AbsoluteLayout.LayoutBounds="0.5, 0.8, AutoSize, AutoSize"
               AbsoluteLayout.LayoutFlags="PositionProportional" />
    </AbsoluteLayout>

</ContentPage>
  • AbsoluteLayout.LayoutBounds: Indicates the location and dimension of the child in the form of coordinates (x and y) and width and height.
  • AbsoluteLayout.LayoutFlags: Describes how the discussed bounds are understood. PositionProportional is definitively because the position of element in the AbsoluteLayout is a proportion of the size.

FlexLayout

FlexLayout is similar to CSS Flexbox layout and serves as a convenient container with many capabilities. It can arrange children in rows or columns; a wrap is also possible with it.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.FlexPage">

    <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceAround">
        <BoxView Color="LightSkyBlue" WidthRequest="100" HeightRequest="100" />
        <BoxView Color="LightCoral" WidthRequest="100" HeightRequest="100" />
        <BoxView Color="LightGreen" WidthRequest="100" HeightRequest="100" />
        <BoxView Color="LightYellow" WidthRequest="100" HeightRequest="100" />
    </FlexLayout>

</ContentPage>
  • Direction="Row": Aligns the element in a line..
  • Wrap="Wrap": Carries items on to the next line if there is no space for it.
  • JustifyContent="SpaceAround": Positions the items such that they occupy equal distance between two of them.

Grid Layout

The Grid layout enables the placement of children in a sectional format with the ability to position in a row or column format.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.GridPage">

    <Grid RowDefinitions="*, *, *"
          ColumnDefinitions="*, *">
        <Label Text="Item 1" BackgroundColor="LightBlue" Grid.Row="0" Grid.Column="0" />
        <Label Text="Item 2" BackgroundColor="LightGreen" Grid.Row="0" Grid.Column="1" />
        <Label Text="Item 3" BackgroundColor="LightCoral" Grid.Row="1" Grid.Column="0" />
        <Label Text="Item 4" BackgroundColor="LightPink" Grid.Row="1" Grid.Column="1" />
        <Label Text="Item 5" BackgroundColor="LightYellow" Grid.Row="2" Grid.ColumnSpan="2" />
    </Grid>

</ContentPage>

Grid arranges elements in a grid-like structure.

  • RowDefinitions="*, *, *": Describes three rows as being the same size (* which means that the size of each is proportional to the others).
  • ColumnDefinitions="*, *": Creates two columns such that both are of similar dimensions.
  • Grid.Row and Grid.Column: Indicates in which row and in which column each element is located.
  • Grid.ColumnSpan="2": Places the given element in the middle of a line and make it go from one column to the other.

BindableLayout

A bindable layout means binding a collection of data to a layout means that one will be able to automatically create views based on the items in a collection. It can be used with layouts such as, Stack Layout or Flex Layout to name a few.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiAppExample"
             x:Class="MauiAppExample.BindableLayoutPage">

    <StackLayout Padding="20">
        <StackLayout x:Name="ItemsStackLayout"
                     BindableLayout.ItemsSource="{Binding Items}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}" FontSize="Medium" BackgroundColor="LightGray" />
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>
</ContentPage>

namespace MauiAppExample;

public partial class BindableLayoutPage : ContentPage
{
    public BindableLayoutPage()
    {
        InitializeComponent();
        BindingContext = this;
        Items = new List<string> { "Item A", "Item B", "Item C", "Item D" };
    }

    public List<string> Items { get; set; }
}

It is used for creating a layout that can be bindings to a data source for the purpose of getting information for further processing.

  • ItemsSource="{Binding Items}": Connects Items collection with the StackLayout.
  • ItemTemplate: Applications define how each item is displayed, in this example a Label with a data binding.

Summary

  • VerticalStackLayout: Stacks elements vertically.
  • HorizontalStackLayout: Stacks elements horizontally.
  • StackLayout: They can be orientated vertically or horizontally due to the Orientation property.
  • AbsoluteLayout: Embeds objects based on certain co-ordinates.
  • FlexLayout: In addition to the rows, columns and wrapping, also allows the use of a layout similar to the CSS Flexbox.
  • Grid: Places elements in repetitions by rows and columns in the similar manner as in a table.
  • BindableLayout: A UI control that links information to a design, producing views in accordance with a data source.

maui

, , ,