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

On November 3rd – during the Web & Phone UX Tour Belgium, Arturo Toledo meant that we all should follow “The Grid”… it sounded like a famous movie quote, but it’s not.

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.

Windows Phone Grid in Red Transparent

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 !

<Image Height=”800″ Margin=”0″ Grid.Row=”1″ Source=”WindowsPhone_Grid_red_transparent.png” Stretch=”None” VerticalAlignment=”Bottom”/>

Don’t forget to remove these lines and image from your Windows Phone Pages when publishing your app !

A BIG thank you goes out to Corrina Black and Arturo Toledo, you now can also make perfect Windows Phone design as long as you follow “The Grid” !

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s