h3mm3's blog

Stories from behind the keyboard

  • RSS
  • Twitter

imageWhen you develop a Windows Phone 7 application that reflect the user theme, you are practically limited and bound to an handful of color resources: the background color, the foreground color, the accent color and a few more. Referring to these resources in you XAML is super simple: once you know all the various theme resources,  you can apply any resource in your code via the {StaticResource} markup extension.

Things may get a bit more complicated if you have custom raster graphics, such as a logo or background illustrations, and you want them to observe the user theme. As long as you don’t want to create all possible combinations of [black/white] plus all available accent colors (8 accent colors so far), you can use the following guide.

Step 1: Monchromaticity

Design with only one color. Just think in term of gradations of opacity and paint like on glass. This is similar to drawing in gray scale, but instead of filling a raster image with shades of gray, you start from a transparent canvas and draw with just one color (say white). For instance, using Paint.NET you can easily draw something like this:


(The transparency checkerboard is there only to point out what pixels are opaque, and in what measure).

Step 2: Opacity

Technically speaking, you are drawing an alpha channel canvas; during this process, you totally neglect colors and focus on the opacity/transparency of the strokes. The final colors will be the result of the application of user theme settings (that’s to say, the background, the foreground and/or the accent color). For instance, we could give the smile a skin tone of 50% opacity (in Paint.NET you do this by filling the area with the paint bucket, with white, 127 alpha).


Step 3: XAML and resources

Now you can save your artwork as a PNG, import the file in your Visual Studio project and use it in your XAML. For instance, let’s put Smile.png to the PhoneApplicationPage background:


Now that we have a solid background, our smile looks bald and consistent. Anyway, after we run the application and switch to the “light” theme, Mr. Smile disappear!

image image

Step 4: Overlay masks

Of course the image is still there but it’s the same color of the background, so we cannot see it anymore. On the contrary we can still read the application title (MY APPLICATION) and the page name, because they are written dark over light now. This is the effect we aim to achieve for Mr. Smile: being drawn in white when the background is black, and being drawn in black when the background is white.

Let’s start making an explicit use of a color resource: {StaticResource PhoneForegroundBrush}. We can draw a square and fill it with the theme foreground color:


At this point, you can run the application and invert the theme: the square will change to black and won’t disappear, since its color is bound to the theme foreground color now.

The last touch is using Mr. Smile as an opacity mask. This way, its pixels will say how much each corresponding pixel of the rectangle is opaque, based on the smile’s alpha channel. The final result just what we need:


..and of course it works fine with the inverted theme.


If you want to use the accent color, just replace {StaticResource PhoneForegroundBrush} with {StaticResource PhoneAccentBrush} and you are done.

image image

Happy masking!

No comments: