Comment : créer un effet visuel en relief
Mise à jour : novembre 2007
EmbossBitmapEffect peut être utilisé pour créer un placage de relief de l'objet visuel pour donner l'impression de profondeur et de texture provenant d'une source de lumière artificielle. Les exemples suivants montrent :
Comment utiliser un balisage simple pour appliquer l'effet à un objet
Comment utiliser Style pour appliquer l'effet à un ou plusieurs objets
Comment utiliser du code pour appliquer l'effet à un objet
Comment utiliser une animation pour animer les propriétés d'un effet appliqué à un objet
Remarque : Tous les exemples qui suivent n'appliquent qu'un seul effet à un objet. Pour appliquer plusieurs effets, utilisez BitmapEffectGroup. Consultez Comment : créer plusieurs effets visuels pour obtenir des exemples.
Exemple
L'exemple suivant indique comment utiliser EmbossBitmapEffect pour créer une image en relief.
<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>
L'exemple suivant indique comment utiliser Style pour appliquer EmbossBitmapEffect à tout Image dans la page.
<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>
L'exemple suivant indique comment utiliser du code pour appliquer un EmbossBitmapEffect à une Image lors de son chargement.
Voici le code XAML (Extensible Application Markup Language) pour l'exemple.
<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>
Les éléments suivants correspondent au code qui gère l'événement pour la balise.
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;
}
}
}
L'exemple suivant indique comment animer la propriété LightAngle de EmbossBitmapEffect pour que la lumière artificielle tourne autour de l'image en relief et pour faire ainsi bouger les ombres projetées par le relief.
<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>
Voir aussi
Tâches
Comment : créer un effet de lumière sur le bord extérieur d'un objet
Comment : appliquer un effet flou à un Visual
Comment : créer un effet visuel d'ombre portée
Comment : créer un effet visuel biseauté
Comment : créer plusieurs effets visuels
Comment : animer plusieurs effets visuels