Практическое руководство. Применение эффекта размытия

Обновлен: Ноябрь 2007

BlurBitmapEffect можно использовать для размытия отображаемых объектов. Ниже приведены примеры, демонстрирующие:

• Способы использования простой разметки для применения эффекта к объекту.

• Способы использования Style для применения эффекта к одному или нескольким объектам.

• Способы использования кода для применения эффекта к объекту.

• Способы использования анимации для анимирования свойств эффекта, применяемого к объекту.

Примечание. Все приведенные ниже примеры применяют только один эффект к объекту. Чтобы применить несколько эффектов, используйте BitmapEffectGroup. Примеры см. в разделе Практическое руководство. Создание нескольких визуальных эффектов.

Пример

В следующем примере показано использование BlurBitmapEffect для создания размытой Button.

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

Ниже показан результат предыдущего примера.

В следующем примере показано использование Style для применения BlurBitmapEffect к любой нажатой Button на странице.

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

В следующем примере показано использование кода для применения BlurBitmapEffect к Button при ее нажатии.

Ниже приведен Язык XAML (Extensible Application Markup Language) для примера.

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

В следующем примере код обрабатывает событие для Язык 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;
         }
      }

   }
}

В следующем примере показано, как анимировать свойство Radius объекта BlurBitmapEffect, чтобы объект Button стал размытым после его щелчка.

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

См. также

Задачи

Практическое руководство. Создание эффекта свечения Glow на внешнем крае объекта

Практическое руководство. Создание визуального эффекта тени

Практическое руководство. Создание нескольких визуальных эффектов

Практическое руководство. Анимация нескольких визуальных эффектов

Основные понятия

Общие сведения об эффектах для точечных рисунков