×
Namespaces

Variants
Actions
Revision as of 08:33, 30 November 2012 by hamishwillee (Talk | contribs)

Theme aware Windows Phone application

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to make 'Theme Aware' app on Windows Phone 7.

SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
CompatibilityArticle
Created: SeemaB (28 Sep 2011)
Last edited: hamishwillee (30 Nov 2012)

Contents

Introduction

Theming is important for the following reasons:

  • Application look and feel is one of the important aspects along with its use and functionalities.
  • 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

Windows Phone 7 Theme, Accent Colors and Application bar Icons

Windows Phone 7 theme is made up of 2 components: background and accent color.

There are two background settings—Dark (default) and Light. Win7Theam Aware.png

There are Ten accent colors:

  1. Magenta
  2. Purple
  3. Teal
  4. Lime
  5. Brown
  6. Pink
  7. Orange
  8. Blue
  9. Red
  10. Green

Nokia Windows Phone devices also include Nokia Blue as an accent color option.

Transparent back-ground and white foreground is the advised way to design icons for the buttons in the Application Bar so that they are theme compatible.

Adding Theme Aware control placing in xaml

we can use this below xaml to have different controls based Phone Theme (In this below example created 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>


Determining Current Theme And Accent Color

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
}

Code to determine the theme accent color

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

Using Accent Color In Application

To make the controls Theme Aware, developer must use the staticResource library.

For example:

  • To make a textblock Theme aware use the below Style property
    <TextBlock Style="{StaticResource PhoneTextAccentStyle}"/>
  • To make a rectangle theme-aware use the below Fill property
     <Rectangle Fill="{StaticResource PhoneAccentBrush}" />
  • Below is the snapshot of Resource Dictionaries which can be accessed in Properties Box for the control.

Win 7 Properties.jpg

By using this properties, developers can make sure that there application will now having look and feel as per the theme and accent setup by the user.

411 page views in the last 30 days.
×