How to Use Themes in Your Windows Phone Application

Introduction

The Windows Phone operating system ships with a set of resources that can be used to personalize the visual elements on the Windows Phone. These resources are called themes and are like the desktop themes that ship with desktop operating systems we have come to love over the years.

Application developers can create applications that can blend into the user's choice of theme, which makes the application feel more personalized. Some of the settings that can be personalized to the user's taste include background colors and accent colors. Having theme support in your application ensures consistent UI experience across various Windows Phones.

Themes for the Windows Phone Platform

A theme can be defined as a combination of a background and an accent color (color defined on the controls and visual elements on the screen).

Backgrounds can be either "Dark" or "Light".

Accent colors can be one of the following:

  • Magenta
  • Purple
  • Teal
  • Lime
  • Brown
  • Pink
  • Orange
  • Blue
  • Red
  • Green

When a user applies a theme (either background or accent colors or both), the changes are applied throughout the operating system and are not restricted to just one application.

Themes are implemented through resources and resource dictionaries, and can be applied in the application design using control properties.

Example of using the resource dictionaries to set the Fill property
Figure 1: Example of using the resource dictionaries to set the Fill property

The above diagram is an example of using the resource dictionaries to set the Fill property from system defined options.

B We can see that we can set the Fill property to "PhoneAccentBrush", "PhoneBackgroundBrush", etc. or you can set it to a constant.

How Themes Work

Each theme has its own definition of resources to be used. For example, the Teal accent colors will have a value of PhoneAccentBrush, which will be a different property from what the Lime accent color will define. So when a user applies a theme, the PhoneAccentBrush property for the whole Windows Phone platform gets set. If the user wanted to make their application customizable with the Windows Phone theme, they should use the property from the StaticResource library instead of defining their own.

You can check out the definitions of the various theme resources in your Windows Phone SDK folder at C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design. Check out the System.Windows.xaml and ThemeResources.xaml.

Hands-On

Let us start a hands-on example. Create a Silverlight for Windows Phone application titled WindowsPhoneThemeDemo.

In the ControlPanel Grid of the application, go ahead and add an ellipse, a couple of textblocks and a rectangle from the ToolBox.

If you prefer, you can copy the following highlighted code in your mainPage.xaml.

<phone:PhoneApplicationPage 
 x:Class="WindowsPhoneThemeDemo.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
 FontFamily="{StaticResource PhoneFontFamilyNormal}"
 FontSize="{StaticResource PhoneFontSizeNormal}"
 Foreground="{StaticResource PhoneForegroundBrush}"
 SupportedOrientations="Portrait" Orientation="Portrait"
 shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/></Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Ellipse Height="100" HorizontalAlignment="Left" Margin="12,33,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="{StaticResource PhoneAccentBrush" />

             <TextBlock Height="45" HorizontalAlignment="Left" Margin="20,154,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="213" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeLarge"/>
            <TextBlock Height="28" HorizontalAlignment="Left" Margin="21,232,0,0" Name="textBlock2" Text="TextBlock" VerticalAlignment="Top" Width="139" Style="{StaticResource PhoneTextAccentStyle"/>
            <Rectangle Height="100" HorizontalAlignment="Left" Margin="88,377,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="{StaticResource PhoneAccentBrush}" />

</Grid></Grid>

	<!--Sample code showing usage of ApplicationBar-->
	<!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems> 
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

Note, that in the above highlighted section, we have defined certain properties to be theme-defined by setting them to a value defined as static resource.

Let us understand them one by one.

<Ellipse Height="100" HorizontalAlignment="Left" Margin="12,33,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="{StaticResource
PhoneAccentBrush}" />

We see that the Fill property for the Ellipse is set to be the StaticResource PhoneAccentBrush, which is defined by your theme.

Similarly, we can see the properties for the other controls we added.

<TextBlock Height="45" HorizontalAlignment="Left" Margin="20,154,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="213" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeLarge}"/>

<TextBlock Height="28" HorizontalAlignment="Left" Margin="21,232,0,0" Name="textBlock2" Text="TextBlock" VerticalAlignment="Top" Width="139" Style="{StaticResource PhoneTextAccentStyle}"/>

<Rectangle Height="100" HorizontalAlignment="Left" Margin="88,377,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="{StaticResource PhoneAccentBrush}" />

Running the Application

Now let us run our application. When we first run our application, we see the application looks like the screenshot below:

Default Windows Phone Application
Figure 2: Default Windows Phone Application

Now, let us change the theme accent color to brown and see how our application looks.

Windows Phone Application b Theme Color Brown
Figure 3: Windows Phone Application - Theme Color Brown

We see that our application has changed and looks personalized to the current theme.

If you are having trouble in setting this up, you can download a sample code snippet from the download location for this article.

Summary

In this article, we learned how to make our applications theme-aware and blend with the user's choice of theme.

I hope that you have found this information useful and will be able to write Windows Phone applications that are more personalized.



About the Author

Vipul Vipul Patel

Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: August 14, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Data protection has long been considered "overhead" by many organizations in the past, many chalking it up to an insurance policy or an extended warranty you may never use. The realities of today make data protection a must-have, as we live in a data driven society. The digital assets we create, share, and collaborate with others on must be managed and protected for many purposes. Check out this upcoming eSeminar and join eVault Chief Technology …

  • Protecting business operations means shifting the priorities around availability from disaster recovery to business continuity. Enterprises are shifting their focus from recovery from a disaster to preventing the disaster in the first place. With this change in mindset, disaster recovery is no longer the first line of defense; the organizations with a smarter business continuity practice are less impacted when disasters strike. This SmartSelect will provide insight to help guide your enterprise toward better …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds