Tint a partially transparent image in WPF

Question

How can I tint/colorize an image in WPF (using MVVM) without sacrificing performance? A purely XAML solution would be ideal, as modifying bitmaps in the code will cause perf

Answer 1

Unlike WinForms/GDI+, WPF does not seem to contain any easy ways to colorize/tint an image as it is being rendered. Two ideas for accomplishing this are, using a shader, or overlaying a colored rectangle over the image.

I decided to try the rectangle route and found that it works. Basically, all you need to do is overlay a colored rectangle over your image, and use an OpacityMask to restrict the color fill to a certain area. OpacityMask is primarily used with paths, but it can take any kind of brush, including an ImageBrush. This means you can use your image as a "stencil" for the colored fill.

Example: (Taken from my application where a user can "highlight" a section of a map, the actual image looks like this)

Before Overlay & Mask

After Overlay & Mask

Here is all of the required XAML for this:

To bind the color to a brush as I did, use a ColorToBrushConverter.