Creating Simple Animation in WPF

Creating animation in WPF is very simple. In this post I will explain how to create simple animation in WPF.

WPF animates object by applying animation to their individual properties. For example, Button can be animated by changing Width, Height, Color, Opacity properties etc. Property must be dependency property if you want to apply animation on it.

Below are majorly used different types of Animation in WPF

1. Double Animation
2. Color Animation
3. Point Animation
4. Decimal Animation
5. Integer Animation

Let’s start with simple example.

XAML

<Grid>

<Rectangle Height="100" Width="100"

            Fill="Red"

            Name="MyRectangle">

    <Rectangle.Triggers>

        <EventTrigger RoutedEvent="MouseEnter">

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Width"

                        From="100" To="200"

                        Duration="0:0:1" />

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Height"

                        From="100" To="200"

                        Duration="0:0:1" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

        <EventTrigger RoutedEvent="MouseLeave">

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Width"

                        To="100"

                        Duration="0:0:1" />

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Height"

                        To="100"

                        Duration="0:0:1" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

    </Rectangle.Triggers>

</Rectangle>

</Grid>

As shown in above example, Rectangle has two event triggers set with two different routed event one is MouseEnter and another is MouseLeave. So when mouse enters inside rectangle area the MouseEnter trigger will get fired and start animation block which increase height and width of rectangle from 100 to 200. When mouse leave from rectangle area it will fire MouseLeave trigger and start animation which reduce height and width of rectangle to 100.

Let’s have a look on below example which uses RepeatBehavior and AutoReverse property.

<Grid>

<Rectangle Height="100" Width="100"

            Fill="Red"

            Name="MyRectangle">

    <Rectangle.Triggers>

        <EventTrigger RoutedEvent="MouseEnter">

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Width"

                        From="100" To="200"

                        AutoReverse="True"

                        RepeatBehavior="Forever"

                        Duration="0:0:1" />

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Height"

                        From="100" To="200"

                        AutoReverse="True"

                        RepeatBehavior="Forever"

                        Duration="0:0:1" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

    </Rectangle.Triggers>

</Rectangle>

</Grid>

In above example, AutoReverse and RepeatBehavior properties are used. AutoReverse property ensures when animation reach to specified duration it will automatically reverse the animation. RepeatBehavior specifies how many times you want to play animation. In our example we specified to forever mean animation will play forever. We can also specify numbers like “2” if we want to repeat for two times.  

Below are some important properties used in animation -

Property Name	Description
Storyboard.TargetName	Specify the name of an object on which you want to perform animation.
Storyboard.TargetProperty	Specify the dependency property to animate.
Duration	Defines time for animation.
From	Starting value
To	Ending value
RepeatBehavior	Specify how many times animation plays.
AutoReverse	Specify whether animation plays backwards after it reaches to end of duration.

Simple Animation using ColorAnimation

XAML

<Grid>

<Rectangle Height="100" Width="100"

    Name="MyRectangle">

    <Rectangle.Fill>

        <SolidColorBrush x:Name="MyColor" Color="Red" />

    </Rectangle.Fill>

    <Rectangle.Triggers>

        <EventTrigger RoutedEvent="MouseEnter">

            <BeginStoryboard>

                <Storyboard>

                    <ColorAnimation

                        Storyboard.TargetName="MyColor"

                        Storyboard.TargetProperty="Color"

                        From="Red" To="Blue"

                        AutoReverse="True"

                        RepeatBehavior="Forever"

                        Duration="0:0:2" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

    </Rectangle.Triggers>

</Rectangle>

</Grid>

In above example, ColorAnimation class is used to animate color inside rectangle. Rectangle has SolidColorBrush named MyColor and the same object is used in animation while MouseEnter on Rectangle.

Hope you liked this article. Please feel free to write feedback/comments in comments section.

See Also - 

WPF Resources

WPF Brushes

Control Template in WPF

Triggers in WPF

Triggers are collection of setters and execute when condition met. Triggers are part of Style and can be defined inside style. For more information about Style you can go through my article on Style. Five types of Triggers are available in WPF

• Trigger (Property Trigger)
• MultiTrigger (Multiple Property Trigger)
• DataTrigger
• MultiDataTrigger
• EventTrigger

