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)

But 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'.