Xamarin.Forms Guides | Samples

Xamarin.Forms.Grid Class

A layout that arranges views in rows and columns.

See Also: Grid

Syntax

public class Grid : Layout<View>

Remarks

The following example shows a basic use:

C# Example

using System;
using Xamarin.Forms;

namespace FormsGallery
{
    class GridDemoPage : ContentPage
    {
        public GridDemoPage()
        {
            Grid grid = new Grid
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                RowDefinitions = 
                {
                    new RowDefinition { Height = GridLength.Auto },
                    new RowDefinition { Height = GridLength.Auto },
                    new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
                    new RowDefinition { Height = new GridLength(100, GridUnitType.Absolute) }
                },
                ColumnDefinitions = 
                {
                    new ColumnDefinition { Width = GridLength.Auto },
                    new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                    new ColumnDefinition { Width = new GridLength(100, GridUnitType.Absolute) }
                }
            };

            grid.Children.Add(new Label
                {
                    Text = "Grid",
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
                    HorizontalOptions = LayoutOptions.Center
                }, 0, 3, 0, 1);

            grid.Children.Add(new Label
                {
                    Text = "Autosized cell",
                    TextColor = Color.White,
                    BackgroundColor = Color.Blue
                }, 0, 1);

            grid.Children.Add(new BoxView
                {
                    Color = Color.Silver,
                    HeightRequest = 0
                }, 1, 1);

            grid.Children.Add(new BoxView
                {
                    Color = Color.Teal
                }, 0, 2);

            grid.Children.Add(new Label
                {
                    Text = "Leftover space",
                    TextColor = Color.Purple,
                    BackgroundColor = Color.Aqua,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center,
                }, 1, 2);

            grid.Children.Add(new Label
                {
                    Text = "Span two rows (or more if you want)",
                    TextColor = Color.Yellow,
                    BackgroundColor = Color.Navy,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center
                }, 2, 3, 1, 3);

            grid.Children.Add(new Label
                {
                    Text = "Span 2 columns",
                    TextColor = Color.Blue,
                    BackgroundColor = Color.Yellow,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center
                }, 0, 2, 3, 4);

            grid.Children.Add(new Label
                {
                    Text = "Fixed 100x100",
                    TextColor = Color.Aqua,
                    BackgroundColor = Color.Red,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center
                }, 2, 3);

            // Accomodate iPhone status bar.
            this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);

            // Build the page.
            this.Content = grid;
        }
    }
}

The following shows Grids on the various platforms:

It is convenient for the Grid layout class arranges to store row and column indices of each of its child elements. Additionally, when a View element is laid out with a grid, application developers can access and change the child's position and span from the child itself by using the Forms.Get(BindableObject), Xamarin.Forms..Grid.GetRow(BindableObject), Grid.SetRow(BindableObject), Grid.GetRowSpan(BindableObject), Grid.SetRowSpan(BindableObject) static methods, and the equivalent static methods for columns and column spans.

XAML for Xamarin.Forms supports the following properties for the Grid class:

PropertyValue
Children

Nested visual elements that are displayed in the Grid.

ColumnDefinitions

A list of ColumnDefinition specifications. See ColumnDefinition.

ColumnSpacingAn integer.

RowDefinitions

A list of RowDefinition specifications. See RowDefinition.

RowSpacing

An integer.

XAML for Xamarin.Forms supports the following attached properties for the Grid class:

Attached PropertyValue
Column

An integer that represents the Column in which the item will appear.

ColumnSpanAn integer that represents the number of Columns that the item will span.

Row

An integer that represents the row in which the item will appear.

RowSpan

An integer that represents the number of rows that the item will span.

The documentation for the following Grid member methods contains XAML syntax examples:

Requirements

Namespace: Xamarin.Forms
Assembly: Xamarin.Forms.Core (in Xamarin.Forms.Core.dll)
Assembly Versions: 1.0.0.0, 1.1.0.0, 1.2.0.0, 1.3.0.0, 1.4.0.0, 1.5.0.0, 2.0.0.0

The members of Xamarin.Forms.Grid are listed below.

See Also: Inherited members from Xamarin.Forms.Layout<Xamarin.Forms.View>

Public Constructors

Initializes a new instance of the Grid class.

Public Fields

static readonly
ColumnDefinitionsPropertyBindableProperty. Implements the Grid.ColumnDefinitions property, and allows the Grid class to bind it to properties on other objects at run time.
static readonly
ColumnPropertyBindableProperty. Implements the attached property that represents the zero-based column index of a child element. See Remarks.
static readonly
ColumnSpacingPropertyBindableProperty. Implements the Grid.ColumnSpacing property, and allows the Grid class to bind it to properties on other objects at run time.
static readonly
ColumnSpanPropertyBindableProperty. Implements the attached property that represents the number of columns that a child element spans. See Remarks.
static readonly
RowDefinitionsPropertyBindableProperty. Implements the Grid.RowDefinitions property, and allows the Grid class to bind it to properties on other objects at run time.
static readonly
RowPropertyBindableProperty. Implements the attached property that represents the zero-based row index of a child element. See Remarks.
static readonly
RowSpacingPropertyBindableProperty. Implements the Grid.RowSpacing property, and allows the Grid class to bind it to properties on other objects at run time.
static readonly
RowSpanPropertyBindableProperty. Implements the attached property that represents the number of rows that a child element spans, and allows the Grid class to bind it to properties on other objects at run time.

Public Properties

[read-only]
ChildrenGrid.IGridList<View>. Gets the collection of child elements of the Grid.
ColumnDefinitionsColumnDefinitionCollection. Provides the interface for the bound property that gets or sets the ordered collection of ColumnDefinition objects that control the layout of columns in the Grid.
ColumnSpacingDouble. Provides the interface for the bound property that gets or sets the distance between columns in the Grid.
RowDefinitionsRowDefinitionCollection. Provides the interface for the bound property that gets or sets the collection of RowDefinition objects that control the heights of each row.
RowSpacingDouble. Gets or sets the amount of space left between rows in the Grid. This is a bindable property.

Public Methods

static
GetColumn(BindableObject) : Int32
Gets the column of the bindable child element.
static
GetColumnSpan(BindableObject) : Int32
Gets the column span of the bindable child element.
static
GetRow(BindableObject) : Int32
Gets the row of the bindable child element.
static
GetRowSpan(BindableObject) : Int32
Gets the row span of the bindable child element.
static
SetColumn(BindableObject, Int32)
Changes the column in which a child element will be placed.
static
SetColumnSpan(BindableObject, Int32)
Changes the column span of the specified child element.
static
SetRow(BindableObject, Int32)
Changes the row in which a child element will be placed.
static
SetRowSpan(BindableObject, Int32)
Changes the row span of the specified child element.

Protected Methods

override
InvalidateMeasure()
Invalidates the grid layout.
override
LayoutChildren(Double, Double, Double, Double)
Lays out the child elements when the layout is invalidated.
override
OnAdded(View)
Method that is called when a child is added to this Grid element.
override
OnBindingContextChanged()
Application developers override this to respond when the binding context changes.
override
OnRemoved(View)
Method that is called when a child is removed from this Grid element.
override
OnSizeRequest(Double, Double) : SizeRequest
Method that is called when an attempt is made to resize this Grid element.