Summary of Chapter 17. Mastering the Grid
- PDF for offline use
- Related Articles:
- Related Samples:
- Related Links:
Let us know how you feel about this
last updated: 2017-11
Grid is a powerful layout mechanism that arranges its children into rows and columns of cells. Unlike the similar HTML
table element, the
Grid is solely for purposes of layout rather than presentation.
The basic Grid
The Grid in XAML
The definition of a
Grid in XAML generally begins with filling the
ColumnDefinitions collections of the
ColumnDefinition objects. This is how you establish the number of rows and columns of the
Grid, and their properties.
In XAML, the
GridLengthTypeConverter converts simple text strings into
GridLength values. 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— the width or height is specified in device-independent units (a number in XAML)
Auto— the height or width is autosized based on cell contents ("Auto" in XAML)
Star— leftover height or width is allocated proportionally (a number with "*", called star, in XAML)
Each child of the
Grid must also be assigned a row and column (either explicitly or implicitly). Row spans and column spans are optional. These are all specified using attached bindable properties — properties that are defined by the
Grid but set on children of the
Grid defines four static attached bindable properties:
RowProperty— the zero-based row; default is 0
ColumnProperty— the zero-based column; default is 0
RowSpanProperty— the number of rows the child spans; default is 1
ColumnSpanProperty— 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:
In XAML you use the following attributes for setting these values:
The SimpleGridDemo sample demonstrates creating and initializing a
Grid in XAML.
Grid inherits the
Padding property from
Layout and defines two additional properties that provide spacing between the rows and columns:
ColumnDefinitions collections aren't strictly required. 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
The GridCodeDemo sample demonstrates how to create and populate a
Grid in code. 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
The Grid bar chart
The GridBarChart sample shows how to add multiple
BoxView elements to a
Grid using the bulk
AddHorizontal method. By default, these
BoxView elements have equal width. The height of each
BoxView can then be controlled to resemble a bar chart.
Grid in the GridBarChart sample shares an
AbsoluteLayout parent with an initially invisible
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
The GridAlignment sample demonstrates how to use the
HorizontalOptions properties to align children in a
The SpacingButtons sample equally spaces
Button elements centered in
Cell dividers and borders
Grid does not include a feature that draws cell dividers or borders. However, you can make your own.
The GridCellDividers demonstrates how to define additional rows and column specifically for thin
BoxView elements to mimic dividing lines.
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
The KeypadGrid sample uses a
Grid to display a keypad:
Responding to orientation changes
Grid can help structure a program to respond to orientation changes. 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.
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. 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.