StackLayout и ScrollView

StackLayout

StackLayout определяет размещение элементов в виде горизонтального или вертикального стека. Для позиционирования элементо он определяет два свойства:

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

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

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

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

        StackLayout stackLayout = new StackLayout()
        {
            Children = {label1, label2, label3}
        };
        stackLayout.Spacing = 8;
        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" Spacing="8">
    <Label Text="Первая метка" TextColor="Red"  />
    <Label Text="Вторая метка" TextColor="Blue" />
    <Label Text="Третья метка" TextColor="Green" />
  </StackLayout>
</ContentPage>

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

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

stackLayout.Orientation = StackOrientation.Horizontal;

Или в xaml:

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

ScrollView

При создании стека или любого другого элемента компоновки может сложиться ситуация, когда не все элементы будут помещаться на экране. В этом случае необходимо создать прокрутку с помощью элемента ScrollView:

class MainPage : ContentPage
{
    public MainPage()
    {
        StackLayout stackLayout = new StackLayout();
        for (int i = 1; i < 20; i++)
        {
            Label label = new Label
            {
                Text = "Метка " + i,
                FontSize = 23
            };
            stackLayout.Children.Add(label);
        }
        ScrollView scrollView = new ScrollView();
        scrollView.Content = stackLayout;
        this.Content = scrollView;
    }
}

Или в 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">
<ScrollView>
    <StackLayout>
      <Label Text="Метка 1" FontSize="23" />
      <Label Text="Метка 2" FontSize="23" />
	  <!--..................................................-->
      <Label Text="Метка 20" FontSize="23" />
    </StackLayout>
  </ScrollView>
</ContentPage>