What's in the project?
A project for sharing XAML based resources forThe Design Templates for WP7 project is a set of design templates created entirely in XAML using Expression Blend 4. The templates are based on the UI Design and Interaction Guide for Windows Phone 7.

 

What can I do with them?
With these templates you can easily create common Windows Phone UI layouts by simply copying and pasting the desired page. We’ve taken care of the margins, styling, and some controls that may not be available in the platform, so you can focus on the user experience of your application.

 

Let's get started!

**Please make sure to install the Silverlight for Windows Phone Toolkit (http://silverlight.codeplex.com/releases/view/52297) in order to run the project.

Project Content
With Expression Blend, open the project and the WP7 Design Templates.xaml and MainPage.xaml pages should be opened by default. The WP7 Design Templates.xaml page displays all of the available templates in one page.

WP7 Design Templates.xaml page and MainPage.xaml

By running the project (F5), you can browse through all of the available templates via the Windows Phone 7 Emulator.

Creating a New Project
The following is a walkthrough example for creating a new Windows Phone Pivot Application and using one of the Design Templates.

1. Open a new instance of Expression Blend 4 and create a Windows Phone Pivot Application

2. Delete the default items in the PivotItem (highlighted below)

3. In the Design Templates for WP7 project, select the desired page layout to copy, in this case the push button, either in the Pages folder (Projects tab) or in the WP7 Design Templates.xaml page

4. Copy the button_push PivotItem ScrollViewer in the Object Tree (Objects and Timeline tab)

5. Return to your Windows Phone Pivot Application project and paste the ScrollViewer into your PivotItem

6. That’s it. Some templates will contain custom controls (i.e. "MultiLineItem") which need to be added to your new project before pasting it, or else you will receive an error message. These custom controls are found in the Controls folder in the Projects tab and can be copied and pasted anywhere in your new project’s Solution.

Creating a data bound ListView with Sample Data
One of the most common navigation pieces of UI are ListViews. The next walkthrough demonstartes how to create a Windows Phone Application with a ListView template using Sample Data.

1. In the Design Templates for WP7 project, browse to the desired ListView layout to copy. In this example let's take a look at the large icon layout. Note how my data sample will need an image and 2 text strings

2. Now that you have decided which layout to use, create a new Windows Phone Application in a new instance of Blend

3. In the Data pane, start creating your new Sample Data by clicking the "Create sample data" button and choosing "New Sample Data..."
 

4. Create one image and two text strings (to add a new item, click the "+" icon). For the primary text, set the max word count to 4, max word length to 6 and Subtext max word count to 6, max word length to 7




We hope you will find these useful and your feedback is always welcome. Enjoy!

Last edited Sep 30, 2010 at 9:18 PM by blender, version 25

Comments

blender Jul 16, 2011 at 8:11 AM 
Thanks Birbilis, updated link.

Birbilis Jul 2, 2011 at 12:03 AM 
the UI Design and Interaction Guide for Windows Phone 7 link takes one to a PDF that reads the following:

The UI Design and Interaction Guide for Windows® Phone v2.0 is obsolete. This document previously existed in a pre-release version. It has been superseded by the User Experience Design Guidelines for Windows Phone on MSDN®.
There are six parts to the new guidelines:
1. The Windows Phone Platform: Takes a brief look at the types of applications that can be written for the Windows Phone and the specific user needs each one can fulfill.
2. The Application Design Process for Windows Phone: Contains a collection of ideas on how mobile application design can impact the utility of a Windows Phone.
3. Application Structure and Navigation Models for Windows Phone: Contains information about the different types of Windows Phone application navigation models and best practices for each style.
4. User and Platform Interactions for Windows Phone: Contains guidance on specific feature areas and user interactions for Windows Phone including themes, animations, navigation, orientation, gestures, graphics, notifications, and so on.
5. Controls Design Guidelines for Windows Phone: Guidelines for using Silverlight® controls on Windows phone, as well as Windows Phone-specific controls.
6. Appendix: Contains links to other design resources, such as tools, icons, design templates, tutorials, and so on. Please see the new guidelines on MSDN for more information

SO THE NEW GUIDELINES ARE AT: http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx