Сводка Глава 17.Summary of Chapter 17. Совершенствование навыков работы в сеткеMastering the Grid

Загрузить образец загрузить примерDownload Sample Download the sample

Grid — Это набор мощных механизм, который упорядочивает его дочерние элементы в строки и столбцы ячеек.The Grid is a powerful layout mechanism that arranges its children into rows and columns of cells. В отличие от HTML-код, аналогичный table элемент, Grid , предназначенное исключительно для целей макета, а не презентации.Unlike the similar HTML table element, the Grid is solely for purposes of layout rather than presentation.

Основные сеткиThe basic Grid

Grid является производным от Layout<View> , который определяет Children свойство, Grid наследует.Grid derives from Layout<View>, which defines a Children property that Grid inherits. Вы можете заполнить эту коллекцию на XAML или кода.You can fill this collection in either XAML or code.

Сетка в XAMLThe Grid in XAML

Определение Grid в XAML обычно начинается с заполнения RowDefinitions и ColumnDefinitions коллекции Grid с RowDefinition и ColumnDefinition объектов.The definition of a Grid in XAML generally begins with filling the RowDefinitions and ColumnDefinitions collections of the Grid with RowDefinition and ColumnDefinition objects. Это, как установить число строк и столбцов Gridи их свойства.This is how you establish the number of rows and columns of the Grid, and their properties.

RowDefinition имеет Height свойство и ColumnDefinition имеет Width свойство, оба типа GridLength , структуру.RowDefinition has a Height property and ColumnDefinition has a Width property, both of type GridLength, a structure.

