Various Ways to Set Height or Width in a Grid in Windows Phone

Grid: A Grid is a flexible container element that consists of rows and columns.

There are various ways to set the height of rows and width of columns in the Grid.

1. Constant Value
2. Auto
3. Star (*)

Constant Value

We can set the height or width in a grid using a constant value in pixels.

Code



Output



Auto

Setting the height or width to “Auto” shows the real flexibility of the grid. Setting the height/width to Auto will automatically adjust the height/width depending on the elements present inside the grid.

Code



Output



Star

Star (*) is equivalent to ratio in a grid. For example:



This code will divide the screen into two parts. The first row will consume 2/3rd of the total space and the second row will consume 1/3rd of the space.

Note: * is just a shorthand for 1*. We can use * instead of 1* and it will produce the same results.

The code written above will be same as this one.



Output



Using these together

Here is an example where we are using these 3 methods together.

Code



Here the 0th row will have a constant height of 70 pixels, 1st row will have the height 200 pixels because the height is set to Auto and the content placed inside the row is 200 pixels in height, the 2nd row will consume up all the leftover space in the grid.

Output