Dotneteers.net
All for .net, .net for all!

Being theme aware in Windows Phone 7 Silverlight apps

VBandi's blog

Syndication

Subscribe

Generic Content

Windows Phone 7 users can customize their phones by choosing between a dark and a light background, and tons of accent colors. The Windows Phone 7  UI Design and Interaction Guide tells us, that it is good to be theme-aware. For example, if the user selects a light background with red accent color, the application should also display its content on a light background with a red accent color.

Built-in Controls

The built-in Silverlight colors do a good job of reflecting the phone theme out of the box. For example, the Slider control always uses the accent color as the fill color. Here is a slider in the default dark/blue theme:

image

And here is the same slider in light/red theme:

image

Drawings, shapes

If you want to draw a shape (for example, a rectangle or an ellipse) in a theme-aware manner, you can invoke some built-in resources. This ellipse will always have the accent color as its fill color:

<Ellipse Stroke="Black">
    <Ellipse.Fill>
        <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
    </Ellipse.Fill>
</Ellipse>

Here is the ellipse in the default theme:

image

And here it is in the light/red theme:

image

You can use similar resource binding techniques in your own controls to make them theme-aware. There are tons of color resources defined, you can see them in Expression Blend:

image

Being theme-aware in code

Sometimes, you cannot just bind to resources, you need to actually use the colors in your code. For example, you may need to draw something on a WriteableBitmap, using the accent color. The same resource can be used from code like this:

Color accent = (Color)Resources["PhoneAccentColor"];

To draw a pixel on the WriteableBitmap with this color, you need to access the WriteableBitmap’s Pixels array (more information here), and set one of its items to an integer value. The following code shows how you can calculate the value based on the accent color acquired before:

uint accentColor = (uint)accent.A * 0x1000000 + 
(uint)accent.R * 0x10000 +
(uint)accent.G * 0x100 +
                   (uint)accent.B;

Now, to set the upper left corner of the WriteableBitmap to this color, all you have to do is:

myWriteableBitmap.Pixels[0] = (int)accentColor;

Small step for a little colored pixel, but a giant leap for Theme Consistency!


Posted Sep 14 2010, 07:29 PM by vbandi

Comments

Twitter Trackbacks for Being theme aware in Windows Phone 7 Silverlight apps - VBandi's blog - Dotneteers.net [dotneteers.net] on Topsy.com wrote Twitter Trackbacks for Being theme aware in Windows Phone 7 Silverlight apps - VBandi's blog - Dotneteers.net [dotneteers.net] on Topsy.com
on Tue, Sep 14 2010 20:01

Pingback from  Twitter Trackbacks for                 Being theme aware in Windows Phone 7 Silverlight apps - VBandi's blog - Dotneteers.net         [dotneteers.net]        on Topsy.com

DotNetKicks.com wrote Being theme aware in Windows Phone 7 Silverlight apps
on Tue, Sep 14 2010 20:11

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Catto wrote re: Being theme aware in Windows Phone 7 Silverlight apps
on Tue, Sep 14 2010 21:28

Hey Now,

Nice Post!

Thx 4 the info,

Catto

Neptune WordPress theme | Script ebooks wrote Neptune WordPress theme | Script ebooks
on Wed, Sep 15 2010 5:45

Pingback from  Neptune WordPress theme | Script ebooks

Dew Drop – September 14, 2010 | Alvin Ashcraft's Morning Dew wrote Dew Drop &ndash; September 14, 2010 | Alvin Ashcraft&#039;s Morning Dew
on Wed, Sep 15 2010 6:44

Pingback from  Dew Drop – September 14, 2010 | Alvin Ashcraft's Morning Dew

NewShine Amazing News | Script ebooks wrote NewShine Amazing News | Script ebooks
on Wed, Sep 15 2010 7:47

Pingback from  NewShine Amazing News | Script ebooks

Web Apps : : Silverlight Cream for September 15, 2010 — #948 - iPhone iPod iPad wrote Web Apps : : Silverlight Cream for September 15, 2010 &#8212; #948 - iPhone iPod iPad
on Thu, Sep 16 2010 9:37

Pingback from  Web Apps : : Silverlight Cream for September 15, 2010 — #948 - iPhone iPod iPad

Windows Phone 7 | The Countdown... wrote re: Being theme aware in Windows Phone 7 Silverlight apps
on Thu, Sep 16 2010 11:43

Great post! Was wondering if this might be made easer by the new Tools out later today, but if not will definitely give your method a try.

Our issue is that we have a background image for an app which is largely black (so fine for the dark background-ed themes) and we can easily adapt it to have a mainly white background (by polarizing it), but are looking for a simple way to tell it to switch between the two based on theme.

Thanks again,

M

George wrote re: Being theme aware in Windows Phone 7 Silverlight apps
on Sun, Oct 24 2010 15:33

Excellent post. Reminds me of when Windows XP theme (manifest) first came out years ago - was scarce information at first. Thanks.

Oleksandr Krakovetskiy blog wrote Дайджест технических материалов #5 (Windows Phone 7)
on Wed, Oct 27 2010 13:13

Tools, Books, Guides Windows Phone 7 Developer Tools RTM (online installer) , ISO UI Design and Interaction

????????? beta??? » Windows Phone 7 ???????????????????????? wrote ????????? beta??? &raquo; Windows Phone 7 ????????????????????????
on Tue, Jun 21 2011 18:33

Pingback from  ????????? beta??? » Windows Phone 7 ????????????????????????

Windows Phone 7 ???????????? | DanceCoder wrote Windows Phone 7 ???????????? | DanceCoder
on Fri, May 18 2012 5:13

Pingback from  Windows Phone 7 ???????????? | DanceCoder