В XAML GridLengthTypeConverter преобразует простые текстовые строки в GridLength значения.In XAML, the GridLengthTypeConverter converts simple text strings into GridLength values. На самом деле GridLength конструктор создает GridLength значение, основанное на число и значение типа GridUnitType , перечисление с тремя элементами:Behind the scenes, the GridLength constructor creates the GridLength value based on a number and a value of type GridUnitType, an enumeration with three members:

  • Absolute — Ширина или высота задается в аппаратно независимых единицах (число в XAML)Absolute — the width or height is specified in device-independent units (a number in XAML)
  • Auto — Высота или ширина будет определяться автоматически, основываясь на содержимом ячейки («Auto» в XAML)Auto — the height or width is autosized based on cell contents ("Auto" in XAML)
  • Star — Оставшиеся высоты или ширины распределяется пропорционально (число с "*«, который называется типа" звезда ", в XAML)Star — leftover height or width is allocated proportionally (a number with "*", called star, in XAML)

Каждый дочерний элемент элемента Grid также должен быть назначен строк и столбцов (явно или неявно).Each child of the Grid must also be assigned a row and column (either explicitly or implicitly). Охватывает строки и столбца диапазонов являются необязательными.Row spans and column spans are optional. Они все указываются с помощью присоединенного свойства связывания — свойства, которые определяются Grid но устанавливаться для дочерних элементов Grid.These are all specified using attached bindable properties — properties that are defined by the Grid but set on children of the Grid. Grid Определяет четыре статических присоединенного привязываемые свойства:Grid defines four static attached bindable properties:

  • RowProperty — Отсчитываемый от нуля строку; значение по умолчанию — 0RowProperty — the zero-based row; default is 0
  • ColumnProperty — Отсчитываемый от нуля столбец; значение по умолчанию — 0ColumnProperty — the zero-based column; default is 0
  • RowSpanProperty — число строк распространяется на дочерние; по умолчанию — 1RowSpanProperty — the number of rows the child spans; default is 1
  • ColumnSpanProperty — число столбцов распространяется на дочерние; по умолчанию — 1ColumnSpanProperty — the number of columns the child spans; default is 1

В коде программа может использовать восемь статические методы для задания и получения этих значений:In code, a program can use eight static methods to set and get these values:

В XAML о настройке этих значений можно использовать следующие атрибуты:In XAML you use the following attributes for setting these values:

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

SimpleGridDemo в нем демонстрируется создание и инициализация Grid в XAML.The SimpleGridDemo sample demonstrates creating and initializing a Grid in XAML.

Grid Наследует Padding свойства из Layout и определяет две дополнительные свойства, которые предоставляют расстояние между строками и столбцами:The Grid inherits the Padding property from Layout and defines two additional properties that provide spacing between the rows and columns:

RowDefinitions И ColumnDefinitions коллекции не является обязательным.The RowDefinitions and ColumnDefinitions collections aren't strictly required. Если значение отсутствует, Grid создает строки и столбцы для Grid дочерних элементов и присваивает им все значения по умолчанию GridLength из "*" (звездочка).If absent, the Grid creates rows and columns for the Grid children and gives them all a default GridLength of "*" (star).

Сетка в кодеThe Grid in code

GridCodeDemo образце показано, как создать и заполнить Grid в коде.The GridCodeDemo sample demonstrates how to create and populate a Grid in code. Вложенные свойства можно задать для каждого дочернего напрямую или косвенно путем вызова дополнительных Add методы, такие как Add определяется Grid.IGridList интерфейс.You can set the attached properties for each child directly, or indirectly by calling additional Add methods such as Add defined by the Grid.IGridList interface.

На линейчатой диаграмме сеткиThe Grid bar chart

GridBarChart образце показано, как добавить несколько BoxView элементы Grid с помощью массового AddHorizontal метод.The GridBarChart sample shows how to add multiple BoxView elements to a Grid using the bulk AddHorizontal method. По умолчанию эти BoxView элементы имеют равные ширину.By default, these BoxView elements have equal width. Высота каждой BoxView можно управлять, чтобы он напоминал линейчатую диаграмму.The height of each BoxView can then be controlled to resemble a bar chart.

Grid В GridBarChart пример общих папок AbsoluteLayout родительскому с первоначально невидимо Frame.The Grid in the GridBarChart sample shares an AbsoluteLayout parent with an initially invisible Frame. Программа также задает TapGestureRecognizer на каждом BoxView использовать Frame для отображения сведений о строке полученные.The program also sets a TapGestureRecognizer on each BoxView to use the Frame to display information about the tapped bar.

Выравнивание в сеткеAlignment in the Grid

GridAlignment образце показано, как использовать VerticalOptions и HorizontalOptions свойства для выравнивания дочерних элементов в Grid ячейки.The GridAlignment sample demonstrates how to use the VerticalOptions and HorizontalOptions properties to align children in a Grid cell.

SpacingButtons одинаково пример пробелы Button по центру элементы Grid ячеек.The SpacingButtons sample equally spaces Button elements centered in Grid cells.

Разделители ячеек и границыCell dividers and borders

Grid Не включает функцию, которая рисует разделителей ячейки или границы.The Grid does not include a feature that draws cell dividers or borders. Тем не менее можно создать свой собственный.However, you can make your own.

GridCellDividers демонстрируется определение дополнительных строк и столбцов, специально для тонкая BoxView элементов для имитации разделительной линии.The GridCellDividers demonstrates how to define additional rows and column specifically for thin BoxView elements to mimic dividing lines.

GridCellBorders программа не создает дополнительные ячейки, но вместо этого выравнивает BoxView элементов в каждой ячейке, чтобы имитировать границы ячейки.The GridCellBorders program does not create any additional cells but instead aligns BoxView elements in each cell to mimic a cell border.

Почти сетки примеры из реальной жизниAlmost real-life Grid examples

KeypadGrid примере используется Grid для отображения с клавиатурой:The KeypadGrid sample uses a Grid to display a keypad:

Тройной снимок экрана сетки клавиатуреTriple screenshot of Keypad Grid

Реагирование на изменения ориентацииResponding to orientation changes

Grid Может помочь структура программы реагировать на изменение ориентации.The Grid can help structure a program to respond to orientation changes. GridRgbSliders примере показан способ, который перемещает элемент между второй строкой телефона ориентированных на книжной и альбомной ориентацией телефона во втором.The GridRgbSliders sample demonstrates a technique that moves an element between a second row of a portrait-oriented phone and the second column of a landscape-oriented phone.

Инициализирует программу Slider элементов в диапазоне от 0 до 255, и привязок данных использует для отображения значения ползунков в шестнадцатеричном формате.The program initializes Slider elements to a range of 0 to 255, and uses data bindings to display the value of the sliders in hexadecimal. Так как Slider значения представлены плавающими, точки, а также для шестнадцатеричного работает только с целыми числами, строку форматирования платформы .NET DoubleToIntConvert в класс Xamarin.FormsBook.Toolkit библиотеки на помощь.Because the Slider values are floating point, and the .NET formatting string for hexadecimal only works with integers, a DoubleToIntConvert class in the Xamarin.FormsBook.Toolkit library helps out.