방법: 그림자 시각 효과 만들기
업데이트: 2007년 11월
DropShadowBitmapEffect를 사용하면 표시되는 개체 뒤에 그림자와 같은 효과를 적용할 수 있습니다. 아래는 다음을 보여 주는 일련의 예제입니다.
단순한 태그를 사용하여 개체에 효과를 적용하는 방법
Style을 사용하여 하나 이상의 개체에 효과를 적용하는 방법
코드를 사용하여 개체에 효과를 적용하는 방법
애니메이션을 사용하여 개체에 적용된 효과의 속성에 애니메이션 효과를 주는 방법
참고: 아래의 모든 예제에서는 개체에 단일 효과만 적용합니다. 여러 효과를 적용하려면 BitmapEffectGroup을 사용합니다. 예제를 보려면 방법: 여러 시각 효과 만들기을 참조하십시오.
예제
다음 예제에서는 DropShadowBitmapEffect를 사용하여 Button 뒤에 그림자 모양을 만드는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Margin="50" Width="200">DropShadow Under this Button
<Button.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 DropShadowBitmapEffect has several important properties that
determine characteristics of the drop shadow:
- Color: Specifies the color of the drop shadow (in this example black).
- ShadowDepth: Specifies how far displaced the shadow is from the object
casting the shadow. Default is 20.
- Direction: Specifies in what direction the shadow is cast from the object.
It is an angle between 0 and 360 with 0 starting on the right hand side
and moving counter-clockwise around the object. The value of 320 in this
example casts the shadow on the lower right hand side of the button.
- Noise: Specifies how grainy the drop-shadow is. Range is between 0 and 1.
Default is 0.
- Softness: Specifies how soft the shadow. The range is between 0 and 1 with 1
being the softest. Default is 0.5.
- Opacity: Specifies how transparent the shadow is. The range is between 0
and 1 with 1 being fully opaque and 0 fully transparent (not visible). The
default is 1. -->
<DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1"
Opacity="0.5"/>
</Button.BitmapEffect>
</Button>
</StackPanel>
</Page>
다음 그림에서는 이전 예제에서 만든 효과를 보여 줍니다.
.png)
다음 예제에서는 Style을 사용하여 페이지에서 Button을 눌렀을 때 DropShadowBitmapEffect를 적용하는 방법을 보여 줍니다.
<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 drop shadow. -->
<Trigger Property="IsPressed" Value="true">
<Setter Property = "BitmapEffect" >
<Setter.Value>
<DropShadowBitmapEffect Color="Black" Direction="320"
ShadowDepth="25" Softness="1" Opacity="0.5"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this Button which creates
a drop shadow when the button is pressed down. -->
<Button Width="200" >Press Me!</Button>
</StackPanel>
</Page>
다음 예제에서는 코드를 사용하여 Button을 클릭했을 때 DropShadowBitmapEffect를 적용하는 방법을 보여 줍니다.
다음은 이 예제에 대한 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.DropShadowExample" >
<StackPanel>
<Button Click="OnClickDropShadowButton" Margin="50" Width="200">
Click to Create Drop Shadow!</Button>
</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 DropShadowExample : Page
{
// Add Blur effect.
void OnClickDropShadowButton(object sender, RoutedEventArgs args)
{
// Get a reference to the Button.
Button myButton = (Button)sender;
// Initialize a new DropShadowBitmapEffect that will be applied
// to the Button.
DropShadowBitmapEffect myDropShadowEffect = new DropShadowBitmapEffect();
// Set the color of the shadow to Black.
Color myShadowColor = new Color();
myShadowColor.ScA = 1; // Note that the alpha value is ignored by Color property. The Opacity property is used to control the alpha.
myShadowColor.ScB = 0;
myShadowColor.ScG = 0;
myShadowColor.ScR = 0;
myDropShadowEffect.Color = myShadowColor;
// Set the direction of where the shadow is cast to 320 degrees.
myDropShadowEffect.Direction = 320;
// Set the depth of the shadow being cast.
myDropShadowEffect.ShadowDepth = 25;
// Set the shadow softness to the maximum (range of 0-1).
myDropShadowEffect.Softness = 1;
// Set the shadow opacity to half opaque or in other words - half transparent.
// The range is 0-1.
myDropShadowEffect.Opacity = 0.5;
// Apply the bitmap effect to the Button.
myButton.BitmapEffect = myDropShadowEffect;
}
}
}
다음 예제에서는 DropShadowBitmapEffect의 ShadowDepth 및 Softness에 애니메이션 효과를 적용하여 Button을 클릭했을 때 화면에서 솟아오르게 보이도록 하는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Button Margin="50" Width="200" Name="myButton">
Click Me to Animate Drop Shadow!
<Button.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<DropShadowBitmapEffect x:Name="myDropShadowBitmapEffect" Color="Black"
ShadowDepth="0" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Animate the movement of the button. -->
<ThicknessAnimation
Storyboard.TargetProperty="Margin" Duration="0:0:0.5"
From="50,50,50,50" To="0,0,50,50" AutoReverse="True" />
<!-- Animate shadow depth of the effect. -->
<DoubleAnimation
Storyboard.TargetName="myDropShadowBitmapEffect"
Storyboard.TargetProperty="ShadowDepth"
From="0" To="30" Duration="0:0:0.5"
AutoReverse="True" />
<!-- Animate shadow softness of the effect. As
the Button appears to get farther from the shadow,
the shadow gets softer. -->
<DoubleAnimation
Storyboard.TargetName="myDropShadowBitmapEffect"
Storyboard.TargetProperty="Softness"
From="0" To="1" Duration="0:0:0.5"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>