Understanding OpacityMask and its usage

OpacityMask as it’s name implies a mask to the opacity.ie a mask which is given to the visibility of a visual element.So the places which are not covered by the mask will be transparent.
Here comes the first doubt.How can we specify this opacitymask ? Mask here refers to a definition of Brush.Brush is the abstract base class for a variety of brushes like SolidColorBrush,LinearGradientBrush,VisualBrush etc…So we can apply mask in so many ways.

Need for OpacityMask

The main application of OpacityMask is to define some transparent areas in visual elements.Let’s consider the scenario below.
We have a Rectangle filled with Yellow and and an Ellipse filled with Red on top of it.So naturally the red ellipse will be visible over rectangle.Below is the xaml and image in blend.

<Grid x:Name="LayoutRoot">
    <Rectangle Fill="#FFFFFF00" />
    <Ellipse Stroke="#FF000000" Fill="#FFFF0000"/>
</Grid>

Qn : We need to show the yellow rectangle over the ellipse what we do?

Ans : Just set the Alpha value of the Fill property of the ellipse to 00.Its fully transparent and we can view the rectangle.

Qn : We need to make the bottom half of the ellipse transparent.What will we do?

Ans : We will make the Fill brush of ellipse to a LinearGradientBrush and set the bottom part transparent by setting alpha to 0.Xaml and screenshot is below.

<Grid x:Name="LayoutRoot">
    <Rectangle Fill="#FFFFFF00" />
    <Ellipse Stroke="#FF000000">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#00000000" Offset="0.571"/>
                <GradientStop Color="#FFFF0000" Offset="0.531"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

Qn : How can we make 3/4 th of ellipse transparent?

Ans : According to my WPF knowledge there is no way to do this by using only one brush.Here comes the importance of OpacityMask.OpacityMask here defines another area which is transparent by using another LinearGradientBrush.Code and screenshot is below.

<Grid x:Name="LayoutRoot">
    <Rectangle Fill="#FFFFFF00" />
    <Ellipse Stroke="#FF000000">
        <Ellipse.OpacityMask>
            <LinearGradientBrush EndPoint="0.05,0.56" StartPoint="0.943,0.568">
                <GradientStop Color="#FF000000" Offset="0.487"/>
                <GradientStop Color="#00FFFFFF" Offset="0.527"/>
            </LinearGradientBrush>
        </Ellipse.OpacityMask>
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#00000000" Offset="0.571"/>
                <GradientStop Color="#FFFF0000" Offset="0.531"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

I have used a LinearGradientBrush with Brush transform to implement this.When we are specifying OpacityMask,it won’t consider the color of the brush.Because here the intention is to define an area which is transparent or opaque.But it cares the alpha value very seriously.According to the alpha value only it defines the amount of transparency or opacity.

This is the basic idea of OpacityMask.I will get confused often while working extensively with OpacityMask.So if anybody reading this, have more knowledge about OpacityMask please share with me.

OpacityMask is very much useful in giving awesome look and feel to your application like glass effects transparency etc…To understand better about the opacitymask I will be writing another post which talks about creating a magic transparent glass.

More links about OpacityMask

http://geekswithblogs.net/Silverlight2/archive/2008/10/22/working-with-opacity-masks.aspx

http://www.vbdotnetheaven.com/UploadFile/dbeniwal321/OpacityMaskWPF01302009011520AM/OpacityMaskWPF.aspx