Xamarin Tutorial Part 4 - Grid for Xamarin Forms

 What is Grid?

with live example please watch:

https://youtu.be/gZQyqKheUF4

https://youtu.be/e8cYsSw752s

Please, support my blog by clicking on our sponsors ad!

Grid is a layout type that allow you to create design using rows/columns

Let's see how to use Grid

Use Grid tag to create design

<Grid></Grid> 

In C#

 var grid = new Grid() 

There are three type of cell size

1) Absolute : Fix size

  <Grid ColumnDefinition = "50,70,80" /> 

There will be three Column cell 

1st row cell width will be 50 

2nd cell width will be70 

3rd cell width will be 80

2)  Auto: Will use size of data

 <Grid ColumnDefinition = "70,70,Auto"/>

There will be three Column cell 
1st row cell width will be 70 
2nd cell width will be70 
3rd cell width will be according to data

3) Star: It expand propotionally to space size

 <Grid ColumnDifinition="*,2*,5*"/> 

2* = 20%,  5* = 50%,  100-70 = 30 so * = 30%
There will be three Column cell 
1st row cell width will be 70 
2nd cell width will be70 
3rd cell width will be according to data



  
How to add children in grid?
parameter is control,column,row
 grid.Children.Add(new BoxView { Color = Color.Yellow }, 1, 0);  
Rowspan
 Grid.SetRowSpan(boxView, 2);  
Colspan
 Grid.SetColumnSpan(boxView, 2);  
  



  
How to assign grid to content?
 Content = grid; 
Columnspacing and Rowspacing
The default value is 6.
Columnspacing indicate distance between columns
Rowspacing indicate distance betwwn Rows.
Hope this help to you, please share your feedback in comment section, thanks for reading.