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

Элементы компоновки

В Xamarin мы можем использовать ряд элементов. Их объединяет то, что все они унаследованы от общего класса View и поэтому наследуют ряд общих свойств.

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

Для определения содержимого страницы класс страницы ContentPage имеет свойство Content. По умолчанию этому свойству присваивается один элемент Label.

Но свойство Content имеет ограничение - для него можно установить только один элемент. И чтобы помещать на страницу сразу несколько элементов, нам надо исользовать один из элементов компоновки. Элемент компоновки представляет класс, который наследуется от базового класса Layout<T>:

• StackLayout

• AbsoluteLayout

• RelativeLayout

• Grid

• FlexLayout

Все элементы компоновки имеют свойство Children, позволяющее задать или получить вложенные элементы.

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

public class MainPage : ContentPage
{
    public MainPage()
    {
        Label label1 = new Label() { Text = "Первая метка" };
        Label label2 = new Label() { Text = "Вторая метка" };

        StackLayout stackLayout = new StackLayout()
        {
            Children = {label1, label2}
        };

        this.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 x:Name="stackLayout">
    <StackLayout.Children>
      <Label Text="Первая метка" />
      <Label Text="Вторая метка" />
    </StackLayout.Children>
  </StackLayout>
</ContentPage>

Либо даже сократить:

<StackLayout x:Name="stackLayout">
    <Label Text="Первая метка" />
    <Label Text="Вторая метка" />
</StackLayout>

Поскольку коллекция Children представляет собой обычный список, то он поддерживает операции по управлению элементами. В частности, мы можем динамически добавить новые элементы. Например:

stackLayout.Children.Add(new Label { Text = "Третья метка" });

Хотя в данном случае коллекция элементов рассматривалась на примере контейнера StackLayout, но тот же принцип работы с элементами будет характерен и для других элементов компоновки.