Grid in Windows Phone 8 #windowsphone

When we are creating Windows Phone application first thing that we will be using is GridWindows Phone Grid

Grid, it’s our base for creating our world in devices. In this post I want to approach closer this topic. First thought is, how to use it ? and why it’s so powerful ?

Let’s me answer. It’s quite powerful mechanism because <Grid> can be our box for others items like (list box, text block etc.).

Moreover you can nest <Grid> inside <ListBox> or similar items.

<Grid> has got various members, for declaring rows and columns we have to useĀ  <Grid.RowDefinitions> andĀ  <Grid.ColumnDefinitions> by these members we can declare width of column, and height of row.

Example implementation :


As you can see I made three rows, and four columns. Now if you want place something on specific column or row, it’s similar to game “Battleship“. Let’s place text box, with help comes Grid.Row and Grid.Column.

<TextBox Grid.Row="0" Grid.Column="1" />


Notice: good practice – you should implement whole sizes at this step (by Row-Column Definitions), because in my opinion using fixed width and height at items property is mistake (of course sometimes you have to use item property), it’s like clothes, you want them to well fit on your body, you do not resize your body to clothes.

Notice: When you are designing your UI by the <Grid> make sure that you are include margin inside these definitions, I think it’s good practices to define spacing by this mechanism.


You can define <Grid> inside of <ListBox> (i.e), and you can form <ListBox> view as you wish, it’s very helpful to create custom view of listbox.


As you can see I didn’t use here fixed height, width. Even margins are implemented inside Row-Column Definitions. Of course this grid we can use inside DataTemplate, so if we have dynamic render data.

Conclusion : When you are modeling UI remember to use grid, and try to not use margin,height,width properties. It’s much more maintainable.