Colorizing images for Windows Phone 7 | Accidental Scientist

Colorizing images for Windows Phone 7

I know what you’re thinking… I have these great icons, and I want to display them in the system color. I need to use a PixelShader. Or some other kind of ShaderEffect.
Well, sure, you could do it that way… but that’s overkill. Instead, allow me to introduce you to the OpacityMask.
Here’s the idea: you paint a rectangle the size of the icon you want to render. Fill it in the color you want to paint with. And set the OpacityMask of the icon to the image you want to use as the outline.
For example:

<rectangle height=”64″ width=”64″ fill=”{StaticResource PhoneAccentBrush}”>
<rectangle.opacitymask>
<imagebrush imagesource=”img\ThumbsUp.png”>
</Rectangle.OpacityMask>
</rectangle>
And hey presto! One neatly colored image, for very minimal fuss. Doesn’t work for tinting, but certainly works for rendering icons in the right color for the UI.

About Simon Cooke

Simon Cooke is a video game developer, ex-freelance journalist, screenwriter, film-maker and all-round good egg in Seattle, WA. The views posted on this blog are his and his alone, and have no relation to anything he's working on, his employer, or anything else and are not an official statement of any kind.
facebook comments
blog comments

One Response to Colorizing images for Windows Phone 7

  1. Joost van Schaik says:

    Dear Mr Cooke,

    I noticed your comment http://dotnetbyexample.blogspot.com/2011/01/displaying-image-in-windows-phone-7.html?showComment=1329456661561#c8136769235090659584. I don’t know how you stumbled upon my blog, but if you are a regular reader you may have noticed I always include links to people whose samples I expanded upon. It’s not my style to copy without credits, that’s beside the whole point of my blog. I honestly never saw your post, I pieced the code together from a multitude of half-assed samples all over the internet. The fact that even the image is called ‘thumbsup’ must be an uncanny coincidence.

    Anyway, I hope I have convinced you of my honesty. I published your comment to my blog and also wrote an update on the article acknowledging the fact you had this idea before me. But like I said, I never saw this.

    I hope the matter has been settled sufficiently.

    Regards,

    Joost van Schaik