방법: 시각적 요소에 흐림 효과 적용
업데이트: 2007년 11월
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>
다음 그림에서는 이전 예제에서 만든 효과를 보여 줍니다.
.png)
다음 예제에서는 Style을 사용하여 페이지의 Button을 눌렀을 때 BlurBitmapEffect를 적용하는 방법을 보여 줍니다.
<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를 적용하는 방법을 보여 줍니다.
다음은 이 예제에 대한 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;
}
}
}
}
다음 예제에서는 Button을 클릭하면 흐리게 나타나도록 BlurBitmapEffect의 Radius 속성에 애니메이션 효과를 적용하는 방법을 보여 줍니다.
<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>