How to: Animate a Rectangle Geometry by Using Key Frames

This example shows how to animate the Rect property of a RectangleGeometry by using key frames.

Example

The following example uses the RectAnimationUsingKeyFrames class to animate the Rect property of a RectangleGeometry. This animation uses three key frames in the following manner:

1. During the first two seconds, uses an instance of the LinearRectKeyFrame class to animate a gradual change in the position, width, and height of a rectangle. Linear key frames like LinearRectKeyFrame create a smooth linear transition between values.

2. During the end of the next half second, uses an instance of the DiscreteRectKeyFrame class to suddenly decrease the height of the rectangle. Discrete key frames like DiscreteRectKeyFrame create sudden changes between values, that is, the decrease in height occurs quickly and is not subtle.

3. During the final two seconds, uses an instance of the SplineRectKeyFrame class to change the rectangle back to its original size and position. Spline key frames like SplineRectKeyFrame create a variable transition between values according to the values of the KeySpline property. In this example, the change begins slowly and speeds up exponentially toward the end of the time segment.

<Page  
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">

    <Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
      <Path.Data>
        <RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the Rect property of the RectangleGeometry which causes the
              rectangle to animate its position as well as its width and height. -->
              <RectAnimationUsingKeyFrames
                Storyboard.TargetName="myRectangleGeometry"
                Storyboard.TargetProperty ="Rect"
                Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">

                <!-- Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
                a smooth, linear animation between values. -->
                <LinearRectKeyFrame Value="600,50,200,50" KeyTime="0:0:2" />

                <!-- In the next half second, change height to 10. DiscreteRectKeyFrame creates a 
                sudden "jump" between values. -->
                <DiscreteRectKeyFrame Value="600,50,200,10" KeyTime="0:0:2.5" />

                <!-- In the final 2 seconds of the animation, go back to the starting position, width, and height.  
                Spline key frames like SplineRectKeyFrame 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.-->
                <SplineRectKeyFrame Value="0,200,100,100" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00"  />
              </RectAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>

  </StackPanel>
</Page>

For the complete sample, see KeyFrame Animation Sample.

See Also

Reference

RectangleGeometry
Rect
RectAnimationUsingKeyFrames

Concepts

Key-Frame Animations Overview

Other Resources

Key-Frame Animation How-to Topics
KeyFrame Animation Sample