Working with Themes in WP7

Introduction:
 
In this article we are going to see how to effectively use Themes in Windows Phone 7 development. As we all know a theme is a set of resources which are used to maintain the consistent look and feel for all the controls and resources used with in the Windows Phone 7 Application. Windows Phone 7 Themes plays a major role when developing applications where colors plays an important role..
 
Some of the advantages of using the Themes in Windows Phone 7 development is consistency across the default controls used with in the application without adjusting some of the common properties like colors, fonts, styles etc. We can override the theme anytime at run time and in the application level with out doing much changes. Themes in Windows Phone 7 is a combination of a background and an accent color. Background color is basically the background image color which we use in our application and accent color is the one that is applied to the controls used with in the application.
 
Background color with Windows Phone 7 have 2 options one is Light Color and other is the dark Color and as far as Assent color considered we have 10 options which we will see in detail in our upcoming articles. Windows Phone 7 Theme are selected using the Setting options, when the user selects the theme complete application system gets changed, but again when we change some other theme only the theme related color changes with in the application scope.
 
Theme resources are normally maintained in the TthemeResource.XAML file, the resources are maintained based on the background color and the accent color selected by the user or the developer. Theme resources files are available on the below location based on the OS which we are using.

•  64-bit - DriveName\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design
•  32-bit - Drive\Program Fles\Microsoft SDKs\Windows Phone\v7.1\Design

Let us jump start to see the step by step process on how to use the themes in windows phone 7 development.

Steps:

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 application with a valid project name as shown in the screen below.

Now let us start with adding some colorful controls to the MainPage.XAML file and see how the UI gets affected when changing the theme. Just copy the below XAML code or drag and drop the controls from the tool box and design the UI as shown in the screen below to get the same look and feel.

XAML Code:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Themes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--<span class="hiddenSpellError" pre="">ContentPanel</span> - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Rectangle Height="235" HorizontalAlignment="Left" Margin="38,33,0,0" Name="rectangle1"Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="1"      VerticalAlignment="Top"
    Fill= "{StaticResource PhoneAccentBrush}" Width="163" /> 
    <Rectangle Height="235" HorizontalAlignment="Left" Margin="259,33,0,0" Name="rectangle2"       Stroke="Aqua" StrokeThickness="1" VerticalAlignment="Top" Width="163"      Fill= "Aqua"/>      
    <Ellipse Height="253" HorizontalAlignment="Left" Margin="38,329,0,0" Name="ellipse1"Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="1" VerticalAlignment="Top"
       Fill= "{StaticResource PhoneAccentBrush}" Width="163" />     
    <Ellipse Height="253" HorizontalAlignment="Left" Margin="259,329,0,0" Name="ellipse2" Stroke="Beige" StrokeThickness="1" VerticalAlignment="Top" Width="163"
       Fill= "DarkGreen"/>
</Grid>

In the above XAML code, if we noticed we have added 2 Rectangles and 2 Eclipses to differentiate the usage of themes in real time. The first Rectangle is designed to get the application resources details to fill the shape border color and background color, where as for the 2nd rectangle we have directly specified the color without getting the resources from the application resource. Similarly we have done the same with the Eclipse as well that the first one uses the application resource and the 2nd directly assigned with the color.

Now to tell the Windows Phone run time environment to take care of the necessary changes the theme has to do for the selection add the below code to the MainPage.XAML.cs page constructor as shown in the screen below.

Code Behind:

// Background Colour
Visibility darkBackgroundVisibility = (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
       //Accent Colour
Color currentAccentColorHex = (Color)Application.Current.Resources["PhoneAccentColor"];



Now we are done with our code and we will build and execute the application by pressing F5 directly and we can see the application loads to the Windows Phone 7 Emulator as shown in the screen below.
 


We can see the output shows the different colour for the first rectangle and the first eclipse since we have assigned the Application resource where themes comes into the picture. Now let us change the theme and see how the theme affects the images. Click on the Start button from the emulator and go the application listing and select setting and then themes options. Now change the Background and the Accent colour and go back to the application to check the output we can see the colour again changes for the first rectangle and the first eclipse since they are controlled with the application resource as shown in the screens below.



Now on changing the themes we can see the complete colour shifting as shown in the screens below which is self explanatory.



Conclusion:

So in this article we have seen what are themes in Windows Phone 7 development and the difference between using the theme and not using theme when application resources are used in real time.