What is Grid in Xaml? Learn How to use it

Grid works just like table in HTML which formulate the allocated area in rows and columns but it is more stretchy than the HTML table. It stores its child elements in cells which can span over one another. We can set its child position by using HorizontalAllignment and VerticalAllignment attributes.

After defining it, we can set its background, rows and column etc. attributes. The XAML code for creating a Grid is given below

The design will be as given in the pic below

For defining rows we use Grid.RowDefinitions and for column we use Grid.ColumnDefinitions. We can give height and width in two formats which is in pixels or in *. In giving width and height, I use * which means the xaml automatically divide my rows or columns in equally parts. For example

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="2*" />

The Xaml divides the total area in rows of 2 equally height section and third row height will be equivalent to the sum of heights of above 2 rows.

I write textblock with text Enter your name which has attribute Grid.column="0" and Grid.Row="0" which means it will show on top left first cell which is first row and first column .
and write textbox which has attribute Grid.column="1" and Grid.Row="0" which means it will show on top right cell which is first row second column.
Columns start with 0 and rows also with 0.
I 've divided section in two columns i.e. 0 and 1
and in 3 rows i.e. 0, 1, 2.