Сводка по главе 17. Достигаем мастерства в использовании класса Grid
Скачайте примерПримечание.
Эта книга была опубликована весной 2016 года и с тех пор не обновлялась. Многое в этой книге остается ценным, но некоторые материалы устарели, а некоторые разделы перестали быть полностью верными или полными.
Grid — мощный механизм макета, который позволяет упорядочить дочерние элементы по строкам и столбцам ячеек. В отличие от аналогичного HTML-элемента table, Grid используется исключительно для макета, а не для представления.
Базовое использование Grid
Класс Grid является производным от класса Layout<View>, определяющего свойство Children, которое наследует Grid. Эту коллекцию можно заполнить в XAML или в коде.
Grid в XAML
Определение Grid в XAML обычно начинается с заполнения коллекций RowDefinitions и ColumnDefinitions класса Grid объектами RowDefinition и ColumnDefinition. Таким способом вы устанавливаете количество строк и столбцов Grid, а также их свойства.
RowDefinition имеет свойство Height, а ColumnDefinition имеет свойство Width. Тип обоих — GridLength, структура.
В XAML GridLengthTypeConverter преобразует простые текстовые строки в значения GridLength. В фоновом режиме конструктор GridLength создает значение GridLength на основе числа и значения типа GridUnitType, перечисления с тремя членами:
Absolute— ширина или высота указывается в единицах, независимых от устройства (число в XAML)Auto— высота или ширина автоматически определяется с учетом содержимого ячейки ("Авто" в XAML)Star— слева высота или ширина выделены пропорционально (число с "*", называемое звездой, в XAML)
Каждому дочернему элементу Grid также необходимо назначить строку и столбец (явно или неявно). Диапазоны строк и столбцов являются необязательными. Все они указываются с помощью присоединенных привязываемых свойств — свойств, определенных но заданными дочерними Grid элементами Grid. Grid определяет четыре статических присоединенных свойства с возможностью привязки:
RowProperty— отсчитываемая от нуля строка; Значение по умолчанию — 0ColumnProperty— столбец с нуля; Значение по умолчанию — 0RowSpanProperty— количество строк дочерних диапазонов; Значение по умолчанию — 1ColumnSpanProperty— количество столбцов дочерних диапазонов; Значение по умолчанию — 1
В коде программа может использовать восемь статических методов для установки и получения этих значений:
Grid.SetRowиGrid.GetRowGrid.SetColumnиGrid.GetColumnGrid.SetRowSpanиGrid.GetRowSpanGrid.SetColumnSpanиGrid.GetColumnSpan
В XAML для установки этих значений используются следующие атрибуты:
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
В примере SimpleGridDemo демонстрируется создание и инициализация Grid в XAML.
Grid наследует свойство Padding от Layout и определяет два дополнительных свойства, которые обеспечивают интервал между строками и столбцами:
RowSpacing— по умолчанию имеет значение 6.ColumnSpacing— по умолчанию имеет значение 6.
Коллекции RowDefinitions и ColumnDefinitions не являются строго обязательными. Если нет, Grid создаются строки и столбцы для Grid дочерних элементов и предоставляются все значения по умолчанию GridLength "*" (звезда).
Grid в коде
В примере GridCodeDemo показано, как создать и заполнить Grid в коде. Можно задать присоединенные свойства для каждого дочернего объекта напрямую или косвенно, вызвав дополнительные Add методы, такие как Add определяемый интерфейсом Grid.IGridList<T> .
Линейчатая диаграмма Grid
В примере GridBarChart показано, как добавить несколько элементов BoxView в Grid с помощью метода массовой операции AddHorizontal. По умолчанию эти элементы BoxView имеют одинаковую ширину. После этого можно управлять высотой каждого элемента BoxView, чтобы воспроизвести линейчатую диаграмму.
Grid в примере GridBarChart совместно использует родительский элемент AbsoluteLayout с изначально невидимым Frame. Кроме того, программа задает TapGestureRecognizer в каждом элементе BoxView, чтобы с помощью Frame выводились сведения о том, что панели коснулись.
Выравнивание в Grid
В примере GridAlignment показано, как с помощью свойств VerticalOptions и HorizontalOptions выровнять дочерние элементы в ячейке Grid.
В примере SpacingButtons между элементами Button, центрированными в ячейках Grid, устанавливаются одинаковые пробелы.
Разделители и границы ячеек
Grid не включает функцию, которая отвечает за отображение разделителей или границ ячеек. Но вы можете сделать свою собственную.
GridCellDividers демонстрирует, как определить дополнительные строки и столбцы специально для тонких элементов BoxView, чтобы имитировать разделительные линии.
Программа GridCellBorders не создает никаких дополнительных ячеек. Вместо этого она позволяет выровнять элементы BoxView в каждой ячейке, чтобы имитировать ее границу.
Примеры Grid практически в реальном времени
В примере KeypadGrid с помощью Grid отображается клавиатура:
Реагирование на изменения ориентации
Grid может помочь структурировать программу для реагирования на изменения ориентации. Пример GridRgbSliders демонстрирует прием, который позволяет переместить элемент между второй строкой телефона в портретной ориентации и вторым столбцом телефона в альбомной ориентации.
Программа инициализирует элементы Slider в диапазоне от 0 до 255 и с помощью привязок данных выводит значения ползунков в шестнадцатеричном виде. Значения Slider являются числами с плавающей запятой, а строка форматирования .NET для шестнадцатеричного формата применяется только с целыми числами. В этой ситуации поможет класс DoubleToIntConvert из библиотеке Xamarin.FormsBook.Toolkit.