BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Animation - Basic Animations

The one hundred and fifty-sixth part of the Windows Presentation Foundation Fundamentals tutorial describes the most basic types of animation. These allow you to change a property from one value to another, with WPF automatically generating a series of intermediate values.

Basic Animation

In the previous article in the WPF tutorial we looked at the types of animation that are available and the more common animation classes that can be used. The first category of animation to consider in more detail is the most basic. It allows you to change properties from one value to another, via a series of intermediate values that are calculated automatically, using simple interpolation functions.

In this article we'll look at how you can create a basic animation that smoothly changes a property between two values. We'll also see how animation timelines can be combined, delayed, repeated and reversed. To do so, we need an example project. Create a new WPF application in Visual Studio named, "BasicAnimationDemo". Once the solution is ready, replace the XAML of the main window with the code below:

<Window x:Class="BasicAnimationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Animation Demo" Height="250" Width="300">
    <Window.Resources>
        <Style x:Key="OuterBorder" TargetType="Border">
            <Setter Property="Background" Value="Honeydew"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Width" Value="16"/>
            <Setter Property="Margin" Value="5"/>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.Setters>
                        <Setter Property="Height" Value="200"/>
                        <Setter Property="Width" Value="250"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="EllipseStyle" TargetType="Ellipse">
            <Setter Property="Fill" Value="Red"/>
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="StrokeThickness"  Value="5"/>
            <Setter Property="Height" Value="180"/>
            <Setter Property="Width" Value="230"/>
            <Setter Property="Margin" Value="9"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>
    </Window.Resources>

    <Border Style="{StaticResource OuterBorder}">
        <Ellipse Style="{StaticResource EllipseStyle}"/>
    </Border>
</Window>

The above XAML creates a window containing a Border with an embedded Ellipse. When the program is launched, the border is very small and the ellipse is hidden from view. If you move the mouse pointer over the border, a trigger fires. The trigger instantly expands the border, revealing the shape within. When you move the mouse pointer away from the border, it becomes smaller again. The image below shows the window with the border expanded:

WPF basic animation demonstration window

Creating a Simple Animation

For a simple animation, three values are required. These are the start and end values of the target property and the duration of the animation. The start value can be set explicitly using the From property. When From is used, the target property is set to this value at the start of the animation, before being smoothly moved towards the end value. If you do not specify a starting value, the animation begins with the current value, which might be set via a property or may be from a previously completed animation, or an animation that is already in progress.

The end value can be set using either the To property or the By property. If you set the To value, this specifies the absolute value at the end of the animation. If you use By, the value is added to the starting value, allowing a relative change.

The duration of the animation is set in the Duration property. This holds a TimeSpan, allowing you to define the duration in hours, minutes and seconds.

Let's modify the trigger in the Border's style to animate the increase and decrease in size, instead of having this update happen instantaneously. Change the XAML for the trigger, as follows:

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                    To="250" Duration="0:0:0.5"/>
                <DoubleAnimation Storyboard.TargetProperty="Height"
                    To="200" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                    To="16" Duration="0:0:2"/>
                <DoubleAnimation Storyboard.TargetProperty="Height"
                    To="16" Duration="0:0:2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

You can see that the storyboard that executes when the mouse enters the control now increases the size over a period of half a second. When the mouse leaves the control's area, the border shrinks over two seconds. Only the To property has been used for each animation. This means that moving the mouse into and out of the border whilst a previous animation is running does not cause the control to jump to a starting value or to change to an unexpected size.

3 May 2015