ObjectAnimationUsingKeyFrames Class

XAML Values

• oneOrMoreDiscreteObjectKeyFrames
  One or more DiscreteObjectKeyFrame object elements that define the key frames for the animation.

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
         an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
         swap different brush objects at regular intervals, making the background of the Page
         change. -->
            <ObjectAnimationUsingKeyFrames
         Storyboard.TargetName="animatedRectangle"
         Storyboard.TargetProperty="Fill"
         Duration="0:0:4" RepeatBehavior="Forever">
                <ObjectAnimationUsingKeyFrames.KeyFrames>

                    <!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for 
                use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
                a specified timeline. Other types of interpolation are too problematic to apply
                to objects.  -->
                    <!-- Using a DiscreteObjectKeyFrame, the Fill property of the Rectangle suddenly  
                changes to a LinearGradientBrush after the first two seconds of the animation. -->
                    <DiscreteObjectKeyFrame KeyTime="0:0:2">
                        <DiscreteObjectKeyFrame.Value>
                            <LinearGradientBrush>
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="Yellow" Offset="0.0" />
                                    <GradientStop Color="Orange" Offset="0.5" />
                                    <GradientStop Color="Red" Offset="1.0" />
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>

                    <!-- After the third second of the animation, the Fill property is suddenly changed 
                to a different LinearGradientBrush which remains until the end of the animation 
                (4 seconds total). -->
                    <DiscreteObjectKeyFrame KeyTime="0:0:3">
                        <DiscreteObjectKeyFrame.Value>
                            <RadialGradientBrush GradientOrigin="0.75,0.25">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="White" Offset="0.0" />
                                    <GradientStop Color="MediumBlue" Offset="0.5" />
                                    <GradientStop Color="Black" Offset="1.0" />
                                </RadialGradientBrush.GradientStops>
                            </RadialGradientBrush>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>

                </ObjectAnimationUsingKeyFrames.KeyFrames>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>

    <!-- The Fill property of this rectangle is animated. -->
    <Rectangle x:Name="animatedRectangle" Loaded="Rectangle_Loaded" Width="300" Height="300" />

</StackPanel>

' When the rectangle loads, begin the animation.
Private Sub Rectangle_Loaded(ByVal sender As Object, ByVal e As EventArgs)
    myStoryboard.Begin()
End Sub

// When the rectangle loads, begin the animation.
private void Rectangle_Loaded(object sender, EventArgs e)
{
    myStoryboard.Begin();
}