How to apply simple faded transparent effects on WPF controls ?

Using OpacityMask property we can make a specific region of an element transparent or partially transparent . In this tips I am going to show you how you can apply faded transparent effects on some elements in WPF.

We can use OpacityMask with both SolidColorBrush or GradientColorBrush . But if you want achieve the transparent effects with faded view, you have to use OpacityMask with LinearGradientBrush or even you can use RadialGradientBrush.

Let’s start with a GradientColorBrush where I have applied a gradient effects that moves from a solid to transparent color which applies to TextBox Control.

image

So, above code block sets the TextBox control OpacityMask with a LinerGradientBrush where gradient start from Black to Transparent.

Similarly you can apply with others elements as well, let’s say for a  Button control  as shown in below

image

On run, we will get the below output.

image

Well, now you can try with RadialGradientBrush for more fun

Below the complete XAML Code Block

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="AliceBlue">
    <Grid>
        <Image Name="image1" Stretch="Fill"  Margin="12" Source="/WpfApplication3;component/Images/Backgrounds_25962.jpg" />    
        <Button 
            Content="Click Me !" 
            Height="42" 
            HorizontalAlignment="Left" 
            Margin="152,213,0,0" 
            Name="TransBurron" 
            VerticalAlignment="Top" 
            Width="234" >
            <Button.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0.3" Color="Black"></GradientStop>
                    <GradientStop Offset="1" Color="Transparent"></GradientStop>
                </LinearGradientBrush>
            </Button.OpacityMask>
        </Button>
        <TextBox Height="30" Margin="83,74,59,207">
            <TextBox.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0" Color="Black"></GradientStop>
                    <GradientStop Offset="1" Color="Transparent"></GradientStop>
                </LinearGradientBrush>
            </TextBox.OpacityMask>
        </TextBox>
    </Grid>
</Window>

Hope this will help.

Cheers !

Aj.

Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.