Comment : animer la couleur ou l'opacité d'un SolidColorBrush
Cet exemple indique comment animer les Color et Opacity d'un SolidColorBrush.
Exemple
L'exemple suivant utilise trois animations pour animer les Color et Opacity d'un SolidColorBrush.
La première animation, une ColorAnimation, modifie la couleur du pinceau en Gray lorsque la souris entre dans le rectangle.
L'animation suivante, une autre ColorAnimation, modifie la couleur du pinceau en Orange lorsque la souris quitte le rectangle.
La dernière animation, une DoubleAnimation, modifie l'opacité du pinceau en 0.0 lorsque l'utilisateur clique sur le bouton gauche de la souris.
Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Input
Namespace Microsoft.Samples.Animation
''' <summary>
''' This example shows how to animate the Opacity and Color
''' properties of a SolidColorBrush.
''' </summary>
Public Class SolidColorBrushExample
Inherits Page
Public Sub New()
Title = "SolidColorBrush Animation Example"
Background = Brushes.White
' Create a NameScope for the page so
' that Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create a Rectangle.
Dim aRectangle As New Rectangle()
aRectangle.Width = 100
aRectangle.Height = 100
' Create a SolidColorBrush to paint
' the rectangle's fill. The Opacity
' and Color properties of the brush
' will be animated.
Dim myAnimatedBrush As New SolidColorBrush()
myAnimatedBrush.Color = Colors.Orange
aRectangle.Fill = myAnimatedBrush
' Register the brush's name with the page
' so that it can be targeted by storyboards.
Me.RegisterName("MyAnimatedBrush", myAnimatedBrush)
'
' Animate the brush's color to gray when
' the mouse enters the rectangle.
'
Dim mouseEnterColorAnimation As New ColorAnimation()
mouseEnterColorAnimation.To = Colors.Gray
mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1)
Storyboard.SetTargetName(mouseEnterColorAnimation, "MyAnimatedBrush")
Storyboard.SetTargetProperty(mouseEnterColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
Dim mouseEnterStoryboard As New Storyboard()
mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation)
AddHandler aRectangle.MouseEnter, Sub(sender As Object, e As MouseEventArgs) mouseEnterStoryboard.Begin(Me)
'
' Animate the brush's color to orange when
' the mouse leaves the rectangle.
'
Dim mouseLeaveColorAnimation As New ColorAnimation()
mouseLeaveColorAnimation.To = Colors.Orange
mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1)
Storyboard.SetTargetName(mouseLeaveColorAnimation, "MyAnimatedBrush")
Storyboard.SetTargetProperty(mouseLeaveColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
Dim mouseLeaveStoryboard As New Storyboard()
mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation)
AddHandler aRectangle.MouseLeave, Sub(sender As Object, e As MouseEventArgs) mouseLeaveStoryboard.Begin(Me)
'
' Animate the brush's opacity to 0 and back when
' the left mouse button is pressed over the rectangle.
'
Dim opacityAnimation As New DoubleAnimation()
opacityAnimation.To = 0.0
opacityAnimation.Duration = TimeSpan.FromSeconds(0.5)
opacityAnimation.AutoReverse = True
Storyboard.SetTargetName(opacityAnimation, "MyAnimatedBrush")
Storyboard.SetTargetProperty(opacityAnimation, New PropertyPath(SolidColorBrush.OpacityProperty))
Dim mouseLeftButtonDownStoryboard As New Storyboard()
mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation)
AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) mouseLeftButtonDownStoryboard.Begin(Me)
Dim mainPanel As New StackPanel()
mainPanel.Margin = New Thickness(20)
mainPanel.Children.Add(aRectangle)
Content = mainPanel
End Sub
End Class
End Namespace
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Input;
namespace Microsoft.Samples.Animation
{
/// <summary>
/// This example shows how to animate the Opacity and Color
/// properties of a SolidColorBrush.
/// </summary>
public class SolidColorBrushExample : Page
{
public SolidColorBrushExample()
{
Title = "SolidColorBrush Animation Example";
Background = Brushes.White;
// Create a NameScope for the page so
// that Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create a Rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 100;
aRectangle.Height = 100;
// Create a SolidColorBrush to paint
// the rectangle's fill. The Opacity
// and Color properties of the brush
// will be animated.
SolidColorBrush myAnimatedBrush = new SolidColorBrush();
myAnimatedBrush.Color = Colors.Orange;
aRectangle.Fill = myAnimatedBrush;
// Register the brush's name with the page
// so that it can be targeted by storyboards.
this.RegisterName("MyAnimatedBrush", myAnimatedBrush);
//
// Animate the brush's color to gray when
// the mouse enters the rectangle.
//
ColorAnimation mouseEnterColorAnimation = new ColorAnimation();
mouseEnterColorAnimation.To = Colors.Gray;
mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1);
Storyboard.SetTargetName(mouseEnterColorAnimation, "MyAnimatedBrush");
Storyboard.SetTargetProperty(
mouseEnterColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard mouseEnterStoryboard = new Storyboard();
mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation);
aRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
{
mouseEnterStoryboard.Begin(this);
};
//
// Animate the brush's color to orange when
// the mouse leaves the rectangle.
//
ColorAnimation mouseLeaveColorAnimation = new ColorAnimation();
mouseLeaveColorAnimation.To = Colors.Orange;
mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1);
Storyboard.SetTargetName(mouseLeaveColorAnimation, "MyAnimatedBrush");
Storyboard.SetTargetProperty(
mouseLeaveColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard mouseLeaveStoryboard = new Storyboard();
mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation);
aRectangle.MouseLeave += delegate(object sender, MouseEventArgs e)
{
mouseLeaveStoryboard.Begin(this);
};
//
// Animate the brush's opacity to 0 and back when
// the left mouse button is pressed over the rectangle.
//
DoubleAnimation opacityAnimation = new DoubleAnimation();
opacityAnimation.To = 0.0;
opacityAnimation.Duration = TimeSpan.FromSeconds(0.5);
opacityAnimation.AutoReverse = true;
Storyboard.SetTargetName(opacityAnimation, "MyAnimatedBrush");
Storyboard.SetTargetProperty(
opacityAnimation, new PropertyPath(SolidColorBrush.OpacityProperty));
Storyboard mouseLeftButtonDownStoryboard = new Storyboard();
mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation);
aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
mouseLeftButtonDownStoryboard.Begin(this);
};
StackPanel mainPanel = new StackPanel();
mainPanel.Margin = new Thickness(20);
mainPanel.Children.Add(aRectangle);
Content = mainPanel;
}
}
}
<!-- SolidColorBrushExample.xaml
This example shows how to animate the Opacity and Color
properties of a SolidColorBrush.-->
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="SolidColorBrush Animation Example"
Background="White">
<StackPanel Margin="20">
<!-- The Opacity and Color of the SolidColorBrush
used to fill this rectangle is animated. -->
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
</Rectangle.Fill>
<Rectangle.Triggers>
<!-- Animates the brush's color to gray
When the mouse enters the rectangle. -->
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MyAnimatedBrush"
Storyboard.TargetProperty="Color"
To="Gray" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- Animates the brush's color to orange
when the mouse leaves the rectangle. -->
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MyAnimatedBrush"
Storyboard.TargetProperty="Color"
To="Orange" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- Animates the brush's opacity when the
left mouse button is pressed over the rectangle. -->
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedBrush"
Storyboard.TargetProperty="Opacity"
To="0.0" Duration="0:0:0.5" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>
Pour obtenir un exemple plus complet qui montre comment animer les différents types de pinceaux, consultez Pinceaux, exemple. Pour plus d'informations sur l'animation, consultez Vue d'ensemble de l'animation.
Pour des raisons de cohérence avec d'autres exemples d'animation, les versions de code de cet exemple utilisent un objet Storyboard pour appliquer leurs animations. Toutefois, lors de l'application d'une seule animation dans le code, il est plus simple d'utiliser la méthode BeginAnimation qu'un Storyboard. Pour obtenir un exemple, consultez Comment : animer une propriété sans utiliser de storyboard.
Voir aussi
Concepts
Vue d'ensemble des storyboards