Учебник по StackLayout в Xamarin.Forms

Статья
Developer (Начальный уровень)
10 мин до завершения

Прежде чем работать с этим учебником, вы должны выполнить:

Краткое руководство Создание первого Xamarin.Forms приложения.

В этом руководстве описано следующее:

Создайте Xamarin.FormsStackLayout в XAML.
Задавать ориентацию StackLayout.
Задавать выравнивание дочернего представления и расширения в StackLayout.

С помощью Visual Studio 2019 или Visual Studio для Mac вы создадите простое приложение, демонстрирующее, как выравнивать элементы управления в StackLayout. На следующих снимках экрана показано готовое приложение.

Вы также будете использовать Горячую перезагрузку XAML для Xamarin.Forms, чтобы просматривать изменения пользовательского интерфейса без перестроения приложения.

Создание StackLayout

Осталось 9 мин

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

Visual Studio
Visual Studio для Mac

Для работы с этим руководством у вас должен быть последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET. Кроме того, вам потребуется компьютер Mac для сборки учебного приложения на iOS. Сведения об установке платформы Xamarin см. в статье Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Запустите Visual Studio и создайте новое пустое приложение Xamarin.Forms, присвоив ему имя StackLayoutTutorial.

Внимание

Для фрагментов кода на C# и XAML в этом руководстве необходимо решение с именем StackLayoutTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений в проекте StackLayoutTutorial дважды щелкните файл MainPage.xaml, чтобы открыть его. В MainPage.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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из трех экземпляров Label в StackLayout. StackLayout размещает свои дочерние представления (экземпляры Label) в одну строку, которая по умолчанию ориентирована вертикально. Кроме того, свойство Margin указывает позицию отрисовки StackLayout в ContentPage.

Примечание.

В дополнение к свойству Margin, свойства Padding и Spacing также могут быть установлены на StackLayout. Значение свойства Padding задает расстояние между представлениями в StackLayout, а значение свойства Spacing задает объем пространства между каждым дочерним элементом в StackLayout. Дополнительные сведения см. в статье Поля и заполнение.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Дополнительные сведения о StackLayout см. в статье Xamarin.Forms StackLayout.

Для работы с этим руководством вам нужно установить Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS. Кроме того, вам потребуется Xcode (последний выпуск). Дополнительные сведения об установке платформы Xamarin см. в статье Установка Xamarin.

Запустите Visual Studio для Mac и создайте новое пустое приложение Xamarin.Forms, присвоив ему имя StackLayoutTutorial.

Внимание

Для фрагментов кода на C# и XAML в этом руководстве необходимо решение с именем StackLayoutTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
На Панели решений в проекте StackLayoutTutorial дважды щелкните файл MainPage.xaml, чтобы открыть его. В MainPage.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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из трех экземпляров Label в StackLayout. StackLayout размещает свои дочерние представления (экземпляры Label) в одну строку, которая по умолчанию ориентирована вертикально. Кроме того, свойство Margin указывает позицию отрисовки StackLayout в ContentPage.

Примечание.

В дополнение к свойству Margin, свойства Padding и Spacing также могут быть установлены на StackLayout. Значение свойства Padding задает расстояние между представлениями в StackLayout, а значение свойства Spacing задает объем пространства между каждым дочерним элементом в StackLayout. Дополнительные сведения см. в статье Поля и заполнение.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

Дополнительные сведения о StackLayout см. в статье Xamarin.Forms StackLayout.

Указание ориентации

Осталось 6 мин

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление StackLayout, чтобы выровнять его дочерние элементы по горизонтали, а не по вертикали:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

В этом коде свойству Orientation присваивается значение Horizontal.

Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android:

Обратите внимание, что экземпляры Label в StackLayout теперь выровнены по горизонтали, а не по вертикали.

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

В этом коде свойству Orientation присваивается значение Horizontal.

Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android:

Обратите внимание, что экземпляры Label в StackLayout теперь выровнены по горизонтали, а не по вертикали.

Указание выравнивания и расширения

Осталось 4 мин

Размер и положение дочерних представлений в StackLayout зависят от значений свойств HeightRequest и WidthRequest дочерних представлений и значений свойств HorizontalOptions и VerticalOptions.

Свойства HorizontalOptions и VerticalOptions могут задаваться для полей из структуры LayoutOptions, которая инкапсулирует две настройки макета:

