Designing on a grid for windows phone 7

download demo project with the grid usercontrols

When I design in Photoshop and Expression Design, I use the grid and guides all the time to make sure all my visual elements are placed well. The artboard grid options in Expression Blend are limited to gridline spacing and I need more visual feedback like this:

In an ASP.NET application I usually place an image of a grid on my canvas div to see if everything is positioned correctly in all browsers. In Silverlight this can be solved even more nicely. I created a UserControl with some rectangles to mimic a design grid. I’ve added a ShowAtRuntime property so you don’t have to collapse the design grid if you want to test without the grid.

Just download the demo project and copy the controls folder to your project. Add a 5- or 6-column grid control to the layoutroot of your page and fill it out over the page. Make sure the gridcontrol is the first child of the layoutroot.

The controls are created for portait mode.

Small disclaimer: I had to guess the design grid dimensions of the Metro design language. If you find an error in my calculation please send me an email.