As long as you follow “The (Metro) Grid”, you’re good !

“The Grid” probably got famous by Jeff Wilcox’ MetroGridHelper who saw Arturo and Corrina Black use it as a transparent image to align their controls. The sad thing about the MetroGridHelper is that it’s only visible in debug mode, and not “while” layouting your app. So layouting would mean constantly starting your app, see if all is well layouted, making changes, restarting your app, ah, darn, you forgot there something, so adjusting that again, of course restarting the app again to check, well, you get my drift I guess.

During the UX Tour event in Antwerp, I asked Arturo and Corrina if they could make their PNG publically available, they told me they would, so expect that one coming later this weekend (that’s what Corrina told me).

In the mean time, you can use this one, which is in fact just an export of the Expression Designer file Arturo posted a while ago on his blog. Of course I had to expand the canvas of it, but I had all the heights and widths clearly marked on the Expression Designer file, so that was easy. I recolored the blue rectangles to red slightly transparent ones too, so it looks more like the MetroGridHelper.

Click to download it !

The easiest way to use it, is of course “Add an Existing Item” (the grid you just saved) to your project and then open your XAML Windows Phone Page in Expression Blend, open your Projects tab (the one that shows all the files in your project), and simply drag it on the Windows Phone Page.
Then just make sure it’s the lowest object in your Objects and Timeline panel, all the way at the bottom of the LayoutRoot object. Also make sure to set all Margins to 0, else, of course it’s useless.
Expression Blend will generate the following line of XAML which perfectly does the trick !