Bitmap Effects Overview

Article
11/16/2012

Bitmap effects enable designers and developers to apply visual effects to rendered Windows Presentation Foundation (WPF) content. For example, bitmap effects allow you to easily apply a DropShadowBitmapEffect effect or a blur effect to an image or a button.

This topic contains the following sections.

WPF Bitmap Effects
How to Apply an Effect
Creating Custom Effects
Related Topics

WPF Bitmap Effects

Bitmap effects (BitmapEffect object) are simple pixel processing operations. A bitmap effect takes a BitmapSource as an input and produces a new BitmapSource after applying the effect, such as a blur or drop shadow. Each bitmap effect exposes properties that can control the filtering properties, such as Radius of BlurBitmapEffect.

As a special case, in WPF, effects can be set as properties on live Visual objects, such as a Button or TextBox. The pixel processing is applied and rendered at run-time. In this case, at the time of rendering, a Visual is automatically converted to its BitmapSource equivalent and is fed as input to the BitmapEffect. The output replaces the Visual object's default rendering behavior. This is why BitmapEffect objects force visuals to render in software only i.e. no hardware acceleration on visuals when effects are applied.

BlurBitmapEffect simulates look at an object through an out-of-focus lens. See How to: Apply a Blur Effect to a Visual for an example.
OuterGlowBitmapEffect creates a halo of color around the perimeter of an object. See How to: Create a Glow Effect on the Outer Edge of an Object for an example.
DropShadowBitmapEffect creates a shadow behind an object. See How to: Create a Drop Shadow Visual Effect for an example.
BevelBitmapEffect creates a bevel which raises the surface of an image according to a specified curve. See How to: Create a Beveled Visual Effect for an example.
EmbossBitmapEffect creates a bump mapping of a Visual to give the impression of depth and texture from an artificial light source. See How to: Create an Embossed Visual Effect for an example.

Note

WPF bitmap effects are rendered in software mode. Any object that applies an effect will also be rendered in software. Performance is degraded the most when using Bitmap effects on large visuals or animating properties of a Bitmap effect. This is not to say that you should not use Bitmap effects in this way at all, but you should use caution and test thoroughly to ensure that your users are getting the experience you expect.

Note

WPF bitmap effects do not support partial trust execution. An application must have full trust permissions to use bitmap effects.

How to Apply an Effect

BitmapEffect is a property on Visual. Therefore applying effects to Visuals, such as a Button, Image, DrawingVisual, or UIElement, is as easy as setting a property. BitmapEffect can be set to a single BitmapEffect object or multiple effects can be chained by using the BitmapEffectGroup object.

The following example demonstrates how to apply a BitmapEffect in Extensible Application Markup Language (XAML).

<Button  Width="200">You Can't Read This!
  <Button.BitmapEffect>

  <!-- <BitmapEffectGroup> would go here if you wanted to apply more 
         then one effect to the Button. However, in this example only  
         one effect is being applied so BitmapEffectGroup does not need  
         to be included. -->

    <!-- The larger the Radius, the more blurring. The default range is 20.
         In addition, the KernelType is set to a box kernel. A box kernel
         creates less disruption (less blur) then the default Gaussian kernel. -->
    <BlurBitmapEffect Radius="10" KernelType="Box" />

  </Button.BitmapEffect>
</Button>

The following example demonstrates how to apply a BitmapEffect in code.

// Get a reference to the Button.
Button myButton = (Button)sender;

// Initialize a new BlurBitmapEffect that will be applied
// to the Button.
BlurBitmapEffect myBlurEffect = new BlurBitmapEffect();

// Set the Radius property of the blur. This determines how 
// blurry the effect will be. The larger the radius, the more
// blurring. 
myBlurEffect.Radius = 10;

// Set the KernelType property of the blur. A KernalType of "Box"
// creates less blur than the Gaussian kernal type.
myBlurEffect.KernelType = KernelType.Box;

// Apply the bitmap effect to the Button.
myButton.BitmapEffect = myBlurEffect;

See How to: Create Multiple Visual Effects for examples that show how to apply multiple effects using the BitmapEffectGroup object.

Note

When a BitmapEffect is applied to a layout container, such as DockPanel or Canvas, the effect is applied to the visual tree of the element or visual, including all of its child elements.

Creating Custom Effects

WPF also provides unmanaged interfaces to create custom effects that can be used in managed WPF applications. For additional reference material for creating custom bitmap effects, see the Unmanaged WPF Bitmap Effect documentation.

For a sample custom bitmap effect, see the Custom BitmapEffect Sample - RGBFilter. This sample demonstrates the unmanaged interfaces needed to create a custom effect, a managed interoperability layer, and a WPF application using the custom effect.

Bitmap Effects Overview

WPF Bitmap Effects

How to Apply an Effect

Creating Custom Effects

See Also

Tasks

Concepts

Reference

Additional resources