A simple Animation Technique using Windows Presentation Foundation.

Description

This is my code that I learned from (Windows Presentation Foundation) WPF's Animation Techniques.

About Classes used

There are two important aspects to Animation Classes used in WPF:

#1: Here I use the DoubleAnimation class, allowing the animation between two targeted values of the type System.Double. The DoubleAnimation instance contains an initial & end values for a double property.

Namespace Required: System.Windows.Media.Animation

Controls Used

  1. Button Control (btnAnimate)
  2. Label Control (lblAnimate)
  3. TextBox Controls (txtFrom, txtTo, txtDuration)
  4. CheckBox Controls (chkRepeat, chkReverse)

Here I implemented code for a simple animation of the FontSize Property of the DoubleAnimation class. (Important Note: Here I only include the portion of the code that is required to understand the concept of the Animation Class.)

The Code

  1. XAML Code for Creating Controls for Animation.

    <Grid Width="276" Height="217">
    <    Label Height="63" Width="92" Name="lblFontSize" Content="Font Size" />
    <Label Margin="14,92,16,9" Name="lblAnimation" Content="Animation"/>

    <Button Height="36" Width="75" Name="btnAnimate"
    Click    ="AnimateOnClick" Content="Animate" />

    <    Label Height="25" Width="37" Name="lblFrom" Content="From" />
     <TextBox Height="23" Width="37" Name="txtFrom" />

    <    Label Height="25" Width="25" Name="lblTo" Content="To"/>
     <TextBox Height="23" Width="37" Name="txtTo" />

    <    Label Height="25" Width="52" Name="lblDuration" Content="Duration" />
     <TextBox Height="23" Name="txtDuration" ToolTip="Format :- hh:mm:ss" />

    <    CheckBox Height="15" Name="chkRepeat" Content="Repeat Forever" />
    <    CheckBox Height="15" Name="chkReverse" Content="Auto Reverse" />
    </    Grid>
  2. C# Code to create a function to animate the dependency property of any control.

    DoubleAnimation animate; // Declare an object for animation
    void Animate(Control cnrt, double from, double to,string duration, bool repeat, bool reverse)
    {
    animate = new DoubleAnimation(from, to, TimeSpan.Parse(duration));
    if (repeat == true)
    animate.RepeatBehavior = RepeatBehavior.Forever;
    if (reverse == true)
    animate.AutoReverse = true;
    // Apply Animation to Button Control
     cnrt.BeginAnimation(FontSizeProperty, animate);
    }
  3. Now execute the application and see the result (Figure 1).

    Intended Result

    Animation-Technique-in-wpf.png
    Figure 1: Output Window

Summary

In this writing, using C# & XAML, we have seen how to simply animate any dependency property of a control at runtime.