×
Namespaces

Variants
Actions
Revision as of 11:23, 14 October 2013 by yan_ (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Theme aware Windows Phone application

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to get and set the current theme background and accent colour.

SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 7.1, Windows Phone 8.0 SDK
Devices(s): Windows Phone 7 Emulator, Lumia 920
CompatibilityArticle
Created: SeemaB (28 Sep 2011)
Updated: yan_ (03 Apr 2013)
Last edited: yan_ (14 Oct 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 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 background

To get theme background, you can use PhoneDarkThemeVisibility resource. Its type is System.Windows.Visibility enum

using System.Windows
 
bool DarkThemeUsed ()
{
return Visibility.Visible == (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
}
 
bool LightThemeUsed()
{
return Visibility.Visible == (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"];
}
 
...
 
// Write the theme background value.
if (DarkThemeUsed ())
{
//Set resources according to dark theme
}
else
{
//Set resources according to light theme
}

How to get current accent color

Accent color is given by PhoneAccentColor ressource. Its type is System.Windows.Media.Color.

 using System.Windows.Media;
 
Color AccentColor()
{
return (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


Test code

A code example/test code can be downloaded from here: Media:ThemeBackgroundAccentColor.zip

The example app simply uses the previous c# function to display current theme background and accent color of the device. A rectangle is filled with accent color.

References

This page was last modified on 14 October 2013, at 11:23.
410 page views in the last 30 days.
×