Trigger

These triggers are simple triggers and can set any dependency property. Trigger defines property and value. If property contains specified value then the setter action defined inside trigger will execute.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <Trigger Property="IsMouseOver" Value="True">

            <Setter Property="FontSize" Value="20" />

            <Setter Property="FontWeight" Value="Bold" />

            <Setter Property="Foreground" Value="Red" />

        </Trigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

    <Button Content="Click Me!" Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, When IsMouseOver property value is true the defined setter action inside trigger will execute.

MultiTrigger

This is similar to Trigger but combines multiple conditions and all the condition must met to execute setter collection defined in multitrigger.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <MultiTrigger>

            <MultiTrigger.Conditions>

                <Condition Property="IsDefault" Value="True" />

                <Condition Property="IsMouseOver" Value="True" />

            </MultiTrigger.Conditions>

            <MultiTrigger.Setters>

                <Setter Property="FontSize" Value="20" />

                <Setter Property="FontWeight" Value="Bold" />

                <Setter Property="Foreground" Value="Red" />

            </MultiTrigger.Setters>

        </MultiTrigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

    <Button Content="Click Me!" IsDefault="True" 

            Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, When IsDefault and IsMouseOver both properties value set to true the defined setter action inside multitrigger will execute.

DataTrigger

Data triggers are similar to normal trigger except that they can be triggered by any property rather than just only dependency property. In data trigger we need to specify binding instead of property name.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <DataTrigger  Binding="{Binding

                      RelativeSource={RelativeSource Self},

                      Path=Content}" Value="Click Me!">

            <DataTrigger.Setters>

                <Setter  Property="FontSize" Value="20" />

            </DataTrigger.Setters>

        </DataTrigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

    <Button Content="Click Me!"

            Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, Data trigger checks value of Content property of Button and if value matches then it will execute setter block of data trigger. As per above example Button content is 'Click Me!' which matches the value mentioned in data trigger so it will execute setter block. In data trigger binding you can use any property of control or entity.

MultiDataTrigger

This is similar to DataTrigger but combines multiple conditions and all the condition must met to execute setter collection defined in MultiDataTrigger.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <MultiDataTrigger>

            <MultiDataTrigger.Conditions>

                <Condition  Binding="{Binding

                  RelativeSource={RelativeSource Self},

                  Path=Content}" Value="Click Me!" />

                <Condition  Binding="{Binding

                  RelativeSource={RelativeSource Self},

                  Path=IsDefault}" Value="True" />

            </MultiDataTrigger.Conditions>

            <MultiDataTrigger.Setters>

                <Setter  Property="FontSize" Value="20" />

            </MultiDataTrigger.Setters>

        </MultiDataTrigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!" IsDefault="True"

        Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, When Content property and IsDefault property value match with the value mentioned in data trigger then the setter collection of MultiDataTrigger will execute. Both conditions must match.

EventTriggers

Event triggers are little different than other triggers. It depends on Routed Event. When certain routed event fires the event triggers action will execute. Instead of setter collection EventTrigger have Action collection. Inside action you can specify Animation. Inside action storyboard can be specified. I will explain about Animation and Storyboard in detail in my later post.

<Window.Resources>

<Style TargetType="Button">

<Style.Triggers>

    <EventTrigger RoutedEvent="MouseEnter">

        <EventTrigger.Actions>

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Duration="0:0:0.5"

                        Storyboard.TargetProperty="Width"

                        To="200"  />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger.Actions>

    </EventTrigger>

    <EventTrigger RoutedEvent="MouseLeave">

        <EventTrigger.Actions>

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Duration="0:0:0.5"

                        Storyboard.TargetProperty="Width"

                        To="150" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger.Actions>

    </EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!"

Height="40" Width="150" Margin="5" />

</StackPanel>

On Mouse Enter

On Mouse Leave

As per above code, MouseEnter and MouseLeave event trigger is specified. So whenever these events fires the EventTriggerAction will get execute. In above example Button width animation is specified. So when mouse enters inside button area the width of button will set to 200 and on mouse leave set back to 150.

See also

Styles in WPF

Routed Events in WPF
Routed Commands in WPF