#557 – Using an Image As an Opacity Mask
May 14, 2012 1 Comment
You’ll typically use a gradient brush as an opacity mask, to change the opacity of a control gradually.
You can also use an image as an opacity brush, making various regions of the target control opaque or transparent depending on the opacity at the same spot in the image.
Below, I’ve created a smiley face image in Paint.NET. I’ve made the background of the image transparent (shown in Paint.NET as a checkerboard).
Next I create a WPF project with a simple Image control.
<Image Source="Images\Rocks2Small.jpg" Width="400"/>
Now we specify an OpacityMask for this Image. But instead of using a LinearGradientBrush or RadialGradientBrush, we use an ImageBrush–a brush created from an image.
<Image Source="Images\Rocks2Small.jpg" Width="400"> <Image.OpacityMask> <ImageBrush ImageSource="Images\FaceMask.png"/> </Image.OpacityMask> </Image>