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

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.