×
Namespaces

Variants
Actions
Revision as of 18:13, 30 March 2013 by joaocardoso (Talk | contribs)

Theme aware Windows Phone application

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to make a theme-aware Windows Phone app.

SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Tested with
SDK: Windows Phone SDK 7.1
Devices(s): Windows Phone 7 Emulator
Compatibility
Platform(s): Windows Phone 7 and later
Windows Phone 8
Windows Phone 7.5
Article
Created: SeemaB (28 Sep 2011)
Updated: hamishwillee (28 Mar 2013)
Last edited: joaocardoso (30 Mar 2013)

Contents

Introduction

Windows Phone themes are very basic, consisting only of whether the background is light or dark (default), and an accent color.

Windows Phone defines ten accent colors: magenta, purple, teal, lime, brown, pink, orange, blue, red, green (Lumia devices also include the accent color "Nokia Blue"). Note that Application Bar button icons should have a transparent back-ground and white foreground so that they are theme compatible.

Accent color and background settings dialogs

Supporting themes and accent color is important for the following reasons:

  • Application look and feel is one of the important aspects along with its use and functionality.
  • User wants to use your application more and more if it appears visually attractive and goes in the flow of the overall phone theme.
  • Windows 7 Phone allows the application look and feel adapt as per the theme and accent color chosen by the user for the phone.
  • Theming allows you to convey aspects of your application branding


This article shows how to get the current theme and accent color, and use them in your app.

How to get current theme

Code to determine the theme background:

// Determine the visibility of the dark background. 
Visibility darkBgTheme = (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
// Write the theme background value.
if (darkBgTheme == Visibility.Visible)
{
//Set resources according to dark theme
}
else
{
//Set resources according to light theme
}

How to get current accent color

Code to determine the theme accent color:

Color accentClr = 
(Color)Application.Current.Resources["PhoneAccentColor"];

How to use the accent color in XAML

Theme-aware applications work well with the theme and accent set by the user. To make XAML controls "accent-aware", developers must use the staticResource definition.

For example:

  • To make a TextBlock theme-aware use the Style property
    <TextBlock Style="{StaticResource PhoneTextAccentStyle}"/>
  • To make a Rectangle theme-aware use the Fill property:
     <Rectangle Fill="{StaticResource PhoneAccentBrush}" />

How to set the background in XAML

Similarly, we also use the staticResource definition to set the background. In the XAML below we create a button with different background based on PhoneTheme:

<StackPanel>
<Button Height="70" Visibility="{StaticResource PhoneDarkThemeVisibility}" Width="70" BorderBrush="{x:Null}" Click="button_viewprofile_Click">
<Button.Background>
<ImageBrush ImageSource="/Resources/Images/WhiteArrowImg.png" />
</Button.Background>
</Button>
 
<Button Height="70" Margin="-10,0,0,0" Visibility="{StaticResource PhoneLightThemeVisibility}" Width="70" BorderBrush="{x:Null}" Click="button_viewprofile_Click" >
<Button.Background>
<ImageBrush ImageSource="/Resources/Images/Black_ArrowImg.png" />
</Button.Background>
</Button>
</StackPanel>

Below is the snapshot of Resource Dictionaries which can be accessed in Properties Box for the control.

Win 7 Properties.jpg
402 page views in the last 30 days.
×