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 :

wp_grid_col_row_def

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" />

wp_grid_col_row_def_box

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.

Nesting

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.

wp_listbox_grid

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.