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);
Written by Gabriel Chavez
Related protips
3 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Grid
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#