방법: 개체의 외부 가장자리에 글로우 효과 만들기
업데이트: 2007년 11월
이 항목에서는 개체의 외부 가장자리에 글로우 효과를 만드는 방법에 대해 설명합니다.
예제
OuterGlowBitmapEffect 클래스를 사용하여 표시되는 개체 주위에 글로우 효과를 만들 수 있습니다. 이 예제에서는 다음과 같은 작업을 수행하는 방법을 보여 줍니다.
단순한 태그를 사용하여 개체에 글로우 효과를 적용합니다.
Style을 사용하여 하나 이상의 개체에 글로우 효과를 적용합니다.
코드 숨김 태그를 사용하여 개체에 글로우 효과를 적용합니다.
애니메이션을 사용하여 개체에 적용된 글로우 효과의 속성에 애니메이션 효과를 줍니다.
참고
다음에 나오는 모든 예제에서는 개체에 단일 효과를 적용합니다. 여러 효과를 적용하려면 BitmapEffectGroup을 사용합니다. 자세한 내용은 방법: 여러 시각 효과 만들기를 참조하십시오.
다음 예제에서는 OuterGlowBitmapEffect를 사용하여 TextBox의 외부 가장자리 주위에 파란색 글로우 효과를 적용하는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<TextBox Width="200">
<TextBox.BitmapEffect>
<!-- <BitmapEffectGroup> would go here if you wanted to apply more
then one effect to the TextBox. However, in this example only
one effect is being applied so BitmapEffectGroup does not need
to be included. -->
<!-- The OuterGlow is blue, extends out 30 pixels, has the
maximum noise possible, and is 40% Opaque. -->
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1"
Opacity="0.4" />
</TextBox.BitmapEffect>
</TextBox>
</StackPanel>
</Page>
다음 그림에서는 이전 예제에서 만든 외부 글로우 효과를 보여 줍니다.
.png)
다음 예제에서는 Style 클래스를 사용하여 포커스를 받는 페이지에 있는 모든 TextBox에 OuterGlowBitmapEffect를 적용하는 방법을 보여 줍니다.
<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 TextBox on the page. -->
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<!-- When the TextBox gains focus such as when the cursor appears
in the TextBox, apply the OuterGlowBitmapEffect to the TextBox. -->
<Trigger Property="IsFocused" Value="True">
<Setter Property = "BitmapEffect" >
<Setter.Value>
<!-- The OuterGlow is blue, extends out 30 pixels, has the
maximum noise possible, and is 40% Opaque. -->
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1"
Opacity="0.4" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this TextBox which creates
an outer glow around the it. -->
<TextBox Name="textBox1" Width="200" />
</StackPanel>
</Page>
다음 예제에서는 코드 숨김 태그를 사용하여 TextBox에 OuterGlowBitmapEffect를 적용하는 방법을 보여 줍니다. 이 경우 TextBox가 포커스를 받으면 글로우 효과가 나타납니다. 이 예제에서는 태그를 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.OuterGlowExample" >
<StackPanel>
<!-- When this TextBox gains focus, a blue glow surrounds it. -->
<TextBox Width="200" GotFocus="OnFocusCreateGlow"></TextBox>
</StackPanel>
</Page>
다음 예제에서는 이전 태그에 대한 이벤트를 처리하는 코드 숨김을 보여 줍니다.
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 OuterGlowExample : Page
{
// Add OuterGlow effect.
void OnFocusCreateGlow(object sender, RoutedEventArgs args)
{
// Get a reference to the TextBox.
TextBox myTextBox = (TextBox)sender;
// Initialize a new OuterGlowBitmapEffect that will be applied
// to the TextBox.
OuterGlowBitmapEffect myGlowEffect = new OuterGlowBitmapEffect();
// Set the size of the glow to 30 pixels.
myGlowEffect.GlowSize = 30;
// Set the color of the glow to blue.
Color myGlowColor = new Color();
myGlowColor.ScA = 1;
myGlowColor.ScB = 1;
myGlowColor.ScG = 0;
myGlowColor.ScR = 0;
myGlowEffect.GlowColor = myGlowColor;
// Set the noise of the effect to the maximum possible (range 0-1).
myGlowEffect.Noise = 1;
// Set the Opacity of the effect to 40%. Note that the same effect
// could be done by setting the ScA property of the Color to 0.4.
myGlowEffect.Opacity = 0.4;
// Apply the bitmap effect to the TextBox.
myTextBox.BitmapEffect = myGlowEffect;
}
}
}
다음 예제에서는 OuterGlowBitmapEffect의 GlowSize 속성에 TextBox가 포커스를 받으면 글로우 효과가 바깥쪽으로 적용되는 애니메이션 효과를 주는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<TextBox Width="200">
<TextBox.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<OuterGlowBitmapEffect x:Name="myOuterGlowBitmapEffect"
GlowColor="Blue" GlowSize="0" />
</TextBox.BitmapEffect>
<TextBox.Triggers>
<EventTrigger RoutedEvent="TextBox.GotFocus">
<BeginStoryboard>
<Storyboard>
<!-- Animate the GlowSize from 0 to 40 over half a second. -->
<DoubleAnimation
Storyboard.TargetName="myOuterGlowBitmapEffect"
Storyboard.TargetProperty="GlowSize"
From="0" To="40" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBox.Triggers>
</TextBox>
</StackPanel>
</Page>
전체 샘플을 보려면 비트맵 효과 갤러리 샘플을 참조하십시오.