What Is Grid In Xamarin Forms And How We Work In The Grid

In this blog, you will learn, what is grid in Xamarin forms and how we work in the grid.

Today, I will teach you about the grid. This is very important in the Xamarin forms. Thus, lets start by creating new project and select Blank Screen, as I explained earlier in the previous blogs. Now, we write the code to explain the grid. The grid has two options, which are RowDefination and ColumnDefinition. These definitions  are used in the table to adjust the space. Now, we look at the code, which is shown in the figure, given below.

In this code, we see that, we give the height in rowdefinition, which is in point, because there is a space equal to one. Thus, we have to give the value, which is all equal to one. Thus, this is the reason, why these values will be equal to one. This one is by default in the mobile, so we will have to obey this rule. We give .5* to both of the columndefination. This star is the overall value of the given space or you can say the star will adjust the space between two column or row.



Thus, given below, we declare the names of the given space and give the index; a name, as you can see in the code, which is shown in the figure, above. Now, we see the output on my mobile, as shown in the figure, below.



Now, you can see the result, that the space, we gave in the code is adjusted by a star and also the space is given equally to the given space. Now, we use Vertical and Horizontal Options. This Vertical and Horizontal option gets or sets the layout, which defines, how the element gets laid in a layout cycle. This is a bindable property. We give vertical and horizontal property center as shown in the figure, given below:



We only give property to the second row and first column. Now, we look at the output of this code in my mobile.



As we see in the given figure, the name of the given index, which is Hafiz Zain is in the center of the row and column. Now, we look at the different property by the given different property.



Now, we add a property, which is Grid.ColumnSpan is equal to 2.



By adding the Grid.ColumnSpan property, we saw that the row is removed and the second column combines the space. It takes all the space of the first column.