Выравнивание — настройки выравнивания дочернего представления, которые определяют его положение и размер в рамках родительского макета.
Расширение — указывает, должно ли дочернее представление использовать дополнительное пространство, если оно доступно (используется только StackLayout).

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление StackLayout, чтобы задать параметры выравнивания и расширения для каждого Label:
```
<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>
```
Этот код задает параметры выравнивания для первых четырех экземпляров Label и параметры расширения для последних четырех экземпляров Label. Поля Start, Center, End и Fill используются для определения выравнивания экземпляров Label в родительском элементе StackLayout. Поля StartAndExpand, CenterAndExpand, EndAndExpand и FillAndExpand используются для определения параметров выравнивания и указывают, будет ли представление занимать больше места, если оно доступно в родительском элементе StackLayout.

Примечание.

Значение по умолчанию свойств представления HorizontalOptions и VerticalOptions — Fill.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android:

StackLayout учитывает только параметры выравнивания дочерних представлениях, которые находятся в направлении, противоположном ориентации StackLayout. Поэтому дочерние представления Label в StackLayout с вертикальной ориентацией получают свойства HorizontalOptions в соответствии с одним из следующих полей выравнивания:
- Start — располагает Label в левой части StackLayout.
- Center — располагает Label в центре StackLayout.
- End — располагает Label в правой части StackLayout.
- Fill — гарантирует, что Label заполняет ширину StackLayout.
StackLayout может развернуть дочерние представления только в направлении своей ориентации. Поэтому StackLayout в вертикальной ориентации может развернуть дочерние представления Label, которые задают свои свойства VerticalOptions одному из полей выравнивания. Это означает, что для вертикального выравнивания каждый Label занимает одинаковый объем пространства в StackLayout. Но только последний Label со значением свойства VerticalOptions, равным FillAndExpand, имеет другой размер.

Внимание

Когда все пространство в StackLayout занято, параметр расширения ни на что не влияет.

В Visual Studio остановите приложение.

Дополнительные сведения о выравнивании и расширении см. в статье Параметры макета в Xamarin.Forms.

В MainPage.xaml измените объявление StackLayout, чтобы задать параметры выравнивания и расширения для каждого Label:
```
<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>
```
Этот код задает параметры выравнивания для первых четырех экземпляров Label и параметры расширения для последних четырех экземпляров Label. Поля Start, Center, End и Fill используются для определения выравнивания экземпляров Label в родительском элементе StackLayout. Поля StartAndExpand, CenterAndExpand, EndAndExpand и FillAndExpand используются для определения параметров выравнивания и указывают, будет ли представление занимать больше места, если оно доступно в родительском элементе StackLayout.

Примечание.

Значение по умолчанию свойств представления HorizontalOptions и VerticalOptions — Fill.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android:

StackLayout учитывает только параметры выравнивания дочерних представлениях, которые находятся в направлении, противоположном ориентации StackLayout. Поэтому дочерние представления Label в StackLayout с вертикальной ориентацией получают свойства HorizontalOptions в соответствии с одним из следующих полей выравнивания:
- Start — располагает Label в левой части StackLayout.
- Center — располагает Label в центре StackLayout.
- End — располагает Label в правой части StackLayout.
- Fill — гарантирует, что Label заполняет ширину StackLayout.
StackLayout может развернуть дочерние представления только в направлении своей ориентации. Поэтому StackLayout в вертикальной ориентации может развернуть дочерние представления Label, которые задают свои свойства VerticalOptions одному из полей выравнивания. Это означает, что для вертикального выравнивания каждый Label занимает одинаковый объем пространства в StackLayout. Но только последний Label со значением свойства VerticalOptions, равным FillAndExpand, имеет другой размер.

Внимание

Когда все пространство в StackLayout занято, параметр расширения ни на что не влияет.

В Visual Studio для Mac остановите приложение.

Дополнительные сведения о выравнивании и расширении см. в статье Параметры макета в Xamarin.Forms.

Поделиться через

Учебник по StackLayout в Xamarin.Forms

Создание StackLayout

Указание ориентации

Указание выравнивания и расширения

Поздравляем!

Следующие шаги

Поделиться через

Учебник по StackLayout в Xamarin.Forms

Создание StackLayout

Указание ориентации

Указание выравнивания и расширения

Поздравляем!

Следующие шаги

Дополнительные ссылки