Tuesday, September 14, 2010

Being theme aware in Windows Phone 7 Silverlight apps

by vbandi via VBandi's blog on 9/14/2010 5:29:00 PM

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:

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

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:

And here it is in the light/red theme:

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:

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!