Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

BlurBitmapEffect Class

Simulates looking at an object through an out-of-focus lens.

Namespace: System.Windows.Media.Effects
Assembly: PresentationCore (in presentationcore.dll)
XML Namespace:  http://schemas.microsoft.com/winfx/2006/xaml/presentation

public sealed class BlurBitmapEffect : BitmapEffect
public final class BlurBitmapEffect extends BitmapEffect
public final class BlurBitmapEffect extends BitmapEffect
<BlurBitmapEffect .../>
NoteNote:

WPF bitmap effects are software rendered. Any object that applies an effect will also be rendered in software. Bitmap effects should not be applied to large visuals or animations as this can degrade performance.

BlurBitmapEffect is one of several effects that are shipped with the SDK. Other effects include:

The following illustration shows a BlurBitmapEffect applied to a visual object (in this case applied to a Button).

Screenshot: Compare button to blurred button

The BlurBitmapEffect can be used to blur a visible object. Below are a series of examples that show the following:

  • How to use simple markup to apply the effect to an object

  • How to use a Style to apply the effect to one or more objects

  • How to use code to apply the effect to an object

  • How to use an animation to animate the properties of an effect applied to an object

Note: All of the examples below apply only a single effect to an object. To apply multiple effects, you can use BitmapEffectGroup. See How to: Create Multiple Visual Effects for examples.

The following example shows how to use a BlurBitmapEffect to create a blurry Button.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel>
    <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>

  </StackPanel>

</Page>

The following illustration shows the effect created in the previous example.

Screenshot: Blurred button using BlurBitmapEffect

The following example shows how to use a Style to apply a BlurBitmapEffect to any Button on the page while it is pressed.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Resources define Styles for the entire page. -->
  <Page.Resources>

    <!-- This style applies to any Button on the page. -->
    <Style TargetType="{x:Type Button}">
      <Style.Triggers>

        <!-- When the Button is pressed, apply the blur. -->
        <Trigger Property="IsPressed" Value="true">
          <Setter Property = "BitmapEffect" >
            <Setter.Value>
              <BlurBitmapEffect Radius="10" />
            </Setter.Value>
          </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>

  <StackPanel>

    <!-- The Style defined above applies to this Button which makes
         the Button appear blurred while it is pressed. -->
    <Button Width="200" >Blurning down the House!</Button>

  </StackPanel>

</Page>

The following example shows how to use code to apply a BlurBitmapEffect to a Button when it is clicked.

The following is Extensible Application Markup Language (XAML) for the example.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.BlurExample" >

  <StackPanel>
    <Button Click="OnClickBlurButton" Width="200">Click to Blur!</Button>
  </StackPanel>
 
</Page>

The following code example is the code that handles the event for the Extensible Application Markup Language (XAML).

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Media.Effects;

namespace SDKSample
{

   public partial class BlurExample : Page
   {

      // Add Blur effect.
      void OnClickBlurButton(object sender, RoutedEventArgs args)
      {
         // Toggle effect
         if (((Button)sender).BitmapEffect != null)
         {
            ((Button)sender).BitmapEffect = null;
         }
         else
         {
            // 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;
         }
      }

   }
}

The following example shows how to animate the Radius property of the BlurBitmapEffect to make the Button become blurry after it is clicked.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Button  Width="200">
      Click to Blur ME!
      <Button.BitmapEffect>

        <!-- This BitmapEffect is targeted by the animation. -->
        <BlurBitmapEffect x:Name="myBlurBitmapEffect"  Radius="0" />

      </Button.BitmapEffect>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- Blur the Button and then animate back to normal. -->
              <DoubleAnimation
               Storyboard.TargetName="myBlurBitmapEffect"
               Storyboard.TargetProperty="Radius"
               From="0" To="40" Duration="0:0:0.3"
               AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>

</Page>

More Code

How to: Animate a Blur Visual Effect

The following example shows how to animate the Radius property of the BlurBitmapEffect to make the Button become blurry after it is clicked.

How to: Create Multiple Visual Effects

Multiple visual effects can be applied to a single visible object using the BitmapEffectGroup. The following example shows how to apply a BlurBitmapEffect and a DropShadowBitmapEffect to create a blurry button with a shadow behind it.

How to: Animate Multiple Visual Effects

The following example shows how to animate the ShadowDepth and Softness properties of a DropShadowBitmapEffect and the Radius property of a BlurBitmapEffect to create the illusion of a button rising up from the screen.

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

.NET Framework

Supported in: 3.0
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.