Download and copy the Caliburn.Micro.WP7.zip file to the following directory on your computer: \Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight for Windows Phone

Start up Visual Studio and create a new project.  You will see an option for Caliburn.Micro (WP7):

After the project is created, you will see the following project structure:

Fix the reference to Caliburn.Micro (download from CodePlex), set a breakpoint in the constructor of MainPageViewModel, and run the application.  You will see that when navigation happens to MainPage, that MainPageViewModel is created. 

Continue execution to view the app in the emulator:

I like Rob’s idea of doing View-first for pages and ViewModel-first for components on a Page.  I have chosen the following naming: MyPage/MyPageViewModel (pages) and MyView/MyViewModel (user controls).

Windows Phone 7 introduces concepts such as live tiles, an application bar with buttons and menus, and panoramic applications.  The UI templates should take those things into account as well as the WVGA display that can show 800×480 pixels in either portrait or landscape orientation:

When an application is pinned to the Start screen, the application tile is shown:

Applications can receive notifications to let the user know of important updates even when the application is not running.  One type is the tile notification which can update a pinned tile with a background image, text, and a counter:

An application can choose to include an Application Bar which appears at the bottom of the screen in portrait orientation and vertically on the side when in landscape.  The Application Bar should be limited to a few important buttons that can easily be represented by images.  Other actions should be put in the menu.  The Windows Phone Development Programming Guide encourages the use of no more than 5 menu items as it will force the user to scroll:

One type of application that can be developed for the Windows Phone 7 is a Panorama application which spreads the UI across multiple screens with a slight overlap to tease the users on to the next screen:

When creating the 5 UI templates for Windows Phone 7, I made sure the above concepts were included.

The first two templates include a WVGA screen inside a phone device chrome.  When printed the phone image is roughly the size of an iPhone or Nexus One.  The template includes two tiles to be used for the application tile and the updated tile based on notification.  Three Application Bar images have been included for 2, 3, or 4 buttons.  As well as a place to write up to 5 menu items.

The next two templates display 6 screens per page in either portrait or landscape orientation:

The final template is for Panorama applications and allows for 5 portrait screens side by side with a slight overlap.  The template uses alternating red & blue borders to show each screen’s full width.  The two grid spaces between red & blue lines is the tease overlap for the next screen:

The templates are available for download as a PowerPoint file.

Have you already started designing Winodws Phone 7 Series applications?  Do you find these templates useful?  What changes would you like to see in these templates?  Would you be willing to share some of your designs with others?