|
by
kirupa | 13 September 2010
Have questions? Discuss this Windows Phone 7 tutorial
with others on the forums.
As you probably know,
users can change their theme in Windows Phone 7 to
be either Dark or Light.
This choice has the effect of making your
applications look drastically different depending on
which theme was chosen. Don't let this scare
you though.
When designing your
application, as long as you don't go out of your way
to override the default brushes, you do not have to
think a whole lot about this. The system will
automatically adjust your application's colors to
match the colors defined by the Dark or Light theme.
In other words, things just work TM.
With that said, there may be times
where you want to do something special given the theme a
user is in. After all, seeing only the colors
change when a user switches themes seems kind of
boring! Let me demonstrate what you can do.
The following video shows an
example of a small application that displays a
different image depending on whether you are viewing
this application through the Light theme or the Dark
theme:
[ the graphics were created by
Daniel Cook of LostGarden fame! ]
In this article, you will learn the few lines of
code that are needed to help you detect the theme at
runtime. So, let's get started!
Make
sure you have everything up and running to do
Windows Phone development. You'll definitely need to
use either Expression Blend or Visual Studio to
follow along or to build the sample application you
see above.
The approach we will be
taking for detecting the theme is not particularly
clever, but it works! By default, all of the colors
that define your application are provided via
brushes defined by the operating system itself. When
you change the theme, a handful of these brushes are updated to
match the new colors the theme specifies. One such
brush is the PhoneBackgroundBrush.
For example, here is what the color of the PhoneBackgroundBrush
is in the Light theme:
Here is the same brush in the Dark theme:
Notice that its color
changes from a white color in the Light theme to a
black color in the Dark theme.
Let's use this to our
advantage. In our application, by checking the color
of the PhoneBackgroundBrush brush, we can infer what theme
a user has set. If this brush's color is black
(#FF000000), then
we know the user is in the Dark theme. If this
brush's color is white (#FFFFFFFF), then we know the user is in
the Light theme. Let's translate this into code!
The code for detecting the theme using the approach
described in the previous section is:
- private
Color
lightThemeBackground
=
Color.FromArgb(255,
255,
255,
255);
- private
Color
darkThemeBackground
=
Color.FromArgb(255,
0,
0,
0);
-
- public
MainPage()
- {
-
InitializeComponent();
-
- DisplayState();
- }
-
- private
void
DisplayState()
- {
- SolidColorBrush
backgroundBrush
=
Application.Current.Resources["PhoneBackgroundBrush"]
as
SolidColorBrush;
-
- if
(backgroundBrush.Color
==
lightThemeBackground)
- {
- // you are in
the light theme
- }
- else
- {
- // you are in
the dark theme
- }
- }
Now that you have the code, let's look at it in
greater detail to understand how it works.
The first thing I do is hard-code two variables that
define the light and dark colors the
PhoneBackgroundBrush brursh will have:
- private
Color
lightThemeBackground
=
Color.FromArgb(255,
255,
255,
255);
- private
Color
darkThemeBackground
=
Color.FromArgb(255,
0,
0,
0);
Like I mentioned earlier, PhoneBackgroundBrush has a
Color value that is #FFFFFFFF in the Light theme and
#FF000000 when in the Dark theme. I am explicitly
defining those colors in the Color objects
lightThemeBackground
and darkThemeBackground.
I will use these values to compare with the actual
color of the PhoneBackgroundBrush in my application.
What we need now is our application's
PhoneBackgroundBrush. Since it is an
application-level resource, you can extract it as
follows:
- SolidColorBrush
backgroundBrush
=
Application.Current.Resources["PhoneBackgroundBrush"]
as
SolidColorBrush;
Notice that the key I pass in to our Resources
collection is the name of the brush itself -
PhoneBackgroundBrush. What gets returned is
something of type SolidColorBrush, and I associate
that brush with the variable called
backgroundBrush.
Now that I have the current value for
PhoneBackgroundBrush in my
backgroundBrush
object and the two color values the background brush
can be (lightThemeBackground and
darkThemeBackground), all that is left is to do a simple
comparison:
- if
(backgroundBrush.Color
==
lightThemeBackground)
- {
- // you are in
the light theme
- }
- else
- {
- // you are in the dark
theme
- }
If my backgroundBrush object's Color value is the
same as the lightThemeBackground Color, then you
know that our application is currently in the Light
theme. If the values aren't equal where my
backgroundBrush.Color
value returns #FF000000 for the Dark theme, then the
else portion of
this if/else statement will kick in.
Already! You are now done with
this short article. Like I mentioned earlier, the OS will
take care of swapping all of the colors
automatically for your application when the theme or
accent color is changed. If you want to perform
some custom tasks such as displaying a different
starting page depending on the theme selected, the
code presented here should help you out.
Below, in case you
want to see a working example, you can
download the source files for the small project I
showcased in the video earlier:
If you liked the
graphics used in my example, please visit Daniel
Cook's excellent blog,
LostGarden.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
