Edit

How to: Animate the Position or Color of a Gradient Stop

  • Article

This example shows how to animate the Color and Offset of GradientStop objects.

Example

The following example animates three gradient stops inside a LinearGradientBrush. The example uses three animations, each of which animates a different gradient stop:

  • The first animation, a DoubleAnimation, animates the first gradient stop's Offset from 0.0 to 1.0 and then back to 0.0. As a result, the first color in the gradient shifts from the left side to the right side of the rectangle and then back to the left side.

  • The second animation, a ColorAnimation, animates the second gradient stop's Color from Purple to Yellow and then back to Purple. As a result, the middle color in the gradient changes from purple to yellow and back to purple.

  • The third animation, another ColorAnimation, animates the opacity of the third gradient stop's Color by -1 and then back. As a result, the third color in the gradient fades away and then becomes opaque again.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace BrushesIntroduction
{
    public class GradientStopAnimationExample : Page
    {
        public GradientStopAnimationExample()
        {
            Title = "GradientStop 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. This rectangle will
            // be painted with a gradient.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 200;
            aRectangle.Height = 100;
            aRectangle.Stroke = Brushes.Black;
            aRectangle.StrokeThickness = 1;

            // Create a LinearGradientBrush to paint
            // the rectangle's fill.
            LinearGradientBrush gradientBrush = new LinearGradientBrush();

            // Create gradient stops for the brush.
            GradientStop stop1 = new GradientStop(Colors.MediumBlue, 0.0);
            GradientStop stop2 = new GradientStop(Colors.Purple, 0.5);
            GradientStop stop3 = new GradientStop(Colors.Red, 1.0);

            // Register a name for each gradient stop with the
            // page so that they can be animated by a storyboard.
            this.RegisterName("GradientStop1", stop1);
            this.RegisterName("GradientStop2", stop2);
            this.RegisterName("GradientStop3", stop3);

            // Add the stops to the brush.
            gradientBrush.GradientStops.Add(stop1);
            gradientBrush.GradientStops.Add(stop2);
            gradientBrush.GradientStops.Add(stop3);

            // Apply the brush to the rectangle.
            aRectangle.Fill = gradientBrush;

            //
            // Animate the first gradient stop's offset from
            // 0.0 to 1.0 and then back to 0.0.
            //
            DoubleAnimation offsetAnimation = new DoubleAnimation();
            offsetAnimation.From = 0.0;
            offsetAnimation.To = 1.0;
            offsetAnimation.Duration = TimeSpan.FromSeconds(1.5);
            offsetAnimation.AutoReverse = true;
            Storyboard.SetTargetName(offsetAnimation, "GradientStop1");
            Storyboard.SetTargetProperty(offsetAnimation,
                new PropertyPath(GradientStop.OffsetProperty));

            //
            // Animate the second gradient stop's color from
            // Purple to Yellow and then back to Purple.
            //
            ColorAnimation gradientStopColorAnimation = new ColorAnimation();
            gradientStopColorAnimation.From = Colors.Purple;
            gradientStopColorAnimation.To = Colors.Yellow;
            gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5);
            gradientStopColorAnimation.AutoReverse = true;
            Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2");
            Storyboard.SetTargetProperty(gradientStopColorAnimation,
                new PropertyPath(GradientStop.ColorProperty));

            // Set the animation to begin after the first animation
            // ends.
            gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3);

            //
            // Animate the third gradient stop's color so
            // that it becomes transparent.
            //
            ColorAnimation opacityAnimation = new ColorAnimation();

            // Reduces the target color's alpha value by 1,
            // making the color transparent.
            opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F);
            opacityAnimation.Duration = TimeSpan.FromSeconds(1.5);
            opacityAnimation.AutoReverse = true;
            Storyboard.SetTargetName(opacityAnimation, "GradientStop3");
            Storyboard.SetTargetProperty(opacityAnimation,
                new PropertyPath(GradientStop.ColorProperty));

            // Set the animation to begin after the first two
            // animations have ended.
            opacityAnimation.BeginTime = TimeSpan.FromSeconds(6);

            // Create a Storyboard to apply the animations.
            Storyboard gradientStopAnimationStoryboard = new Storyboard();
            gradientStopAnimationStoryboard.Children.Add(offsetAnimation);
            gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation);
            gradientStopAnimationStoryboard.Children.Add(opacityAnimation);

            // Begin the storyboard when the left mouse button is
            // pressed over the rectangle.
            aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                gradientStopAnimationStoryboard.Begin(this);
            };

            StackPanel mainPanel = new StackPanel();
            mainPanel.Margin = new Thickness(10);
            mainPanel.Children.Add(aRectangle);
            Content = mainPanel;
        }
    }
}


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes

