WPF - Control over blending between semi-transparent layers

Question

In digital imaging, when overlaying two visual layers there are multiple ways you can calculate the image that results when light from a lower layer shines through an obstructing layer in some way. This can offer effects that do not occur as natural phenomenon, such as multiplying colours.

Here's an example of the layer blending mode menu provided in Photoshop:

_{(source: psdtop.com)}

I recommend visiting the article Understanding Blending Modes if this topic isn't something you're familiar with. It provides a great showcase of the results of each option against two layers.

As far as I can tell, WPF only provides the 'Normal' option. That is, the following UI just blends colours as though they were coloured gels:

<Grid>
  <Ellipse Width="40" Height="40" Fill="#80FF0000" Margin="16,0,0,0" />
  <Ellipse Width="40" Height="40" Fill="#8000FF00" Margin="32,32,0,0" />
  <Ellipse Width="40" Height="40" Fill="#800000FF" Margin="0,32,0,0" />
</Grid>

Which looks like this:

I'd like to know if there's any way to control the way in which layers blend.

Answer 1

What you are looking for is called blend modes.

Here is a simple example of how it can be achieved using pixel shaders. You would use multi-input shader effect for this.

Here is a very good complete tutorial that walks you through creating a reusable library of blend modes using a multi-input shader effect.

Blend modes as an intrinsic part of the WPF APIs have been frequently requested since early CTPs but never made it into the product.

Answer 2

Just ran into this question ... but you can use my blend mode library to do this in certain situations (unfortunately there are some limitations ... we really need this capability burned into the WPF API).

bitbonk references the beginning post in my blog series ... but every post has source code and binaries attached for the blend mode library itself.

Here is the series so-far (in chronological order). I do want to write one more post on how these blend modes can be used ... and what value they bring to the table.

• Blend Modes, Part I
• Blend Modes, Part II
• Blend Modes for Silverlight
• Blend Modes, Part III
• Blend Modes: Now Opacity Aware
• Blend Modes: Hue, Saturation, Color, and Luminosity with WPF 4.0

If I could point you to one set of source code/binaries to use, it would be the one where I make the blend mode library opacity aware. This is the latest and greatest bits that work on both WPF and Silverlight. The final post which has the hue, saturation, color, and luminosity effects is a WPF only version of the library, as Pixel Shader 3.0 is required for these effects and currently only WPF 4.0 supports that.

Good luck and let me know if you use my library!

Answer 3

I believe you you'll have to write a custom shader effect to make WPF blend colors in a different way.

http://msdn.microsoft.com/en-us/library/dd901594(VS.95).aspx Scroll to Creating a Custom Pixel Shader Effect

It's not a trivial thing, I understand. Sometimes it's easier to compromise by using static graphic resources. Our UI designer cannot live with WPF color blending, so some parts of our interface use simple .png files where he absolutely had to have it look a certain way.