Xamarin.Forms.Grid Class
A layout that arranges views in rows and columns.

See Also: Grid Members

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",
                    Font = Font.BoldSystemFontOfSize(50),
                    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,
                    XAlign = TextAlignment.Center,
                    YAlign = TextAlignment.Center,
                }, 1, 2);

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

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

            grid.Children.Add(new Label
                {
                    Text = "Fixed 100x100",
                    TextColor = Color.Aqua,
                    BackgroundColor = Color.Red,
                    XAlign = TextAlignment.Center,
                    YAlign = 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 Xamarin.Forms.Grid layout class arranges to store row and column indices of each of its child elements. Additionally, when a Xamarin.Forms.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 Xamarin.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.

The Xamarin.Forms.Grid class has the following XAML properties.

PropertyValue
Children

Nested visual elements that are displayed in the Grid.

ColumnDefinitions

A list of ColumnDefinition specifications. See Xamarin.Forms.ColumnDefinition.

ColumnSpacingAn integer.

RowDefinitions

A list of RowDefinition specifications. See Xamarin.Forms.RowDefinition.

RowSpacing

An integer.

The Xamarin.Forms.Grid class has the following XAML attached properties.

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 Xamarin.Forms.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