--- title: "How to: Animate a Rectangle Geometry by Using Key Frames" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "key frames [WPF], animating RectangleGeometry objects with" - "RectangleGeometry objects [WPF], animating with key frames" - "animation [WPF], RectangleGeometry objects with key frames" ms.assetid: a8b45ceb-0e32-4ba1-928f-df6d30db17c6 --- # How to: Animate a Rectangle Geometry by Using Key Frames This example shows how to animate the property of a by using key frames. ## Example The following example uses the class to animate the property of a . This animation uses three key frames in the following manner: 1. During the first two seconds, uses an instance of the class to animate a gradual change in the position, width, and height of a rectangle. Linear key frames like create a smooth linear transition between values. 2. During the end of the next half second, uses an instance of the class to suddenly decrease the height of the rectangle. Discrete key frames like 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 class to change the rectangle back to its original size and position. Spline key frames like create a variable transition between values according to the values of the property. In this example, the change begins slowly and speeds up exponentially toward the end of the time segment. [!code-csharp[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/RectAnimationUsingKeyFramesExample.cs#rectanimationusingkeyframeswholepage)] [!code-vb[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/rectanimationusingkeyframesexample.vb#rectanimationusingkeyframeswholepage)] [!code-xaml[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/RectAnimationUsingKeyFramesExample.xaml#rectanimationusingkeyframeswholepage)] For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation). ## See also - - - - [Key-Frame Animations Overview](key-frame-animations-overview.md) - [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)