6

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.

Community
  • 1
  • 1
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742

3 Answers3

7

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.

user3797758
  • 829
  • 1
  • 14
  • 28
bitbonk
  • 48,890
  • 37
  • 186
  • 278
  • Thanks for this. It's unfortunate that they're not supported, but Adam Smith does a good job of explaining why that's the case at the link you provided. Cory Plott's three-part tutorial makes for good reading too. – Drew Noakes Nov 02 '09 at 22:44
  • Thanks for the compliment Drew! The series now has 6 posts with one more planned in my head. – cplotts Dec 11 '09 at 20:30
5

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.

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!

cplotts
  • 13,941
  • 9
  • 55
  • 66
  • Cheers Cory for your work in this area. I agree it would be great to have support for this in the framework itself (and Adam Smith goes some way to explaining why this isn't in there yet http://social.msdn.microsoft.com/forums/en-US/wpf/thread/e41de282-7d7a-4127-9d8d-815e66354a87/). – Drew Noakes Dec 20 '09 at 22:45
  • Thanks Drew. Yeah, great explanation ... isn't it. You'll notice that I commented in the thread. :) – cplotts Dec 21 '09 at 00:41
  • Does this stuff work with WinRT/Windows Store apps? I have something I need some "darken" blending modes for. – Ani Feb 20 '13 at 05:05
  • @ananthonline That is a good question. Currently, the stuff that is available is only for WPF and Silverlight. Also, I do not know if the WinRT XAML stack supports GPU effects ... if it does, then you could very likely take the Silverlight version and build a WinRT version of the library. – cplotts Feb 20 '13 at 15:48
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.

Egor
  • 1,838
  • 13
  • 14