Элементы управления

Размеры и позиционирование элементов на странице

Ширина и высота

В обычном случае ширина и высота устанавливается контейнером компоновки. Тем не менее в некоторых случаях может потребоваться явным образом установить высоту и ширину. И для этого у визуальных элементов применяются свойства WidthRequest и HeightRequest - они устанавливают соответственно предпочтительную ширину и высоту:

<?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">
    <Grid>
        <Button Text="Click" WidthRequest="100" HeightRequest="50" />
    </Grid>
</ContentPage>

В данном случае для кнопки устанавливается предпочтительная ширина в 100 единиц и предпочтительная высота в 50 единиц

Аналог в коде C#:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        Button button = new Button 
        { 
            WidthRequest = 100, 
            HeightRequest = 50, 
            Text = "Click" 
        };
        Content = new Grid { Children = { button } };
    }
}

Отступы

Для установки отступов у элементов применяются свойства Margin и Padding. Свойство Margin определяет внешний отступ элемента от других элементов или контейнера. А свойство Padding устанавливает внутрение отступы - от внутреннего содержимого элемента до его границ. Оба этих свойства представляют структуру Thickness, которая позволяет определить отступы с помощью одного из своих конструкторов:

public Thickness(double uniformSize);
public Thickness(double horizontalSize, double verticalSize);
public Thickness(double left, double top, double right, double bottom);

Первая версия конструктора задает общий отступ от всех четерех сторон. Вторая форма задает отдельные отступы по горизонтали и вертикали. И третья форма конкретизирует отступы от всех четырех сторон.

Например, установим отступы в коде C#:

class StartPage : ContentPage
{
    public StartPage()
    {
        var stackLayout = new StackLayout
        {
            Padding = new Thickness(60),
            Children = 
            {
                new BoxView { Color = Colors.Blue, Margin = new Thickness (50), HeightRequest = 100 },
                new BoxView { Color = Colors.Red, Margin = new Thickness (50), HeightRequest = 100 }
            }
        };
        Content = stackLayout;
    }
}

Здесь для контейнера StackLayout задается внутренний отступ в 60 единиц (Padding = new Thickness(60)). То есть вложенные элементы будут иметь отступы от границ StackLayout в 60 единиц.

Кроме того, для каждого из двух BoxView задано свойство Margin, которое устанавливает внешний отступ в 50 единиц.

Аналогичный пример в 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 Padding="60">
        <BoxView Color="Blue" Margin="50" HeightRequest="100" />
        <BoxView Color="Red"  Margin="50" HeightRequest="100" />
    </StackLayout>
</ContentPage>

Подобным образом можно использовать и другие конструкторы структуры Thickness для установки отступов. Например, используем все три конструктора в коде C#:

public class StartPage : ContentPage
{
    public StartPage()
    {
        var stackLayout = new StackLayout
        {
            Padding = new Thickness(0, 20, 0, 0),
            Children = {
                new BoxView { Color = Colors.Green, Margin = new Thickness (20) },
                new BoxView { Color = Colors.Blue, Margin = new Thickness (10, 25) },
                new BoxView { Color = Colors.Red, Margin = new Thickness (0, 20, 15, 5) }
            }
        };
		Content = stackLayout;
    }
}

Определение в 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 Padding="0,20,0,0">
        <BoxView Color="Green" Margin="20" />
        <BoxView Color="Blue" Margin="10, 15" />
        <BoxView Color="Red" Margin="0, 20, 15, 5" />
    </StackLayout>
</ContentPage>

В отношении отступов надо учитывать следующий момент: так как на устройствах с iOS верхняя панель занимает 20 единиц, то для iOS желательно устанавливать отступ сверху размером как минимум в 20 единиц, чтобы текст метки не налазил на верхнюю панель.

В этом случае мы можем глобально установить отступ сверху для всех платформ в 20 или более единиц. Либо можно задать отступ непосредственно только для iOS:

public class MainPage : ContentPage
{
    public MainPage()
    {
        Label header = new Label() { Text = "Hello METANIT.COM!" };
            
        Content = header;
        if (DeviceInfo.Platform == DevicePlatform.iOS)
            Padding = new Thickness(0, 20, 0, 0);
    }
}

В данном случае с помощью значения DeviceInfo.Platform мы можем получить данные о текущей платформе в виде структуры DevicePlatform, на которой запущено приложение, и сравнить ее. Значение "DevicePlatform.iOS" означает, что текущая платформа - iOS. И в этом случае можно установить определенный отступ.

Выравнивание по горизонтали и вертикали

Все элементы, используемые при создании интерфейса, наследуются от класса View, который определяет два свойства HorizontalOptions и VerticalOptions. Они управляют выравнивание элемента соответственно по горизонтали и по вертикали.

В качестве значения они принимают структуру LayoutOptions. Данная структура имеет ряд свойств, которые хранят объекты опять же LayoutOptions:

• Start: выравнивание по левому краю (выравнивание по горизонтали) или по верху (выравнивание по вертикали)

• Center: элемент выравнивается по центру

• End: выравнивание по правому краю (выравнивание по горизонтали) или по низу (выравнивание по вертикали)

• Fill: элемент заполняет все пространство контейнера

Зададим выравнивание в коде C#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Label header = new Label() { Text = "Hello METANIT.COM!" };
            header.VerticalOptions = LayoutOptions.Center;
            header.HorizontalOptions = LayoutOptions.Center;

            Content = header;
        }
    }
}

в данном случае метка header располагается ровно по центру (как по горизонтали, так и по вертикали) родительского контейнера, в качестве которого здесь выступает сама страница StartPage.

Пример в 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">

    <Label Text="Hello METANIT.COM" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>