.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.

Animation

In the previous article we looked at the use of property triggers to update the appearance of controls in response to properties being set to specific values. In the examples, the changes were instantaneous. This type of user interface change can be jarring to the user, spoiling the enjoyment of the software. Usually it is better to perform more subtle user interface changes using smooth animations. For example, instead of an immediate change in colour, you could use a fade effect.

When using WPF, you can create an animation for an individual property of a control. Usually this involves changing a property from one value to another, allowing the framework to determine the intermediate steps to create a flicker free transition. Animations can be applied to the dependency properties of classes that implement the IAnimatable interface. This includes all controls that inherit from UIElement and other key WPF base classes.

In this article we will look at the basics of animation when used with property triggers. This knowledge is required for other types of trigger, which we will see in the following articles. We'll return to animation later in the series to cover the technique in more detail.

For the simple example in this instalment we need a sample solution. Create a new WPF application in Visual Studio named, "TriggeredAnimationDemo". Once prepared, replace the XAML in the main window with the following:

<Window x:Class="TriggeredAnimationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Animation Demo"
        Height="200"
        Width="250">
    <Window.Resources>
        <Style x:Key="NameBox" TargetType="TextBox">
            <Setter Property="Background" Value="AntiqueWhite"/>
            <Setter Property="Margin" Value="5 0 5 5"/>
        </Style>

        <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">
                    <Setter Property="Opacity" Value="1"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel>
        <Label Content="First Name" />
        <TextBox Style="{StaticResource NameBox}"/>
        <Label Content="Last Name" />
        <TextBox Style="{StaticResource NameBox}"/>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource ButtonStyle}">OK</Button>
            <Button Style="{StaticResource ButtonStyle}">Cancel</Button>
        </StackPanel>
    </StackPanel>
</Window>

Run the program to see the results. The XAML generates a window containing several controls, including two buttons. The buttons use a style that includes a property trigger based upon the IsMouseOver property. When the mouse pointer is hovered over a button, its opacity is increased from semi-transparent to fully opaque. This change happens instantly, with no animation.