How to: Animate a Rectangle

This example shows how to animate changes to the size and position of a rectangle.

Example

The following example uses an instance of the RectAnimation class to animate the Rect property of a RectangleGeometry, which animates changes to the size and position of the rectangle.

<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <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 postion and size. -->
              <RectAnimation
              Storyboard.TargetName="myRectangleGeometry"
              Storyboard.TargetProperty ="Rect"
              Duration="0:0:2" FillBehavior="HoldEnd" From="0,200,100,100" To="600,50,200,50" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </StackPanel>
</Page>

See Also

Reference

RectAnimation
Rect
RectangleGeometry

Concepts

Animation Overview
WPF Graphics, Animation, and Media Overview

Other Resources

Graphics How-to Topics
Graphics Samples
Animation and Timing
Animation and Timing How-to Topics
Animation and Timing Samples