HOW TO：建立浮凸視覺效果
更新：2007 年 11 月
EmbossBitmapEffect 可以用來建立視覺物件的提升對應，利用人工光源產生深度和紋理的效果。下列一系列範例可顯示下列作業：
如何使用簡單的標記將效果套用到物件
如何使用 Style 將效果套用到一個或多個物件
如何使用程式碼將效果套用到物件
如何使用動畫，將套用到物件之效果的屬性顯示為動畫
**注意：**下面所有的範例都只將單一效果套用到物件。若要套用多種效果，您可以使用 BitmapEffectGroup。如需範例，請參閱 HOW TO：建立多個視覺效果。
範例
下列範例示範如何使用 EmbossBitmapEffect 建立浮凸效果的影像。
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Image Width="360" Source="/images/WaterLilies.jpg" Margin="10" >
<Image.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 Relief property determines the amount of relief of the emboss.
The valid range of values is 0-1 with 0 having the least relief and
1 having the most. The default value is 0.44. The LightAngle determines
from what direction the artificial light is cast upon the embossed
object which effects shadowing. The valid range is from 0-360 (degrees)
with 0 specifying the right-hand side of the object and successive values
moving counter-clockwise around the object. -->
<EmbossBitmapEffect Relief="0.8" LightAngle="320" />
</Image.BitmapEffect>
</Image>
</StackPanel>
</Page>
下列範例示範如何使用 Style，將 EmbossBitmapEffect 套用至頁面上的任何 Image。
<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 Image on the page. -->
<Style TargetType="{x:Type Image}">
<Setter Property="BitmapEffect" >
<Setter.Value>
<EmbossBitmapEffect Relief="0.8" />
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this Image which applies
the EmbossBitmapEffect. -->
<Image Width="360" Source="/images/WaterLilies.jpg" Margin="10" />
</StackPanel>
</Page>
下列範例示範如何使用程式碼，將 EmbossBitmapEffect 套用至載入的 Image。
以下是這個範例的可延伸標記語言 (XAML)。
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.EmbossExample" >
<StackPanel>
<!-- When this image loads, an EmbossBitmapEffect is applied to it. -->
<Image Width="360" Loaded="OnLoadEmbossImage" Source="/images/WaterLilies.jpg" />
</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 EmbossExample : Page
{
// Add Bevel effect.
void OnLoadEmbossImage(object sender, RoutedEventArgs args)
{
// Get a reference to the Button.
Image myImage = (Image)sender;
// Initialize a new BevelBitmapEffect that will be applied
// to the Button.
EmbossBitmapEffect myEmbossEffect = new EmbossBitmapEffect();
// The LightAngle determines from what direction the artificial
// light is cast upon the embossed object which effects shadowing.
// The valid range is from 0-360 (degrees)with 0 specifying the
// right-hand side of the object and successive values moving
// counter-clockwise around the object.
// Set the LightAngle to 320 degrees (lower right side).
myEmbossEffect.LightAngle = 320;
// The Relief property determines the amount of relief of the emboss.
// The valid range of values is 0-1 with 0 having the least relief and
// 1 having the most. The default value is 0.44.
myEmbossEffect.Relief = 0.8;
// Apply the bitmap effect to the Image.
myImage.BitmapEffect = myEmbossEffect;
}
}
}
下列程式碼示範如何建立 EmbossBitmapEffect 的 LightAngle 屬性動畫，讓人工光源繞著浮凸效果的影像轉動，使陰影依照浮凸移位投射。
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Image Source="/images/WaterLilies.jpg" Width="600" Margin="10" >
<Image.BitmapEffect>
<EmbossBitmapEffect x:Name="myEmbossBitmapEffect" Relief="0.8" LightAngle="0" />
</Image.BitmapEffect>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the LightAngle so that the artificial light
orbits around the embossed image which makes the
shadows cast by the emboss shift accordingly. -->
<DoubleAnimation
Storyboard.TargetName="myEmbossBitmapEffect"
Storyboard.TargetProperty="LightAngle"
From="0" To="360" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</StackPanel>
</Page>