Today, I will teach you about Grid which is very important in the Xamarin.Forms.
So, let's start.
Create a new project and select Blank Screen as I explained earlier in the previous blogs. Now, we do the coding to explain the Grid. Grid is used to display the data in the list of row and column. It has two options, RowDefinition and ColumnDefinition. These definitions are used in the table for adjusting the space.
Now, take a look at the code, shown in the figure below.
![]()
In this code, we can see that in RowDefinition, we give Height in points. The height and width of the whole screen is considered as one. So, we have to assign the values of RowDefinition or ColumnDefinition in such a way that they sum up to be equal to one, as you can see in the above code. We give .5* to both of the ColumnDefinition. Here, the star is used to auto adjust the space between two columns or rows according to their assigned value.
In the following image, we declare the names of the given spaces and give the index a name, as you can see in the above code. And now, we see the output on my mobile screen.
![]()
Now, you can see that the space we give in the code is adjusted by a star and also the space is given equally to each row and each column.
Now, we will try the VerticalOptions and HorizontalOptions. This VerticalOptions and HorizontalOptions Get or Set the layout that defines how the element gets laid in a layout cycle. This is a bindable property. Here, we will set both the options as "center".
![]()
We have given this property to the second row and first column only. Now, let's see the output of this code in my mobile.
![]()
As we see, the name Hafiz Zain is in the center of the row and column. Now, let's learn the different property.
![]()
Now, we have added a property Grid.ColumnSpan with a value 2.
![]()
By adding the Grid.ColumnSpan property, we see that the row is removed and the second column combines the space and takes all the space of the first column.