方法 : エンボス視覚効果を作成する

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

EmbossBitmapEffect を使用して、ビジュアルオブジェクトのバンプマッピングを作成し、人工光源による奥行とテクスチャの印象を生成できます。次の内容について一連の例を示します。

1 つのオブジェクトに効果を適用するための簡単なマークアップの使用方法
1 つまたは複数のオブジェクトに効果を適用するための Style の使用方法
オブジェクトへの効果を適用するためのコードの使用方法
オブジェクトに適用された効果のプロパティをアニメーション表示する方法

メモ : 次の例では、いずれもオブジェクトに対して効果を 1 つだけ適用しています。複数の効果を適用するには、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 を使用して、ページ上の任意の Image に EmbossBitmapEffect を適用する方法を次の例に示します。

<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 を適用する方法を次の例に示します。

次に示すのは、この例の Extensible Application Markup Language (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>