Cómo: Animar el color o la opacidad de un objeto SolidColorBrush
En este ejemplo se muestra cómo animar las propiedades Color y Opacity de un objeto SolidColorBrush.
Ejemplo
En el ejemplo siguiente se utilizan tres animaciones para animar las propiedades Color y Opacity de un objeto SolidColorBrush.
La primera animación, ColorAnimation, cambia el color del pincel a Gray cuando el mouse entra en el rectángulo.
La animación siguiente, ColorAnimation, cambia el color del pincel a Orange cuando el mouse sale del rectángulo.
La última animación, DoubleAnimation, cambia la opacidad del pincel a 0.0 cuando se presiona el botón primario del mouse.
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>
Para obtener un ejemplo más completo, que muestra cómo animar tipos diferentes de pinceles, vea Brushes Sample. Para obtener más información acerca de la animación, vea Información general sobre animaciones.
Para ofrecer coherencia con otros ejemplos de animación, en las versiones de código de este ejemplo se utiliza un objeto Storyboard para aplicar sus animaciones. Sin embargo, al aplicar una animación única en código, es más fácil para utilizar el método BeginAnimation en lugar de utilizar un objeto Storyboard. Para obtener un ejemplo, vea Cómo: Animar una propiedad sin utilizar un guión gráfico.
Vea también
Conceptos
Información general sobre animaciones
Información general sobre objetos Storyboard