WPF Brushes with Opacity Mask WPF in VB.NET

In this sample i will describe how to use Brushes with Opacity Mask in WPF(Windows Presentation Foundation).
  • 3004

 Thisarticles 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.

Themost typical Brush for this purpose is an ImageBrush, which can be usedfor a variety of photo masking techniques such as vignettes. However, any defined Brush (such as LinearGradientBrush) can be used. All brushesrequire 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:

 

Image1.jpg
 

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:

 

Image2.jpg
 

Figure 2. RadialGradientBrush applied to OpacityMask of an image

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.