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.