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:

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 the author

Simon Cooke is an occasional video game developer, ex-freelance journalist, screenwriter, film-maker, musician, and software engineer 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 by them (and barely even one by him most of the time).

Archived Wordpress comments
Joost van Schaik wrote on Monday, February 20, 2012:

Dear Mr Cooke,

I noticed your comment 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.


Joost van Schaik

facebook comments