Creating WP7 Custom Theme - Best Practices

published on: 4/3/2011 | Views: N/A | Tags: Styling UI BestPractices

by WindowsPhoneGeek

This is the third article from the "Creating WP7 CustomTheme" series of articles in which I try to explain everything you need to know about theming in Silverlight for Windows Phone 7.

• Creating WP7 Custom Theme - Basic Theme Implementation
• Creating WP7 Custom Theme - Complex Theme
• Creating WP7 Custom Theme - Best Practices

I am going to talk about best practices when implementing a custom WP7 application theme.

Icons and Images

Icons/images are often used when implementing a composite WP7 app theme. (For example you can add icons to the button ControlTemplate so that the standard button will look like an ImageButton).

For a better performance we would suggest that you compile your images with a "Build Action" of "Content" instead of the default "Resource". When adding new images to your project by default the  "Build Action" is set to "Resource" (under the Properties window). Make sure to always change this to "Content" in order to reduce the size of your DLL, speeding up both app load and image load.

NOTE: Wherever possible (if the image has no transparency) use JPEG images since these decode faster than PNG.

For reference take a look at our articles:

• WP7 working with Images: Content vs Resource build action
• Creating theme friendly UI in WP7 using OpacityMask 

Resources

Basically the most important files that you will need to modify are:

ThemeResource.xaml

This file contains all  SolidColorBrushes, Colors and TextBlock resources.

Here you can find a list of all available resources: Theme Resources for Windows Phone

System.Windows.xaml

This is a more complex file. It contains all Styles/ControlTemplates of the default controls from the SDK like: TextBox, ListBox, Button, etc.

NOTE: Whatever changes you make to the control styles make sure that the final result fits in the Metro Design UI. It is probably a bad idea to change the appearance of the ToggleButton or ScrollViewer for example because your users will expect to see such controls in a WP7 Merto Like Style. However you are free to change the colors, sixes, etc.

NOTE: You can modify only some of the resources or all of them.

PortableUserInterface.Metro.CompositeFont

This file contains important information related to the Metro UI FontFamily, FontSize, etc. I would suggest that you should be careful with this file. It if possible try to not modify it!

NOTE: You have to include the brush resources (for example: CustomThemeResources.xaml) at the beginning of CustomThemeStyles.xaml (this is the file which contains all Styles/ControlTemplates) otherwise the changed colors(brushes) will not be applied to the customized Styles:

NOTE: You have to add "x:Key" attribute to each of the Styles because of the lack of Implicit Styles in WP7.

For reference take a look at our articles:

• All about ResourceDictionary in WP7
• How to define and reuse resources in WP7
• Working with ControlTemplates in Silverlight for WP7
• Creating WP7 Custom Theme - Basic Theme Implementation
• Creating WP7 Custom Theme - Complex Theme

Control Template Elements

A ControlTemplate specifies the visual structure and visual behavior of a control. You can completely customize the look and feel of a control by giving it a new ControlTemplate. When you create a ControlTemplate, you replace the appearance of an existing control without changing its functionality.

NOTE: ControlTemplate is a part of the control Style. It is set through the Template property.

NOTE: Change the ControlTemplate only if necessary and there is not another option, like for example when you want to customize the VisualStates or the whole  behavior of a particular control.

NOTE: Note that when changing the ControlTemplate it is important to include all required parts. Even if your code compiles, some of the functionality may be subject to impact due to the omission of the required parts. More information about the control parts you can find here. So I would suggest that you use ExpressionBlend in order to make sure that the newly created Style/ControlTemplate is consistent!

Showing/hiding elements in the ControlTemplate (using Visual States) is a common scenario for most WP7 controls. You will improve your performance by using the UIElement.Opacity property with bitmap caching.

For reference take a look at our article:

•  Working with ControlTemplates in Silverlight for WP7

For Reference you can also visit: ControlTemplate on MSDN

Styles

Merged resource dictionaries enable you to split your styles into different XAML files.

NOTE: When you build a composite WP7 application with lots of controls it is essential that the whole UI will remain consistent in all themes. This is also an important part of the Windows Phone 7 Application Certification Requirements (Here's a direct link to the PDF file).

For reference take a look at our articles:

• Tips when using Styles in WP7
• Customizing WP7 Slider in different ways
• How to get and edit the default Styles of the Silverlight for WP7 Toolkit controls
• WP7 working with VisualStates: How to make a ToggleSwitch from CheckBox

Top 10 Things to consider

1. You do not need to include all control Styles in your theme but only the changed ones. I.e if you do not include any Style this means that your app will use the Default one.

2. All included Brushes/Colors will override the default ones.

3. Always try to reuse Brushes/Colors instead of creating  new ones (multiple copies).

4. PhoneAccentColor , PhoneForegroundColor and PhoneBackgroundColor are basic colors so you have to pay attention when changing them.

5. The easiest way to modify Styles/ControlTemplates is by using Expression Blend. (Note that you can use VisualStudio as well but it has only limited design tools)

6. In WP7 you can not apply a global Style that will be applied to all controls of a particular type. This is because of the lack of Implicit Styles in Silverlight 3. So, when adding a custom Style to your app you have to add "x:Key" attribute to the Style and after that use it as a StaticResource.

7. Implicit Styles are a feature of Silverlight 4 (and WPF). Windows Phone 7 is based on Silverlight 3+(with a few Silverlight 4 features added) so since there's no Implicit Styles in Silverlight 3 this mean that there no way to use Implicit Styles in Windows Phone 7 as well.

8. It is essential that your final theme remains consistent with the Metro UI.

9. Try to use the same pattern when customizing the appearance of the controls.

10. It is very important to determine whether you need a whole new application theme or just a few custom Styles.

That was all about Best Practices when creating a custom application theme in Silverlight for Windows Phone 7. I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Creating WP7 Custom Theme - Best Practices'

Title Your Name

Comment