WP7 Design Templates

Do yourself a favour.  Don’t write another line of WP7 XAML without the WP7 Design Templates.

Wp7 Design Template ScreenWe WP7 devs have been complaining since the CTP that although there is documentation for the Phone’s UI, it is almost impossible for most developers to create apps that are consistent.  Sure we can make things that look much like what you see in native phone apps but there are always subtle (and not so subtle) differences.

The SDK has a few built-in resources for colors and fonts, and some basic control themes that rather crudely approximate native look and feel, but there is little help when it comes to margins, padding phone sizes and layout styles.  Developing apps that adhere to the guidance and maintain the look and feel of the native OS has been a pain in the ass. 

The problem has been make slightly easier by the release of the Windows Phone 7 UX Guide application by the Expression Blend team.  This is a project (which is itself a WP7 app) which includes some default layouts for common scenarios.

It includes default layouts and templates for:

  • Buttons
  • Check Boxes
  • List Views
  • Toggle Switch (Silverlight WP7 Toolkit)
  • Dialog Boxes
  • Context Menu (Silverlight WP7 Toolkit)
  • Slider

It doesn’t really help for any of those projects you already have UI for.  But if you are starting a new piece of UI it is simply a matter of copy and pasting the XAML of the layout you want to replicate into your project.  Then you can start customizing it as required.

This code is super helpful.  If you are going for the native look and feel then these examples are definitely your best starting place.  But bear in mind you do not have to make your app follow the default UI.  It’s okay to be different but the thing is it is an all or nothing game.  Either your app follows the UI guidelines or it should look completely different.

This CodePlex project is a good start by Microsoft to make it easier to create apps that follow the native UI (exactly, not just kind of the same), but it’s not complete and not really a long-term solution.  Using “copy and paste” inheritance is not usually a good idea.  When the next version of these templates get posted to CodePlex there is not going to be any way of updating existing projects. 

There are still plenty of things that need to just be a part of the framework (either as Blend assets, libraries or part of the API), like animations.  It is impossible to mimic some of the native animations currently in Silverlight.  Something as simple as the page flip animations are extremely hard to replicate – and before you say it, yes I know how to do a page flip animation.  It is making it feel exactly the native one that is hard. 

Even though the Design Templates haven’t shipped with Blend (and they really should have) they are still a good starting point, so go download them now.


One thought on “WP7 Design Templates

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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