Visual Effects in WPF ( Blur, DropShadow, OuterGlow )

WPF provides visual effects that you can apply to any element. The goal of effects is to give you an easy, to enhance the appearance of buttons, text,container controls and other WPF controls. With the power of WPF you can make all effects in xaml too but rather than your own drawing code, you simply use one of the classes that derives from Effect (in the System.Windows.Media.Effects namespace).

Following are the list of classes that you can use

Name	Description
BlurEffect ShaderEffect DropShadowEffect	Blurs the content in your element Applies pixel shader Adds a rectangular drop shadow behing your control

Now we will discuss all these effects one by one.

Blureffect

Most easy to use effect in wpf is Blureffect, its blurs any content of control, it though as you are looking at it through an out of focus lens. You can inrease this effect by inreasing by its radius property. Lets write some code that will blur the content of button.

<Button Height="40" Width="100" Content="Blur effect with radius 2">

<Button.Effect>

<BlurEffect Radius="2"></BlurEffect>

</Button.Effect>

</Button>

<Button Height="40" Width="100" Content="Blur effect with radius 5">

<Button.Effect>

<BlurEffect Radius="3.5"></BlurEffect>

</Button.Effect>

</Button>

<Button Height="40" Width="100" Content="Blur effect with radius 5">

<Button.Effect>

<BlurEffect Radius="5"></BlurEffect>

</Button.Effect>

</Button>

DropShadowEffect

Its really very good and powerfull class of wpf, by using this class you can make outer glow of content also.

lets write some code for drop shadow first

<Button Height="40" Width="100" Content="Blur effect with radius 2">

<Button.Effect>

<BlurEffect Radius="2"></BlurEffect>

</Button.Effect>

</Button>

<Button Height="40" Width="100" Content="Blur effect with radius 5">

<Button.Effect>

<BlurEffect Radius="3.5"></BlurEffect>

</Button.Effect>

</Button>

<Button Height="40" Width="100" Content="Blur effect with radius 5">

<Button.Effect>

<BlurEffect Radius="5"></BlurEffect>

</Button.Effect>

</Button>

OuterGlow

<Button Content="Out glow by setting BlurRadius=50 and shadowdepth=0">

<Button.Effect>

<DropShadowEffect BlurRadius="50" ShadowDepth="0"/>

</Button.Effect>

</Button>

<Button Content="Out glow by setting BlurRadius=50 and shadowdepth=0">

<Button.Effect>

<DropShadowEffect BlurRadius="20" ShadowDepth="0"/>

</Button.Effect>

</Button>

<Button Content="Drop shadow effect with BlurRadius=10 and ShadowDepth=5">

<Button.Effect>

<DropShadowEffect BlurRadius="10" ShadowDepth="5"/>

</Button.Effect>

</Button>

<Button Content="Drop shadow effect by setting BlurRadius=10 and ShadowDepth=20">

<Button.Effect>

<DropShadowEffect BlurRadius="10" ShadowDepth="20"/>

</Button.Effect>

</Button>

ShaderEffect

The ShaderEffect class doesn’t represent a ready-to-use effect. Instead, it’s an abstract class from which

you derive to create your own custom pixel shaders. By using ShaderEffect (or a custom effect that

derives from it), you gain the ability to go far beyond more blurs and drop shadows