Brushes with Opacity Mask in WPF

This articles describes that how to use brushes as Opacity Mask in WPF. All drawing group have Opacity property that affects the entire object evenly they also have an OpacityMask that can be used to apply custom opacity effects. This property uses the alpha channel value for the supplied Brush. The other channels of the brush content (Red, Green, or Blue) are ignored.

The most typical Brush for this purpose is an ImageBrush, which can be used for a variety of photo masking techniques such as vignettes. However, any defined Brush (such as LinearGradientBrush) can be used. All brushes require a Brush-derived object element to fill property element syntax in XAML, as shown in the XAML syntax earlier in this topic. 

<Window x:Class="WpfApplication7.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="LinearGradientBrush with OpacityMask" Height="300" Width="300">

    <Window.Background>

        <LinearGradientBrush>

            <GradientStop Offset="0" Color="Red"></GradientStop>

            <GradientStop Offset="1" Color="Green"></GradientStop>

        </LinearGradientBrush>

    </Window.Background>

    <Button Margin="40" FontSize="80">RAJ

        <Button.OpacityMask>

            <LinearGradientBrush EndPoint="0.1,0.1" SpreadMethod="Reflect">

                <GradientStop Offset="0" Color="Gray"></GradientStop>

                <GradientStop Offset="1" Color="Transparent"></GradientStop>

            </LinearGradientBrush>

        </Button.OpacityMask>

    </Button>  

</Window>

 

Output looks like this:

Figure 1. A Button with LinearGradientBrush applied to OpacityMask

<Window x:Class="WpfApplication7.Window2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window2" Height="300" Width="300">

    <Grid>

        <Image Source="ais245a.jpg" Height="200">

            <Image.OpacityMask>

                <RadialGradientBrush Center="0.5,0.5">

                    <GradientStop Color="#00000000" Offset="1" />

                    <GradientStop Color="#20000000" Offset="0.8" />

                    <GradientStop Color="#FF000000" Offset="0" />

                </RadialGradientBrush>

            </Image.OpacityMask>

        </Image>

    </Grid>

</Window>

Output:

Figure 2. RadialGradientBrush applied to OpacityMask of an image