Gewusst wie: Anwenden eines Weichzeichnereffekts auf grafische Elemente

Aktualisiert: November 2007

Mit dem BlurBitmapEffect kann ein sichtbares Objekt weichgezeichnet werden. Weiter unten finden Sie eine Reihe von Beispielen, in denen Folgendes gezeigt wird:

• Verwenden von einfachem Markup, um den Effekt auf ein Objekt anzuwenden

• Verwenden von einem Style, um den Effekt auf ein oder mehrere Objekte anzuwenden

• Verwenden von Code, um den Effekt auf ein Objekt anzuwenden

• Verwenden einer Animation, um die Eigenschaften eines Effekts zu animieren, der auf ein Objekt angewendet wird

Hinweis: In allen unten stehenden Beispielen wird nur ein einzelner Effekt auf ein Objekt angewendet. Sie können BitmapEffectGroup verwenden, um mehrere Effekte anzuwenden. Beispiele finden Sie unter Gewusst wie: Erstellen mehrerer visueller Effekte.

Beispiel

Im folgenden Beispiel wird gezeigt, wie Sie mit einem BlurBitmapEffect einen verschwommenen Button erstellen.

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

In der folgenden Abbildung ist der im vorherigen Beispiel erstellte Effekt dargestellt.

Im folgenden Beispiel wird gezeigt, wie mit einem Style ein BlurBitmapEffect auf einen Button auf der Seite angewendet wird, während er gedrückt wird.

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

Im folgenden Beispiel wird gezeigt, wie mithilfe von Code ein BlurBitmapEffect auf einen Button angewendet wird, wenn auf ihn geklickt wird.

Folgendes stellt das Extensible Application Markup Language (XAML) für das Beispiel dar.

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

Folgendes Codebeispiel ist der Code, in dem das Ereignis für das Extensible Application Markup Language (XAML) verarbeitet wird.

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

   }
}

Im folgenden Beispiel wird gezeigt, wie die Radius-Eigenschaft des BlurBitmapEffect animiert wird, sodass der Button nach dem Anklicken verschwommen dargestellt wird.

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

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines Leuchteffekts am äußeren Rand eines Objekts

Gewusst wie: Erstellen eines visuellen Schlagschatteneffekts

Gewusst wie: Erstellen mehrerer visueller Effekte

Gewusst wie: Animieren mehrerer visueller Effekte

Konzepte

Übersicht über Bitmapeffekte