방법: 3D 시각 효과 만들기
업데이트: 2007년 11월
BevelBitmapEffect를 사용하여 지정된 곡선(EdgeProfile 속성으로 설정)을 따라 표시되는 개체의 표면을 높이는 내부 3D 효과를 만들 수 있습니다. 아래는 다음을 보여 주는 일련의 예제입니다.
단순한 태그를 사용하여 개체에 효과를 적용하는 방법
Style을 사용하여 하나 이상의 개체에 효과를 적용하는 방법
코드를 사용하여 개체에 효과를 적용하는 방법
애니메이션을 사용하여 개체에 적용된 효과의 속성에 애니메이션 효과를 주는 방법
참고: 아래의 모든 예제에서는 개체에 단일 효과만 적용합니다. 여러 효과를 적용하려면 BitmapEffectGroup을 사용합니다. 예제를 보려면 방법: 여러 시각 효과 만들기을 참조하십시오.
예제
다음 예제에서는 BevelBitmapEffect를 사용하여 Button 내부에 3D 효과를 만드는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Width="200" Height="80" Margin="50">
Bevelled 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 BevelBitmapEffect has several important properties that
determine characteristics of the bevel effect:
- BevelWidth: Specifies how wide the bevel is (size of the bevel). In this
example, the bevel is fairly wide at 15 (default is 5).
- EdgeProfile: Specifies the curve of the bevel. The default is "Linear".
- LightAngle: Specifies in what direction the "virtual light" is coming from
that create the shadows of the bevel. It is an angle between 0 and 360 with 0
starting on the right hand side and moving counter-clockwise around the object.
The shadows of the bevel are on the opposite side of where the light is cast.
The value of 320 in this example casts the light on the lower right hand side
of the bevel and shadow on the upper left.
- Relief: Specifies the height of the relief of the bevel. Range is between 0 and 1
with 1 having the most relief (darkest shadows). The default is 0.3.
- Smoothness: Specifies how smooth the shadows are. The range is between 0 and 1
with 1 being the softest. Default is 0.5. -->
<BevelBitmapEffect BevelWidth="15" EdgeProfile="CurvedIn" LightAngle="320" Relief="0.4"
Smoothness="0.4" />
</Button.BitmapEffect>
</Button>
</StackPanel>
</Page>
다음 그림에서는 이전 예제에서 만든 효과를 보여 줍니다.
.png)
다음 예제에서는 Style을 사용하여, 마우스 포인터를 페이지의 Button 위로 이동할 때 해당 단추에 BevelBitmapEffect를 적용하는 방법을 보여 줍니다. 또한 단추를 누르면 단추가 눌린 것처럼 보이도록 만드는 다른 BevelBitmapEffect가 다른 BevelWidth 값을 사용하여 적용됩니다.
<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 mouse pointer moves over the button, apply a bevel
with a wide BevelWidth. -->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BitmapEffect" >
<Setter.Value>
<BevelBitmapEffect BevelWidth="15" />
</Setter.Value>
</Setter>
</Trigger>
<!-- When the mouse pointer is pressed, apply a bevel with a
narrower BevelWidth to make the button appear to get pressed. -->
<Trigger Property="IsPressed" Value="true">
<Setter Property="BitmapEffect" >
<Setter.Value>
<BevelBitmapEffect BevelWidth="5" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this Button which makes
the Button become beveled while it is pressed. -->
<Button Width="200" Height="80" Margin="50">Press to Bevel</Button>
</StackPanel>
</Page>
다음 예제에서는 코드를 사용하여, 마우스 포인터를 Button 위로 이동할 때 해당 단추에 BevelBitmapEffect를 적용하는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.BevelExample" >
<StackPanel>
<Button MouseEnter="OnMouseOverBevelButton" Width="200" Height="80" Margin="50">
MouseOver to Bevel!
</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 BevelExample : Page
{
// Add Bevel effect.
void OnMouseOverBevelButton(object sender, RoutedEventArgs args)
{
// Get a reference to the Button.
Button myButton = (Button)sender;
// Initialize a new BevelBitmapEffect that will be applied
// to the Button.
BevelBitmapEffect myBevelEffect = new BevelBitmapEffect();
// Set the BevelWidth. The default for BevelWidth is 5.
myBevelEffect.BevelWidth = 15;
// Set the EdgeProfile. The default value is Linear.
myBevelEffect.EdgeProfile = EdgeProfile.CurvedIn;
// Set the LightAngle (direction where light is coming from) to 320 degrees.
myBevelEffect.LightAngle = 320;
// Set the Relief to an intermediate value of 0.5. Relief specifies the relief
// between light and shadow for the bevel. The default value is 0.3.
myBevelEffect.Relief = 0.4;
// Set the Smoothness. The default value is 0.5. This example sets
// the property to the maximum value which is 1.
myBevelEffect.Smoothness = 0.4;
// Apply the bitmap effect to the Button.
myButton.BitmapEffect = myBevelEffect;
}
}
}
다음 예제에서는 마우스 포인터를 Button 위로 이동할 때 3D 효과에 사용되는 인공 광원이 Button 주위에서 회전하면서 3D 효과의 내부 수준이 증가하도록 BevelBitmapEffect의 BevelWidth 및 LightAngle 속성에 애니메이션 효과를 주는 방법을 보여 줍니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Button Width="200" Height="80" Margin="50">
MouseOver ME!
<Button.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<BevelBitmapEffect x:Name="myBevelBitmapEffect" BevelWidth="0" EdgeProfile="CurvedIn" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<!-- Animate the BevelWidth from 0 to 15. -->
<DoubleAnimation
Storyboard.TargetName="myBevelBitmapEffect"
Storyboard.TargetProperty="BevelWidth"
From="0" To="15" Duration="0:0:0.5" AutoReverse="True"
/>
<!-- Animate the LightAngle so that the light source and
corresponding bevel shadows move around the button. -->
<DoubleAnimation
Storyboard.TargetName="myBevelBitmapEffect"
Storyboard.TargetProperty="LightAngle"
From="360" To="0" Duration="0:0:0.5" AutoReverse="True"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>