Effects in WPF - Standard Effects via Effect and RenderCapability classes

The new WPF Effect class was introduced in .NET 4.0. It uses GPU and implements pixel shader to perform rendering jobs much faster. The WPF Effect class replaces the now obsolete BitmapEffect class that was part of .Net Frameworks prior to 4. Well, before moving into custom bitmap effects, let’s start with the standard effects and see how they can be used.

BitmapEffect and Effect
The BitmapEffect classes that are obsolete now are:
• OuterGlowBitmapEffect
• BlurBitmapEffect
• DropShadowBitmapEffect
• BevelBitmapEffect

Now problem here is, new hardware effects provide replacements only for Blur and DropShadow. Apart from these two, if you want to use anything else then you have to go for custom effects.

When effects will work
It is important to realize that working of effects will happen totally based on the machine having GPU and the situation in which the machine is used. For example, if you are viewing via a remote desktop or let’s say your machine doesn’t have a suitable GPU. Now in this case, the software approach will be used to render the effects which can be much slower.

But we know that WPF is bit intelligent. So, even when suitable hardware is not available, WPF tries it’s best to produce something which is fast. Hope most of you are aware that software rendering is only supported for Pixel Shader 2.0 and this needs to be kept in mind while dealing with custom effects.

How effects will work
Now question is, how to figure out on how effects will be rendred?
Well, it's not a big deal. We have a set of APIs and methods available to make our work easy. Such methods are provided by RenderCapability class.

Bool isShaderVersionSupported = RenderCapability.IsPixelShaderVersionSupported(2,0);

Above method will return true, if the shader major.minor version is supported. We have another method for software also, as:

Bool isShaderVersionSupportedInSoftware = RenderCapability.IsPixelShaderVersionSupportedInSoftware(2,0);

The above method will return true if the effect can be rendered in software. Now before getting more into coding, let’s create an initial XAML to display the picture. So, throughout this article, we will be using the same XAML:

<Window x:Class="Effects.MainWindow"
Title="Effects" Height="350" Width="525">
<Grid Height="259" Width="495">
<Image Height="254" Name="ImageBox" HorizontalAlignment="Left"
Margin="12,0,0,0" Stretch="Fill" VerticalAlignment="Top" Width="479" />

Blur effect in action:
To check out the Blur effect on any object, first thing to notice is the Effect property. So, which all objects are having this Effect property can take advantage of effects. Let’s give a try to below sample code:

Uri uri = new Uri(Directory.GetCurrentDirectory() + @"\Image.jpg", UriKind.Absolute);
BitmapImage bitmapImage=new BitmapImage(uri);
ImageBox.Source = bitmapImage;
ImageBox.Effect = new BlurEffect();

In above snippet, first we are creating a URI to locate the image and then assigning the image source to our Image control which is named as ImageBox.
Now giving a Blur effect is pretty simple, just go ahead and assign the reference of BlurEffect class to Effect property of Image control. So, once you are done, you will be able to see your blur image as:

One important thing to note here is, effects can be applied to each and everything which can be rendered. It means, it can be your image, button or any other item. It signifies that effects are not applied on the bitmap in any case, but it is applied to the result of rendering the Image control.

Apart from this, we have lot of properties available for these effects. For example, you can control the blur aspect of your image in the sense how much you want to blur your image. For this we have a property called Radius. So, the bigger the radius the more blur effect you will be able to see.

ImageBox.Effect = new BlurEffect() { Radius = 70 };

Above code snippet will produce below image.

Also note that effects apply to the children of any controls that you apply them to. This also allows you to apply multiple effects. One can also apply different-different effects to different children.

DropShadow effect in action:
DropShadow effects are also as simple as Blur as:
ImageBox.Effect = new DropShadowEffect()
{ BlurRadius = 2, ShadowDepth = 10 };

Above snippet will result in:

There are various properties available here to adjust the shadow like BlurRadius, Direction, Color and ShadowDepth. shadowDepth property is very interesting as it controls the shadow should be shown from the actual object.
And definitely, all these effects can be applied via XAML also:

OuterGlow effect in action:
You can make any object glowing by using the same DropShadowEffect. To make this happen one has to create effect for OuterGlow. By simply setting the ShadowDepth to 0, BlurRadius to something big that gives you the thickness for outer glow and color to something of your choice as:
ImageBox.Effect = new DropShadowEffect()
BlurRadius = 10,
ShadowDepth = 0,
Color = Colors.Red
and you will land up with:

Bevel effect need some customization, so it will partof my next article.
Ofcourse last but not the least, all the above things can be done by XAML too as:

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

Hope you enjoyed reading this article. Let's wait for the next article to know more on custom effects.

By Shweta Lodha   Popularity  (1585 Views)