WPF Color Animation in SolidColorBrush

Below code snippet is a WPF application created using Visual Studio 2010.

This application is an example of color animation of a SolidColorBrush.

On a Window, there is a rectangle filled with red color. When you mouse over the rectangle, color fades away from red to green and when you mouse leave the rectangle, the color changes back from green to red.

<Window x:Class="HowToSamples.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<StackPanel Margin="20" Name="LayoutRoot">
<Rectangle Width="300" Height="200">
<Rectangle.Fill>
<SolidColorBrush x:Name="redBrush" Color="Red" />
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="redBrush"
Storyboard.TargetProperty="Color" To="Green" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="redBrush"
Storyboard.TargetProperty="Color" To="Red" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="redBrush"
Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.5"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

</StackPanel>

</Window>

The same color animation we can do in code-behind using the following code.

 private void ColorAnimationInredRectangle()
{
// Create a Red SolidColorBrush
SolidColorBrush redBrush = new SolidColorBrush();
redBrush.Color = Colors.Red;

// Create a Rectangle filled with Red brush
Rectangle redRectangle = new Rectangle();
redRectangle.Width = 300;
redRectangle.Height = 200;
redRectangle.Fill = redBrush;

// Register the brush's name
this.RegisterName("redBrush", redBrush);

// Animate brush with Green color
ColorAnimation mouseEnterColorAnimation = new ColorAnimation();
mouseEnterColorAnimation.To = Colors.Green;
mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1);
Storyboard.SetTargetName(mouseEnterColorAnimation, "redBrush");
Storyboard.SetTargetProperty(
mouseEnterColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard mouseEnterStoryboard = new Storyboard();
mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation);
redRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
{
mouseEnterStoryboard.Begin(this);
};

// Animate color back to red when mouse leaves
ColorAnimation mouseLeaveColorAnimation = new ColorAnimation();
mouseLeaveColorAnimation.To = Colors.Red;
mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1);
Storyboard.SetTargetName(mouseLeaveColorAnimation, "redBrush");
Storyboard.SetTargetProperty(
mouseLeaveColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard mouseLeaveStoryboard = new Storyboard();
mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation);
redRectangle.MouseLeave += delegate(object sender, MouseEventArgs e)
{
mouseLeaveStoryboard.Begin(this);
};


DoubleAnimation opacityAnimation = new DoubleAnimation();
opacityAnimation.To = 0.0;
opacityAnimation.Duration = TimeSpan.FromSeconds(0.5);
opacityAnimation.AutoReverse = true;
Storyboard.SetTargetName(opacityAnimation, "redBrush");
Storyboard.SetTargetProperty(
opacityAnimation, new PropertyPath(SolidColorBrush.OpacityProperty));
Storyboard mouseLeftButtonDownStoryboard = new Storyboard();
mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation);
redRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
mouseLeftButtonDownStoryboard.Begin(this);
};

LayoutRoot.Children.Add(redRectangle);
}