Позиционирование элементов на странице

Отступы

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

Например, зададим оба отступа в XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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>

Установка в коде C#:

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

Кроме того, структура Thickness имеет свойства Left, Top, Right, Bottom, поэтому задать ее определение мы можем тремя способами:

• Указать одно значение для отступов со всех сторон

• Указать два значения для отступов по горизонтали (слева и справа) и вертикали (сверху и снизу)

• Указать четыре значение для отступов для каждой из сторон

Установка в коде:

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

Определение в XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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 = "Привет из Xamarin Forms" };
        this.Content = header;
        if(Device.RuntimePlatform == Device.iOS) 
			Padding = new Thickness(0, 20, 0, 0);
    }
}

В данном случае с помощью значения Device.RuntimePlatform мы можем получить текстовую метку текущей платформы (например, "iOS", "Android" и т.д.), на которой запущено приложение, и сравнить ее. Константа "Device.iOS" фактически хранит значение "iOS". То есть, если текущая платформа - iOS, установить определенный отступ.

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

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

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

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

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

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

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

• StartAndExpand: аналогичен опции Start с применением растяжения

• CenterAndExpand: аналогичен опции Center с применением растяжения

• EndAndExpand: аналогичен опции End с применением растяжения

• FillAndExpand: аналогичен опции Fill с применением растяжения

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

Label header = new Label() { Text = "Привет из Xamarin Forms" };
header.VerticalOptions = LayoutOptions.Center;
header.HorizontalOptions = LayoutOptions.Center;

Аналог в xaml:

<Label Text="Привет из Xamarin Forms" VerticalOptions="Center" HorizontalOptions="Center" />

Выравнивание текста внутри элемента

Выравнивание текста по горизонтали и вертикали задается с помощью свойств HorizontalTextAlignment и VerticalTextAlignment соответственно. В качестве значения эти свойства принимают одну из констант перечисления TextAlignment:

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

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

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

Пример на c#:

Label header = new Label() { Text = "Привет из Xamarin Forms" };
header.HorizontalTextAlignment = TextAlignment.Center;
header.VerticalTextAlignment = TextAlignment.Center;

В xaml:

<Label Text="Привет из Xamarin Forms" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />