Comment : animer un effet visuel biseauté
Mise à jour : novembre 2007
Cet exemple montre comment animer un BevelBitmapEffect sur un bouton.
Exemple
L'exemple suivant montre comment animer les propriétés BevelWidth et LightAngle d'un BevelBitmapEffect. Par conséquent, lorsque le pointeur de la souris est placé sur le Button, le niveau interne du biseau augmente, alors que la source de lumière artificielle utilisée pour le biseau tourne autour du Button.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Button Width="200" Height="80" Margin="50">
MouseOver ME!
<Button.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<BevelBitmapEffect x:Name="myBevelBitmapEffect" BevelWidth="0" EdgeProfile="CurvedIn" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<!-- Animate the BevelWidth from 0 to 15. -->
<DoubleAnimation
Storyboard.TargetName="myBevelBitmapEffect"
Storyboard.TargetProperty="BevelWidth"
From="0" To="15" Duration="0:0:0.5" AutoReverse="True"
/>
<!-- Animate the LightAngle so that the light source and
corresponding bevel shadows move around the button. -->
<DoubleAnimation
Storyboard.TargetName="myBevelBitmapEffect"
Storyboard.TargetProperty="LightAngle"
From="360" To="0" Duration="0:0:0.5" AutoReverse="True"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
Pour l'exemple complet, consultez Galerie d'effets bitmap, exemple.
Voir aussi
Tâches
Comment : créer un effet visuel biseauté
Comment : animer plusieurs effets visuels
Galerie d'effets bitmap, exemple
Concepts
Vue d'ensemble des effets bitmap