What is grid action in the MVC tournament

Xamarin.Forms Grid

Download the sample

The is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. By default, a contains one row and one column. In addition, a can be used as a parent layout that contains other child layouts.

The layout should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a is intended for laying out content. For displaying tabular data, consider using a ListView, CollectionView, or TableView.

The class defines the following properties:

  • , of type, which is an attached property that indicates the column alignment of a view within a parent. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0.
  • , of type, is a list of objects that define the width of the grid columns.
  • , of type, indicates the distance between grid columns. The default value of this property is 6 device-independent units.
  • , of type, which is an attached property that indicates the total number of columns that a view spans within a parent. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1.
  • , of type, which is an attached property that indicates the row alignment of a view within a parent. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0.
  • , of type, is a list of objects that define the height of the grid rows.
  • , of type, indicates the distance between grid rows. The default value of this property is 6 device-independent units.
  • , of type, which is an attached property that indicates the total number of rows that a view spans within a parent. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1.

These properties are backed by objects, which means that the properties can be targets of data bindings and styled.

The class derives from the class, which defines a property of type. The property is the of the class, and therefore does not need to be explicitly set from XAML.

Rows and columns

By default, a contains one row and one column:

In this example, the contains a single child that's automatically positioned in a single location:

The layout behavior of a can be defined with the and properties, which are collections of and objects, respectively. These collections define the row and column characteristics of a, and should contain one object for each row in the, and one object for each column in the.

The class defines a property, of type, and the class defines a property, of type. The struct specifies a row height or a column width in terms of the enumeration, which has three members:

  • - the row height or column width is a value in device-independent units (a number in XAML).
  • - the row height or column width is autosized based on the cell contents (in XAML).
  • - leftover row height or column width is allocated proportionally (a number followed by in XAML).

A row with a property of constrains the height of views in that row in the same way as a vertical. Similarly, a column with a property of works much like a horizontal.

Caution

Try to ensure that as few rows and columns as possible are set to size. Each auto-sized row or column will cause the layout engine to perform additional layout calculations. Instead, use fixed size rows and columns if possible. Alternatively, set rows and columns to occupy a proportional amount of space with the enumeration value.

The following XAML shows how to create a with three rows and two columns:

In this example, the has an overall height that is the height of the page. The knows that the height of the third row is 100 device-independent units. It subtracts that height from its own height, and allocates the remaining height proportionally between the first and second rows based on the number before the star. In this example, the height of the first row is twice that of the second row.

The two objects both set the to, which is the same as, meaning that the width of the screen is divided equally beneath the two columns.

Important

The default value of the property is. Similarly, the default value of the property is. Therefore, it's not necessary to set these properties in cases where these defaults are acceptable.

Child views can be positioned in specific cells with the and attached properties. In addition, to make child views span across multiple rows and columns, use the and attached properties.

The following XAML shows the same definition, and also positions child views in specific cells:

grade

The and properties are both indexed from 0, and so refers to the third row while refers to the second column. In addition, both of these properties have a default value of 0, and so don't need to be set on child views that occupy the first row or first column of a.

In this example, all three rows are occupied by and views. The third row is 100 device-independent units high, with the first two rows occupying the remaining space (the first row is twice as high as the second row). The two columns are equal in width and divide the in half. The in the third row spans both columns.

In addition, child views in a can share cells. The order that the children appear in the XAML is the order that the children are placed in the. In the previous example, the objects are only visible because they are rendered on top of the objects. The objects would not be visible if the objects were rendered on top of them.

The equivalent C # code is:

In code, to specify the height of an object, and the width of a object, you use values ​​of the structure, often in combination with the enumeration.

The example code above also shows several different approaches to adding children to the, and specifying the cells in which they reside. When using the overload that specifies left, right, Top, and bottom arguments, while the left other Top arguments will always refer to cells within the, the right other bottom Arguments appear to refer to cells that are outside the. This is because the right argument must always be greater than the left argument, and the bottom argument must always be greater than the Top argument. The following example, which assumes a 2x2, shows equivalent code using both overloads:

grade

In addition, child views can be added to a with the and methods, which add children to a single row or single column. The then expands in rows or columns as these calls are made, as well as automatically positioning children in the correct cells.

Simplify row and column definitions

In XAML, the row and column characteristics of a can be specified using a simplified syntax that avoids having to define and objects for each row and column. Instead, the and properties can be set to strings containing comma-delimited values, from which type converters built into Xamarin.Forms create and objects:

In this example, the has five rows and four columns. The third, forth, and fifth rows are set to absolute heights, with the second row auto-sizing to its content. The remaining height is then allocated to the first row.

The forth column is set to an absolute width, with the third column auto-sizing to its content. The remaining width is allocated proportionally between the first and second columns based on the number before the star. In this example, the width of the second column is twice that of the first column (because is identical to).

Space between rows and columns

By default, rows are separated by 6 device-independent units of space. Similarly, columns are separated by 6 device-independent units of space. These defaults can be changed by setting the and properties, respectively:

This example creates a that has no spacing between its rows and columns:

The equivalent C # code is:

Alignment

Child views in a can be positioned within their cells by the and properties. These properties can be set to the following fields from the struct:

The following XAML creates a with nine equal-size cells, and places a in each cell with a different alignment:

In this example, the objects in each row are all identically aligned vertically, but use different horizontal alignments. Alternatively, this can be thought of as the objects in each column being identically aligned horizontally, but using different vertical alignments:

The equivalent C # code is:

Nested grid objects

A can be used as a parent layout that contains nested child objects, or other child layouts. When nesting objects, the,,, and attached properties always refer to the position of views within their parent.

The following XAML shows an example of nesting objects:

In this example, the root layout contains a in its first row, and a child in its second row. The child contains objects that manipulate the color displayed by the, and objects that display the value of each:

Important

The deeper you nest objects and other layouts, the more the nested layouts will impact performance. For more information, see Choose the correct layout.

The equivalent C # code is:

Related links