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.
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:
Figure 2: Default Windows Phone Application
Now, let us change the theme accent color to brown and see
how our application looks.
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.