.NET 4.0+

WPF Triggers - Animation Basics

by Richard Carr, published at http://www.blackwasp.co.uk/WPFAnimation.aspx

The one hundred and fiftieth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at triggers. This article considers animation using a storyboard. This allows more complex trigger actions than simple property changes.

Applying an Animation

There are several steps required to create a WPF animation. The first is to add actions to the trigger. Property triggers include two types of action. These are enter actions, which are executed when the property value changes to match the target value, and exit actions, which run when the value stops matching. It is usual to create an animation for both actions.

To add the action containers, add EnterAction and ExitAction elements within the property trigger of the ButtonStyle style, as follows:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="Margin" Value="0 20 0 0"/>
    <Setter Property="Opacity" Value="0.5"/>
    <Setter Property="Width" Value="100"/>
            
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>

            </Trigger.EnterActions>
            <Trigger.ExitActions>

            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

The second step is to create a storyboard for each action. A storyboard holds a collection of animations. Often only a single animation is required but for rich user interfaces with complex effects, a number of animations can be combined together. These might change several properties or perform a sequence of animations.

Let's add an empty Storyboard element to each of the actions. Note the use of the BeginStoryboard tag. This object starts the storyboard that it contains.

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                                
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>

            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

The final task is to create the animations. There are many different types of animation; the type you select depends upon the type of property that you wish to change. We'll be fading the Opacity property between 0.5 and 1. This is a double-precision floating-point value, so we'll use DoubleAnimations.

DoubleAnimation requires a minimum of three properties, though there are other options. The To property is set to the final value for the property being animated. Duration is a TimeSpan that specifies the length of the animation and TargetProperty names the property to animate. TargetProperty is an attached property of the Storyboard.

Add the animation elements, as follows. The XAML below specifies that when the mouse moves over a button, the opacity is increased to 1 over a period of one second. When the mouse leaves the button, it gradually returns to 0.5.

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation To="1" Duration="0:0:1"
                                 Storyboard.TargetProperty="Opacity"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation To="0.5" Duration="0:0:1"
                                 Storyboard.TargetProperty="Opacity"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

Run the program and move the mouse over the buttons to see the effect.