Namespace BrushesIntroduction
    Public Class GradientStopAnimationExample
        Inherits Page
        Public Sub New()
            Title = "GradientStop 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. This rectangle will
            ' be painted with a gradient.
            Dim aRectangle As New Rectangle()
            aRectangle.Width = 200
            aRectangle.Height = 100
            aRectangle.Stroke = Brushes.Black
            aRectangle.StrokeThickness = 1

            ' Create a LinearGradientBrush to paint
            ' the rectangle's fill.
            Dim gradientBrush As New LinearGradientBrush()

            ' Create gradient stops for the brush.
            Dim stop1 As New GradientStop(Colors.MediumBlue, 0.0)
            Dim stop2 As New GradientStop(Colors.Purple, 0.5)
            Dim stop3 As New GradientStop(Colors.Red, 1.0)

            ' Register a name for each gradient stop with the
            ' page so that they can be animated by a storyboard.
            Me.RegisterName("GradientStop1", stop1)
            Me.RegisterName("GradientStop2", stop2)
            Me.RegisterName("GradientStop3", stop3)

            ' Add the stops to the brush.
            gradientBrush.GradientStops.Add(stop1)
            gradientBrush.GradientStops.Add(stop2)
            gradientBrush.GradientStops.Add(stop3)

            ' Apply the brush to the rectangle.
            aRectangle.Fill = gradientBrush

            '
            ' Animate the first gradient stop's offset from
            ' 0.0 to 1.0 and then back to 0.0.
            '
            Dim offsetAnimation As New DoubleAnimation()
            offsetAnimation.From = 0.0
            offsetAnimation.To = 1.0
            offsetAnimation.Duration = TimeSpan.FromSeconds(1.5)
            offsetAnimation.AutoReverse = True
            Storyboard.SetTargetName(offsetAnimation, "GradientStop1")
            Storyboard.SetTargetProperty(offsetAnimation, New PropertyPath(GradientStop.OffsetProperty))

            '
            ' Animate the second gradient stop's color from
            ' Purple to Yellow and then back to Purple.
            '
            Dim gradientStopColorAnimation As New ColorAnimation()
            gradientStopColorAnimation.From = Colors.Purple
            gradientStopColorAnimation.To = Colors.Yellow
            gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5)
            gradientStopColorAnimation.AutoReverse = True
            Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2")
            Storyboard.SetTargetProperty(gradientStopColorAnimation, New PropertyPath(GradientStop.ColorProperty))

            ' Set the animation to begin after the first animation
            ' ends.
            gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3)

            '
            ' Animate the third gradient stop's color so
            ' that it becomes transparent.
            '
            Dim opacityAnimation As New ColorAnimation()

            ' Reduces the target color's alpha value by 1, 
            ' making the color transparent.
            opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F)
            opacityAnimation.Duration = TimeSpan.FromSeconds(1.5)
            opacityAnimation.AutoReverse = True
            Storyboard.SetTargetName(opacityAnimation, "GradientStop3")
            Storyboard.SetTargetProperty(opacityAnimation, New PropertyPath(GradientStop.ColorProperty))

            ' Set the animation to begin after the first two
            ' animations have ended. 
            opacityAnimation.BeginTime = TimeSpan.FromSeconds(6)

            ' Create a Storyboard to apply the animations.
            Dim gradientStopAnimationStoryboard As New Storyboard()
            gradientStopAnimationStoryboard.Children.Add(offsetAnimation)
            gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation)
            gradientStopAnimationStoryboard.Children.Add(opacityAnimation)

            ' Begin the storyboard when the left mouse button is
            ' pressed over the rectangle.
            AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) gradientStopAnimationStoryboard.Begin(Me)

            Dim mainPanel As New StackPanel()
            mainPanel.Margin = New Thickness(10)
            mainPanel.Children.Add(aRectangle)
            Content = mainPanel
        End Sub
    End Class
End Namespace

<Page  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="GradientStop Animation Example"
  Background="White">
  <StackPanel Margin="10">

    <Rectangle
      Width="200" 
      Height="100" 
      Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush>
          <GradientStop x:Name="GradientStop1" Color="MediumBlue" Offset="0.0" />
          <GradientStop x:Name="GradientStop2" Color="Purple" Offset="0.5" />
          <GradientStop x:Name="GradientStop3" Color="Red" Offset="1.0" />
        </LinearGradientBrush>
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="GradientStop1"
                Storyboard.TargetProperty="Offset"
                From="0.0" To="1.0" Duration="0:0:1.5"
                AutoReverse="True" />
              <ColorAnimation 
                Storyboard.TargetName="GradientStop2"
                Storyboard.TargetProperty="Color"
                From="Purple" To="Yellow" 
                Duration="0:0:1.5"
                AutoReverse="True"
                BeginTime="0:0:3" />
              <ColorAnimation 
                Storyboard.TargetName="GradientStop3"
                Storyboard.TargetProperty="Color" 
                Duration="0:0:1.5" 
                AutoReverse="True"
                BeginTime="0:0:6">
                <ColorAnimation.By>
                  <Color ScA="-1" ScR="0" ScB="0" ScG="0" />
                </ColorAnimation.By>
              </ColorAnimation>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    
  </StackPanel>
</Page>

Although this example uses a LinearGradientBrush, the process is the same for animating GradientStop objects inside a RadialGradientBrush.

For additional examples, see the Brushes Sample.

See also