Before you start with this blog, go to this syntax and tutorial blog. It will easy to understand the code of this blog. Grid through cs code Grid in xaml Please, support my blog by clicking on our sponsors ad! Below code for grid in c# Code. This is recommended when it has to add at runtime. By default you can add grid through xaml, Because xaml is easy to code and understand. var grid = new Grid(); var autoRow = new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) }; var fixRow = new RowDefinition() { Height = new GridLength(200) }; var starRow = new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) }; var col1 = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; var col2 = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; var col3 = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; var col4 = new ColumnDefinition() { Width = new GridLength(

In Previous blog  we learn syntax of grid, we will go through example of grid in xaml. Grid code in xamarin form in xaml Please, support my blog by clicking on our sponsors ad! Grid code for above design <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="GridExample.MainPage"> <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,*" ColumnDefinitions="Auto,Auto,Auto,Auto,*"> <BoxView BackgroundColor="Black" Grid.Row="0" Grid.Column="0"></BoxView> <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="0"></BoxView> <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="0" ></BoxView> <BoxView BackgroundColor="Yellow" Grid.Row="3" Grid.C

 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 c