Свойства размеров и позиционировния XAML-элементов

В XAML элементы могут иметь достаточно большое количество различных свойств. Однако только часть из них отвечает за размеры и позиционирование элемента, то есть за то где XAML-элемент будет расположен и как. В этой части мы рассмотрим основные свойства размеров и позиционироваться XAML-элементов.

Свойства размеров XAML-элементов

Вначале рассмотрим свойства размеров XAML-элементов, основные из которых показаны в таблице ниже.

public double Height { get; }

public double Width { get; }

public double HeightRequest { get; set; }

public double WidthRequest { get; set; }

public double MaximumHeightRequest { get; set; }

public double MaximumWidthRequest { get; set; }

public double MinimumHeightRequest { get; set; }

public double MinimumWidthRequest { get; set; }

По умолчанию, при построении макета приложения учитываются не только указанные выше свойства XAML-элемента, но и свойства элемента, который выступает в роли контейнера содержимого. Так, если XAML-элемент помещается непосредственно на страницу приложения, то он растягивается таким образом, чтобы занять всё доступное пространство. Например, создадим новое приложение .NET MAUI и изменим код страницы MainPage.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="MauiApp2.MainPage">

    <Button Text="Click Me"/>

</ContentPage>

Здесь кнопка (Button) размещена непосредственно на странице ContentPage. Поэтому, если мы запустим приложение, то увидим следующее расположение кнопки:

Теперь воспользуемся свойствами HeightRequest и WidthRequest, чтобы изменить высоту и ширину кнопки:

<?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="MauiApp2.MainPage">

    <Button Text="Click Me" 
            HeightRequest="30"
            WidthRequest="120"/>

</ContentPage>

Теперь кнопка будет также пытаться растянуться на всё доступное пространство страницы, но благодаря установленным свойствам длины и ширины, её размеры будут ограничены. В результате мы увидим, что наша кнопка будет расположена точно по центру страницы:Свойства HeightRequest и WidthRequest игнорируются, если их значения выходят за пределы, установленные свойствами MaximumHeightRequest,MaximumWidthRequest, MinimumHeightRequest и MinimumWidthRequest. Например, изменим объявление нашей кнопки следующим образом:

<?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="MauiApp2.MainPage">

    <Button Text="Click Me" 
            HeightRequest="60"
            WidthRequest="120" 
            MaximumHeightRequest="30"
            MaximumWidthRequest="30"
            MinimumHeightRequest="5" 
            MinimumWidthRequest="5"/>
   
</ContentPage>

Теперь наша кнопка будет выглядеть следующим образом:

Что касается свойств Height и Width, то эти свойства только возвращают значение высоты и ширины элемента и воспользоваться ими возможно непосредственно в коде C# приложения.

Свойства позиционирования XAML-элементов

Теперь рассмотрим основные свойства позиционирования XAML-элементов.

public LayoutOptions HorizontalOptions { get; set; }

public LayoutOptions VerticalOptions { get; set; }

public Thickness Margin { get; set; }

public Thickness Padding { get; set; }

Что касается свойств HorizontalOptions и VerticalOptions, то они представляют собой структуру LayoutOptions, которая содержит следующие поля:

Вернемся к нашему приложению и изменим свойства кнопки следующим образом:

<Button Text="Click Me" 
        WidthRequest="120" 
        HorizontalOptions="Fill"
        VerticalOptions="Start" />

Обратите внимание — мы пытаемся «растянуть» кнопку по горизонтали, но одновременно с этим, задаем значение свойству WidthRequest. В результате, значение свойства HorizontalOptions будем проигнорировано и мы увидим на экране следующее расположение кнопки:При этом, если убрать свойство WidthRequest, то кнопка растянется по всей ширине страницы:

<Button Text="Click Me" 
        HorizontalOptions="Fill"
        VerticalOptions="Start" />

Чтобы продемонстрировать работу свойств Margin и Padding, изменим 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="MauiApp2.MainPage"  >

    <Border Background="Red" 
            Margin="50" 
            Padding="30">
        
        <Button Text="Click Me" 
        HorizontalOptions="Fill"
        VerticalOptions="Fill" />
        
    </Border>
   
</ContentPage>

Теперь кнопка располагается внутри элемента Border, у которого установлен красный цвет фона (для наглядности), а также свойства Margin и Padding. Теперь запустим приложение и посмотрим на результат:

Свойства Margin и Padding можно указывать различными способами. Так, в примере выше, мы указали для этих свойств по одному значению. Это означает, что по всем сторонам элемента будут установлены равные отступы. Изменим значение Margin следующим образом:

<Border Background="Red" 
        Margin="50, 90" 
        Padding="30">
    
    <Button Text="Click Me" 
    HorizontalOptions="Fill"
    VerticalOptions="Fill" />
    
</Border>

Теперь первое значение в свойстве Margin определяет отступы слева и справа, а второе — сверху и снизу. И, наконец, мы можем указать все четыре отступа:

<Border Background="Red" 
        Margin="50, 90, 10, 100" 
        Padding="30">
    
    <Button Text="Click Me" 
    HorizontalOptions="Fill"
    VerticalOptions="Fill" />
    
</Border>

Здесь у свойства Margin:

• первое значение — отступ слева
• второе значение — отступ сверху
• третье значение — отступ справа
• четвертое значение — отступ снизу

Аналогичным образом мы можем менять значение и у свойства Padding.

Итого

По умолчанию XAML-элемент пытается занять всё доступное пространство контейнера в котором он располагается. При этом, мы можем изменять размеры элемента, устанавливать позиционирование XAML-элемента по горизонтали и вертикали, а также устанавливать внешние и внутренние отступы для элемента.