Comment : appliquer un effet flou à un Visual

Article
08/22/2008

Mise à jour : novembre 2007

BlurBitmapEffect peut être utilisé pour appliquer un effet flou à un objet visible. Les exemples suivants montrent :

Comment utiliser un balisage simple pour appliquer l'effet à un objet
Comment utiliser Style pour appliquer l'effet à un ou plusieurs objets
Comment utiliser du code pour appliquer l'effet à un objet
Comment utiliser une animation pour animer les propriétés d'un effet appliqué à un objet

Remarque : tous les exemples qui suivent n'appliquent qu'un seul effet à un objet. Pour appliquer plusieurs effets, utilisez BitmapEffectGroup. Consultez Comment : créer plusieurs effets visuels pour obtenir des exemples.

Exemple

L'exemple suivant indique comment utiliser un BlurBitmapEffect pour créer un Button flou.

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

L'illustration suivante montre l'effet créé dans l'exemple précédent.

Capture d'écran : bouton rendu flou à l'aide de BlurBitmapEffect

L'exemple suivant indique comment utiliser un Style pour appliquer un BlurBitmapEffect à un Button sur la page lorsqu'il est activé.

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

L'exemple suivant indique comment utiliser le code pour appliquer un BlurBitmapEffect à un Button lorsque l'utilisateur clique dessus.

Voici le code XAML (Extensible Application Markup Language) de l'exemple.

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

L'exemple de code suivant correspond au code qui gère l'événement pour le langage XAML (Extensible Application Markup Language).

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;
         }
      }

   }
}

L'exemple suivant indique comment animer la propriété Radius de BlurBitmapEffect pour appliquer un effet flou à Button lorsque l'utilisateur clique dessus.

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

Partager via

Comment : appliquer un effet flou à un Visual

Exemple

Voir aussi

Tâches

Concepts

Ressources supplémentaires