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.
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 demonstrates 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 pick large icon
layout. Note how the Sample Data will need an image and 2 text strings.
2. Now that you have decided which layout to use, open a new instance of Blend and create a Windows Phone Application.
3. Start creating your new Sample Data by clicking the "Create sample data" button and choosing "New Sample Data..." in the Data Pane.
4. Edit your data to have one image and two text strings (to add a new item, click the "+" icon). For this example, the primary text is set to max word count of 4, max word length of 6 and Subtext set to max word count of 6
and max word length of 7.
5. Click, drag and drop the Collection into the ContentPanel (in the Objects and Timeline pane) of your PhoneApplicationPage to create a new Listbox with your Sample Data. Set the auto size to fill.
6. Edit the ListBox ItemTemplate (right click on the ListBox > Edit Additional Templates > Edit Generated Items > Edit Current) and delete the StackPanel so you can replace it with the WP7 large icon template.
7. Now we can start pasting the WP7 large icon template. Go back to the WP7 Design Templates.xaml.
In the Projects pane, open the Controls folder and copy the MultilineItem.cs (our developer created this piece of code which allows the Primary and Subtext to have different styles). Paste it into your PhoneApplicationPage's Project pane and BUILD
the project (Ctrl+Shift+B) to synch with the added MultilineItem.cs.
8. Back in the Design Templates for WP7 project, edit the large icon ContentTemplate (right click on the list_view_large_icon ListBoxItem > Edit Additional Templates > Edit Generated Content (Content Template)
> Edit Current). Once in the ContentTemplate, copy the Grid and paste it into your Windows Phone application's ItemTemplate, replacing the previously deleted StackPanel with the new Sample Data.
9. Drag and drop the Primary_text and Subtext into the respective TextBlock of your new StackPanel (shown below). Use the Rectangle as a Clipping Path for your images (select both Rectangle and your image > right
click menu > Path > Make Clipping Path > Edit Current) or replace it with an ContentPresenter.
10. That's all. The final application should look like something like this:
We hope you will find these useful and your feedback is always welcome. Enjoy!