Spline​Color​Key​Frame Spline​Color​Key​Frame Spline​Color​Key​Frame Class


Animates from the Color value of the previous key frame to its own Value using splined interpolation.

public sealed class SplineColorKeyFrame : ColorKeyFrame, ISplineColorKeyFramepublic sealed class SplineColorKeyFrame : ColorKeyFrame, ISplineColorKeyFramePublic NotInheritable Class SplineColorKeyFrame Inherits ColorKeyFrame Implements ISplineColorKeyFrame
<SplineColorKeyFrame .../>
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited methods

Inherited properties


Key-frame animations permit more than one target value that is reached at a point along the animation timeline. In other words each key frame can specify a different intermediate value, and the last key frame reached is the final animation value. By specifying multiple values to animate, you can make more complex animations. You can mix discrete, linear, and spline keyframes in the same keyframe collection.

For more info on how to use key-frame animations, see Key-frame animations and easing function animations.


This XAML example uses the ColorAnimationUsingKeyFrames class to animate the Background property of a StackPanel. This animation uses three key frames in the following manner:

  1. During the first two seconds, LinearColorKeyFrame gradually changes the color from green to red. Linear key frames like LinearColorKeyFrame create a smooth linear transition between values.
  2. During the end of the next half second, DiscreteColorKeyFrame quickly changes the color from red to yellow. Discrete key frames like DiscreteColorKeyFrame create sudden changes between values; the animation occurs quickly and has no interpolation between values at all.
  3. During the final two seconds, SplineColorKeyFrame changes the color again, this time from yellow back to green. Spline key frames like SplineColorKeyFrame create a variable transition between values according to the values of the KeySpline property. A KeySpline provides a way to alter the relationship of time versus value during the animation duration to be nonlinear, and in particular the relationship can be a curve that would be difficult to produce with individual key frames. In this example, the change in color begins slowly and speeds up exponentially toward the end of the time segment.
<StackPanel x:Name="myStackPanel" Background="Red"
        <Storyboard x:Name="colorStoryboard">

            <ColorAnimationUsingKeyFrames Storyboard.TargetName="myStackPanel" 
                <!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
                a smooth, linear animation between values. -->
                <LinearColorKeyFrame Value="Blue" KeyTime="00:00:02" />

                <!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a 
                sudden jump between values. -->
                <DiscreteColorKeyFrame Value="Yellow" KeyTime="00:00:2.5" />

                <!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame 
                creates a variable transition between values depending on the KeySpline property. In this example,
                the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
                <SplineColorKeyFrame Value="Green" KeyTime="00:00:4.5" KeySpline="0.6,0.0 0.9,0.00" />

// Start the animation when the object loads
private void Start_Animation(object sender, RoutedEventArgs e)
' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
End Sub


SplineColorKeyFrame() SplineColorKeyFrame() SplineColorKeyFrame()

Initializes a new instance of the SplineColorKeyFrame class.

public SplineColorKeyFrame()public SplineColorKeyFrame()Public Sub New()


KeySpline KeySpline KeySpline

Gets or sets the two control points that define animation progress for this key frame.

public KeySpline KeySpline { get; set; }public KeySpline KeySpline { get; set; }Public ReadWrite Property KeySpline As KeySpline
<SplineColorKeyFrame KeySpline="keySplineValue"/>
KeySpline KeySpline KeySpline

The two control points that specify the cubic Bezier curve that defines the progress of the key frame.


KeySplineProperty KeySplineProperty KeySplineProperty

Identifies the KeySpline dependency property.

public static DependencyProperty KeySplineProperty { get; }public static DependencyProperty KeySplineProperty { get; }Public Static ReadOnly Property KeySplineProperty As DependencyProperty
DependencyProperty DependencyProperty DependencyProperty

The identifier for the KeySpline dependency property.


See Also