如何：创建浮雕可视化效果

项目
08/18/2008

更新：2007 年 11 月

EmbossBitmapEffect 可用于创建可视化对象的凹凸贴图，从而制造一种在人工光源下的深度和纹理效果。下面是关于以下主题的一系列示例：

如何使用简单的标记将效果应用于对象
如何使用 Style 将效果应用于一个或多个对象
如何使用代码将效果应用于对象
如何使用动画对应用于对象的效果的属性进行动画处理

**注意：**下面的所有示例都只将单一效果应用于对象。若要应用多个效果，可以使用 BitmapEffectGroup。请参见如何：创建多个可视化效果中的示例。

示例

下面的示例演示如何使用 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>

下面的示例演示如何使用代码在 Image 加载时将 EmbossBitmapEffect 应用于它。

下面是该示例的可扩展应用程序标记语言 (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>