HOW TO：對 Visual 物件套用模糊效果
更新：2007 年 11 月
BlurBitmapEffect 可用來讓視覺物件變得模糊。下列一系列範例可顯示下列作業：
如何使用簡單的標記將效果套用到物件
如何使用 Style 將效果套用到一個或多個物件
如何使用程式碼將效果套用到物件
如何使用動畫，將套用到物件之效果的屬性顯示為動畫
**注意：**下面所有的範例都只將單一效果套用到物件。若要套用多種效果，您可以使用 BitmapEffectGroup。如需範例，請參閱 HOW TO：建立多個視覺效果。
範例
下列範例示範如何使用 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>
下圖顯示在上述範例中建立的效果。
.png)
下列範例顯示如何使用 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)。
<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) 的事件的程式碼。
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;
}
}
}
}
下列範例顯示如何將 BlurBitmapEffect 的 Radius 屬性顯示為動畫，讓 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>