Procedura: creare un effetto visivo di rilievo

Articolo
09/12/2008

Aggiornamento: novembre 2007

Tramite EmbossBitmapEffect è possibile creare un bump mapping dell'oggetto visivo per dare un'impressione di profondità e trama dovute all'esposizione a una sorgente di luce artificiale. Di seguito viene elencata una serie di esempi che illustrano quanto indicato:

Come utilizzare un markup semplice per applicare l'effetto a un oggetto.
Come utilizzare un oggetto Style per applicare l'effetto a uno o più oggetti.
Come utilizzare il codice per applicare l'effetto a un oggetto.
Come utilizzare un'animazione per animare le proprietà di un effetto applicato a un oggetto.

Nota: in tutti gli esempi riportati di seguito viene applicato un singolo effetto a un oggetto. Per applicare più effetti, è possibile utilizzare BitmapEffectGroup. Per alcuni esempi, vedere Procedura: creare più effetti visivi.

Esempio

Nell'esempio seguente viene illustrato l'utilizzo di un oggetto EmbossBitmapEffect per creare un'immagine a rilievo.

<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>

Nell'esempio seguente viene illustrato l'utilizzo di un oggetto Style per applicare un effetto EmbossBitmapEffect a qualsiasi oggetto Image nella pagina.

<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>

Nell'esempio seguente viene illustrato l'utilizzo di codice per applicare un oggetto EmbossBitmapEffect a un oggetto Image durante il caricamento.

Di seguito viene riportato il linguaggio Extensible Application Markup Language (XAML) dell'esempio.

<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>

Di seguito viene riportato il codice che gestisce l'evento per il markup.

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;
        }

    }
}

Nell'esempio seguente viene illustrata l'aggiunta di un'animazione alla proprietà LightAngle di EmbossBitmapEffect che crea una rotazione della luce artificiale attorno all'immagine in rilievo facendo spostare conseguentemente l'ombra proiettata dal rilievo.

<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>