Como: Apply a Blur Effect to a Visual

O BlurBitmapEffect pode ser usado para borrar (blur) um objeto visível. Abaixo encontra-se uma série de exemplos que mostram o seguinte:

• Como usar marcação simples para aplicar o efeito sobre um objeto.

• Como usar um Style para aplicar o efeito a um ou mais objetos.

• Como usar código para aplicar o efeito sobre um objeto.

• Como usar uma animação para animar as propriedades de um efeito aplicado sobre um objeto.

Observação: Todos os exemplos a seguir se aplicam apenas um único efeito a um objeto. Para aplicar vários efeitos, você pode usar BitmapEffectGroup. Consulte Como: Criar vários efeitos visuais para obter exemplos.

Exemplo

O exemplo a seguir mostra como usar um BlurBitmapEffect para criar um Button borrado.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

A ilustração a seguir mostra o efeito criado no exemplo anterior.

O exemplo a seguir mostra como usar um Style para aplicar um BlurBitmapEffect a qualquer Button na página enquanto ela estiver pressionada.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

O exemplo a seguir mostra como usar código para aplicar um BlurBitmapEffect para um Button quando ele for clicado.

A seguir temos o Extensible Application Markup Language (XAML) para o exemplo.

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

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

</Page>

A seguir temos o exemplo de código que trata o evento para o 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;
         }
      }

   }
}

O exemplo a seguir mostra como animar a propriedade Radius do BlurBitmapEffect para fazer com que o Button fique desfocado após ele ser clicado.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

Consulte também

Tarefas

Como: Criar um Efeito de Brilho nas Bordas Externas de um Objeto

Como: Create a Drop Shadow Visual Effect

Como: Criar vários efeitos visuais

Como: Animate Multiple Visual Effects

Conceitos

Visão Geral de Efeitos de Bitmap