Last Updated: February 10, 2017
·
41.9K
· gabefc

Programmatically adding Views to Xamarin.Forms Grid

In Xamarin.Forms Xaml, it's easy to add children to a Grid by specifying the row, column, column-span, and row-span, but doing it programmatically is a little more tricky.

XAML example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="60" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width=".2*" />
        <ColumnDefinition Width=".2*" />
        <ColumnDefinition Width=".5*" />
        <ColumnDefinition Width=".1*" />
    </Grid.ColumnDefinitions> 

   <Label Text="Hello" Grid.Row="0" Grid.Column="0" />
   <Label Text="World" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" />
   <Label Text="From Albuquerque, NM" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="5" />
</Grid>

A note about IGridList<T>

IGridList<T>.Add() is implemented as Grid.Children.Add() and it has two over loads.

Add(View view, int left, int top);
Add(View view, int left, int right, int top, int bottom);

The parameters map to row, column, row span, and column span values thus:

IGridList<T>.Add(view, left, top) == Grid.Children.Add(view, column, row);
IGridList<T>.Add(view, left, right, top, bottom) == Grid.Children.Add(view, column, column+columnSpan, row, row+rowSpan);

C# Example

var grid = new Grid
      {
        RowDefinitions =
        {
          new RowDefinition { Height = new GridLength(60, GridUnitType.Absolute) }, 
          new RowDefinition { Height = GridLength.Auto },           
        }, ColumnDefinitions =
        {
          new ColumnDefinition { Width = new GridLength(100, GridUnitType.Absolute) }, 
          new ColumnDefinition { Width = new GridLength(.2, GridUnitType.Star) },
          new ColumnDefinition { Width = new GridLength(.2, GridUnitType.Star) },
          new ColumnDefinition { Width = new GridLength(.5, GridUnitType.Star) },
          new ColumnDefinition { Width = new GridLength(.1, GridUnitType.Star) }
        }
      };


//if right and bottom aren't specified, the column and row spans will be 1    
grid.Children.Add(new Label{Text="Hello"}, 0, 0);

//to start at column 1 and span 4 columns, right needs to be column + column span; 1 + 4 = 5.  Since this overload requires values for top and bottom, the row (top) is 0, and the row span is 1; 0 + 1 = 1, so bottom must be 1.
grid.Children.Add(new Label{Text="World"}, 1, 5, 0, 1);

//column (left) = 0, right = column + column span; 0 + 5 = 6.  row (top) = 1, bottom = row + row span; 1 + 1 = 2
grid.Children.Add(new Label{Text="From Albuquerque, NM"}, 0, 6, 1, 2);

3 Responses
Add your response

May i ask if you know how to add an x:Name to grid.Children.Add(new Label{Text="Hello"}, 0, 0); so that i can use that label in the behind code?

over 1 year ago ·

If you want to use the label in the code behind, why not just assign the Label to a variable when you new it up? For example:

var label = new Label{Text="Hello};
grid.Children.Add(label, 0,0);

over 1 year ago ·

0 + 5 = 6 .. abstract like a god!

over 1 year ago ·