方法 : ビジュアルにぼかし効果を適用する
更新 : 2007 年 11 月
BlurBitmapEffect を使用すると、表示オブジェクトをぼかすことができます。次の内容について一連の例を示します。
1 つのオブジェクトに効果を適用するための簡単なマークアップの使用方法
1 つまたは複数のオブジェクトに効果を適用するための Style の使用方法
オブジェクトへの効果を適用するためのコードの使用方法
オブジェクトに適用された効果のプロパティをアニメーション表示する方法
メモ : 次の例では、いずれもオブジェクトに対して効果を 1 つだけ適用しています。複数の効果を適用するには、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>
前述の例で作成した効果を次の図に示します。
.png "スクリーンショット : BlurBitmapEffect を使用してぼかしたボタン")
次の例は、ページ上の任意の Button が押されたときに、このボタンに BlurBitmapEffect を適用するための Style の使用方法を示しています。
<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>
次の例では、Button がクリックされたときに、このボタンに BlurBitmapEffect を適用するためのコードの使用方法を示しています。
次に示すのは、この例に対する Extensible Application Markup Language (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>
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;
}
}
}
}
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>