21 January 2011

Displaying an image in Windows Phone 7 accent color

One of the customizing features of Windows Phone 7 is the accent color, which is used to display tiles and certain user interface elements. Default is blue, but I like to play with it (indeed, as the text on the ‘theme’ settings page suggests, to match my mood) and am currently hooked on purple green. Sue me ;-)

When you use vector data or controls, it is possible to use this color by referring to PhoneAccentBrush. For example, if you want a TextBlock’s color to match the accent color, simply add

Foreground="{StaticResource PhoneAccentBrush}"
to the TextBlock. An example of this effect can be seen in my previous post - there is the text "About Sample" shown in blue - the default accent color (screen shot way way below at the end of the post)

handBut it is also possible to show an entire image in the accent color, and it is surprisingly simple. Suppose you want a “thumbs up” image like showed to the right, which I use on the Map Mania credits page. I started out with a simple white-on-transparent background image, and added that to my Windows Phone 7 page like this:

 

<Rectangle Fill="{StaticResource PhoneAccentBrush}" 
     Width="55" Height="68">
  <Rectangle.OpacityMask>
    <ImageBrush ImageSource="icons/thumbsup.png" Stretch="Fill" />
  </Rectangle.OpacityMask>
</Rectangle>

In stead of adding the image directly to your XAML, you add a Rectangle of the same size with a PhoneAccentBrush Fill color, and the image itself as a brush. Presto. Image in accent color – that automatically changes when you change the accent color of your phone.

And that’s all that’s to it. It’s not always complicated architectural things that lighten up your App. ;-)

Update 20-02-2012 Is has been brought to my attention that an older post with nearly identical XAML code has appeared earlier on the "Accidental Scientist" by Simon Cooke. It's uncanny that he even used an identically named image. As my regular readers know I take great pains to link to blog posts or people that inspired me or on whose work I based my examples. For the record: I never saw this blog post when I posted this over a year ago, possibly because of the title, but Mr. Simon Cooke appeared to have this idea earlier than I did. So I hereby acknowledge he has 'prior art credits'.

6 comments:

Anonymous said...

thanks for this tip... works great..

I was unsuccessfully trying to do it the other way around - using a greyscale/alpha image - and then applying the color as an opacity mask. any idea why this doesn't work -

ie.
I previously assumed that the opacity mask should work as a color filter - for example a white image with opacity mask of #FFFF0000 should display a red image.

is that a bug in silverlight?

Joost van Schaik said...

@mobilewares I have no idea if this is a bug in Silverlight. Maybe you want to check you local Silverlight MVP - or else contact Dutch Silverlight MVP and #wp7nl member @Mark_Monster on twitter - he knows about everything about Silverlight

Anonymous said...

I have been working on a control where I want to take a normal image and use it similar to the round app bar images. But have only thought of either using two images (white/black) or creating an extra image in code using Writable bitmaps.

This method is brilliant and should do the trick great tip!

Simon Cooke said...

http://accidentalscientist.com/2010/09/colorizing-images-for-windows-phone-7.html

*ahem*

Joost van Schaik said...

Mr @Simon Cooke
As you might have seen elsewhere I am not the one to copy samples without credits. In fact, I take great pains to make sure I get the credits right. Your post is apparently older than mine, but I swear I never saw it. That's why I publish your link and I will edit the sample accordingly.

Simon Cooke said...

No worries - and wouldn't be the first time I've seen parallel evolution happen :) Thanks for being a good sport about it thought!