Контейнеры компоновки

StackLayout, HorizontalStackLayout и VerticalStackLayout

.NET MAUI страница в качестве содержимого принимает один из контейнеров компоновки, в который в свою очередь помещаются стандартные визуальные элементы типа кнопок и текстовых полей, а также другие элементы компоновки. Контейнеры компоновки позволяют скомпоновать содержимое, расположить его определенным образом.

Элемент компоновки представляет класс, который наследуется от базового класса Layout<T>. В .NET MAUI есть следующие элементы компоновки:

• StackLayout и ее разновидности HorizontalStackLayout и VerticalStackLayout

• AbsoluteLayout

• Grid

• FlexLayout

StackLayout

Элемент компоновки StackLayout упорядочивает вложенные элементы вряд по горизонтали или по вертикали. Для позиционирования элементов он определяет два свойства:

• Orientation: определяет ориентацию стека - вертикальный или горизонтальный

• Spacing: устанавливает пространство между элементами в стеке, по молчанию равно 6 единицам

Например, создадим вертикальный стек элементов Label в коде C#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Label label1 = new Label()
            {
                Text = "Первая метка",
                TextColor = Colors.Red
            };
            Label label2 = new Label()
            {
                Text = "Вторая метка",
                TextColor = Colors.Blue
            };
            Label label3 = new Label()
            {
                Text = "Третья метка",
                TextColor = Colors.Green
            };

            StackLayout stackLayout = new StackLayout()
            {
                Children = { label1, label2, label3 }
            };
            stackLayout.Spacing = 5;
            Content = stackLayout;
        }
    }
}

В данном случае Stacklayout содержит три метки. Для каждой метки устанавливается текст и цвет текст (свойство TextColor). Чтобы добавить элементы в StackLayout они передаются в его свойству Children. Чтобы между метками было некоторое пространство, у StackLayout устанавливается свойство Spacing

Аналогично в XAML мы могли бы написать:

<?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="HelloApp.MainPage">
    <StackLayout Spacing="5">
        <Label Text="Первая метка" TextColor="Red" />
        <Label Text="Вторая метка" TextColor="Blue" />
        <Label Text="Третья метка" TextColor="Green" />
    </StackLayout>
</ContentPage>

Следует отметить, что в XAML необязательно явным образом прописывать свойство Children - все элементы управления, которые помещаются внутрь StackLayout, фактически передаются в свойство Children.

По умолчанию создается вертикальный стек элементов. Чтобы создать горизонтальный стек, нам надо присвоить свойству Orientation значение StackOrientation.Horizontal:

stackLayout.Orientation = StackOrientation.Horizontal;

Или в xaml:

<StackLayout Spacing="5" Orientation="Horizontal">
  <Label Text="Первая метка" TextColor="Red"  />
  <Label Text="Вторая метка" TextColor="Blue" />
  <Label Text="Третья метка" TextColor="Green" />
</StackLayout>

VerticalStackLayout и HorizontalStackLayout

Вместо StackLayout можно использовать уже готовые версии стека для разных ориентаций: VerticalStackLayout (стек по вертикали) и HorizontalStackLayout (стек по горизонтали). Они используются аналогичным образом за тем исключением, что они естественно не применяют свойство Orientation.

Применение VerticalStackLayout в коде C#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Label label1 = new Label()
            {
                Text = "Первая метка",
                TextColor = Colors.Red
            };
            Label label2 = new Label()
            {
                Text = "Вторая метка",
                TextColor = Colors.Blue
            };
            Label label3 = new Label()
            {
                Text = "Третья метка",
                TextColor = Colors.Green
            };

            VerticalStackLayout stackLayout = new VerticalStackLayout()
            {
                Children = { label1, label2, label3 }
            };
            stackLayout.Spacing = 5;
            Content = stackLayout;
        }
    }
}

Или в xaml:

<VerticalStackLayout Spacing="5">
  <Label Text="Первая метка" TextColor="Red"  />
  <Label Text="Вторая метка" TextColor="Blue" />
  <Label Text="Третья метка" TextColor="Green" />
</VerticalStackLayout>

Применение HorizontalStackLayout аналогично.