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

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

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

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

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

Создайте Xamarin.FormsGrid в XAML.
Указывать столбцы и строки для Grid.
Разделять содержимое на несколько столбцов или строк в Grid.

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

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

Создание контейнера Grid

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

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

Visual Studio
Visual Studio для Mac

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

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

Внимание

Фрагменты кода на C# и XAML из этого руководства предполагают, что решение называется GridTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений дважды щелкните файл MainPage.xaml в проекте GridTutorial, чтобы открыть его. В 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="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Label в Grid. По умолчанию Grid помещает свои дочерние представления в одном месте. Таким образом, Grid, который содержит несколько дочерних элементов, должен указывать столбцы и строки, которые будут рассматриваться в следующем упражнении. Кроме того, свойство Margin указывает позицию отрисовки Grid в ContentPage.

Примечание.

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

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

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

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

Внимание

Фрагменты кода на C# и XAML из этого руководства предполагают, что решение называется GridTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
На Панели решения дважды щелкните файл MainPage.xaml в проекте GridTutorial, чтобы открыть его. В 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="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Label в Grid. По умолчанию Grid помещает свои дочерние представления в одном месте. Таким образом, Grid, который содержит несколько дочерних элементов, должен указывать столбцы и строки, которые будут рассматриваться в следующем упражнении. Кроме того, свойство Margin указывает позицию отрисовки Grid в ContentPage.

Примечание.

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

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

Указание столбцов и строк

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

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Grid для определения столбцов и строк и разместите содержимое в столбцах и строках:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Этот код определяет столбцы и строки для Grid и располагает экземпляры Label в конкретных столбцах и строках. Данные столбцов и строк хранятся в свойствах ColumnDefinitions и RowDefinitions, которые являются коллекциями из ColumnDefinition и RowDefinition соответственно. Ширина каждого ColumnDefinition задается свойством ColumnDefinition.Width, высота каждого RowDefinition — свойством RowDefinition.Height. Ниже приведены допустимые значения ширины и высоты.
- Auto, который изменяет размер столбца или строки в соответствии с содержимым.
- Пропорциональные значения, которые задают размер столбцов и строк в долях оставшегося пространства. Пропорциональные значения обозначаются в конце как *.
- Абсолютные значения, которые задают фиксированный размер столбцов или строк.
Таким образом, в приведенном выше коде каждый столбец имеет ширину в половину Grid, а каждая строка имеет высоту в 50 аппаратно-независимых единиц.

Положение каждого Label в Grid указывается с помощью вложенных свойств Grid.Column и Grid.Row, которые используют отсчитываемый от нуля индекс. Таким образом, первый столбец имеет номер 0, и первая строка имеет номер 0. У первого Label эти вложенные свойства отсутствуют, так как дочерние представления, не задающие их, автоматически будут отображаться в столбце 0 и строке 0.

Примечание.

Расстояние между столбцами и строками в Grid можно задать с помощью свойств ColumnSpacing и RowSpacing. Дополнительные сведения см. в разделе Интервалы руководства Grid в Xamarin.Forms.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android:

В MainPage.xaml измените объявление Grid для определения столбцов и строк и разместите содержимое в столбцах и строках:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Этот код определяет столбцы и строки для Grid и располагает экземпляры Label в конкретных столбцах и строках. Данные столбцов и строк хранятся в свойствах ColumnDefinitions и RowDefinitions, которые являются коллекциями из ColumnDefinition и RowDefinition соответственно. Ширина каждого ColumnDefinition задается свойством ColumnDefinition.Width, высота каждого RowDefinition — свойством RowDefinition.Height. Ниже приведены допустимые значения ширины и высоты.
- Auto, который изменяет размер столбца или строки в соответствии с содержимым.
- Пропорциональные значения, которые задают размер столбцов и строк в долях оставшегося пространства. Пропорциональные значения обозначаются в конце как *.
- Абсолютные значения, которые задают фиксированный размер столбцов или строк.
Таким образом, в приведенном выше коде каждый столбец имеет ширину в половину Grid, а каждая строка имеет высоту в 50 аппаратно-независимых единиц.

Положение каждого Label в Grid указывается с помощью вложенных свойств Grid.Column и Grid.Row, которые используют отсчитываемый от нуля индекс. Таким образом, первый столбец имеет номер 0, и первая строка имеет номер 0. У первого Label эти вложенные свойства отсутствуют, так как дочерние представления, не задающие их, автоматически будут отображаться в столбце 0 и строке 0.

Примечание.

Расстояние между столбцами и строками в Grid можно задать с помощью свойств ColumnSpacing и RowSpacing. Дополнительные сведения см. в разделе Интервалы руководства Grid в Xamarin.Forms.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android:

Охват нескольких столбцов и строк

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

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Grid для определения столбцов и записей и разместите содержимое в столбцах и записях:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Этот код определяет столбцы и строки для Grid и располагает экземпляры Label в конкретных столбцах и строках. Первый Label задает вложенное свойство ColumnSpan так, чтобы его текст охватывал несколько столбцов. Свойство ColumnSpan имеет значение 2; оно задает количество столбцов, которые Label будет охватывать. Второй Label задает вложенное свойство RowSpan так, чтобы его текст охватывал несколько строк. Свойство RowSpan имеет значение 2; оно задает количество строк, которые Label будет охватывать.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio клавишу Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android:

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

Дополнительные сведения об объединении столбцов и строк см. в разделе Строки и столбцы руководства Grid в Xamarin.Forms.

В MainPage.xaml измените объявление Grid для определения столбцов и записей и разместите содержимое в столбцах и записях:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Этот код определяет столбцы и строки для Grid и располагает экземпляры Label в конкретных столбцах и строках. Первый Label задает вложенное свойство ColumnSpan так, чтобы его текст охватывал несколько столбцов. Свойство ColumnSpan имеет значение 2; оно задает количество столбцов, которые Label будет охватывать. Второй Label задает вложенное свойство RowSpan так, чтобы его текст охватывал несколько строк. Свойство RowSpan имеет значение 2; оно задает количество строк, которые Label будет охватывать.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android:

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

Дополнительные сведения об объединении столбцов и строк см. в разделе Строки и столбцы руководства Grid в Xamarin.Forms.

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

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

Создание контейнера Grid

Указание столбцов и строк

Охват нескольких столбцов и строк

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

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

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

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

Создание контейнера Grid

Указание столбцов и строк

Охват нескольких столбцов и строк

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

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

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