Прочитать на английском

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

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

Создание StackLayout

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

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

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

    Важно!

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

    Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.

  2. В обозревателе решений в проекте 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. Дополнительные сведения см. в статье Поля и заполнение.

  3. На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

    Снимок экрана: дочерние представления в StackLayout в iOS и Android

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