Introduction to WPF Animation

Animation is one of the most fascinating features of Window Presentation Foundation (WPF). To support easy usage of animation, Microsoft release Expression Blend, which is software for WPF designer.If you use Expression Blend, you can draw animation in your program very easily. But to optimize the animation and solve the problem when it occurs, we need to know about how to write WPF Animation in the code and extensible application markup language (XAML).

Three ways to write WPF Animation

   1. With only code.
   2. With only XAML
   3. With both code and XAML

We can make WPF application with only code, or with only XAML. To make application with only code enables most flexible logic, but it needs more times than the others. In other case, with only XAML, we can make it easily, but its flexibility is low. So, at usually, animation with both code and XAML is widely used. In this article, we will study about how to write WPF animation with both code and XAML. It is most flexible way; we can modify it in both sides. In the XAML side, we will define UI Component, and Animation with the UI is declared in the Code.

This diagram shows three steps to do WPF animation. First, UI components like slider and progress bar are declared in the XAML. Second, Callback function (event function) is declared in the code. Third, WPF animation about progress bar is written in the function. Let's do animated WPF Progress bar.

1. Create a new project and modify UI to have a slider and a progress bar. slider has a ValueChanged event. In the callback function of that event, we will make WPF animation about the progress bar.

<Window x:Class="AnimatedProgressbar.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006 ··· entation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animated Progress Bar" Height="100" Width="300">
<StackPanel>
        <Slider Name="slider"  Minimum="0" Maximum="100"
ValueChanged="slider_ValueChanged"/>
        <ProgressBar Name="progressBar" Height="30" Minimum="0" Maximum="100"/>
</StackPanel>
</Window>

2. Declare WPF animation to the slider bar.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace AnimatedProgressbar
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
        private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            DoubleAnimation animation = new DoubleAnimation(e.NewValue, new Duration(TimeSpan.FromSeconds(4)));
            Storyboard.SetTargetName(animation, "progressBar");
            Storyboard.SetTargetProperty(animation, new PropertyPath(ProgressBar.ValueProperty));
           
            Storyboard sb = new Storyboard();
            sb.Children.Add(animation);
            sb.Begin(progressBar);
           
            e.Handled = true;
        }
    }
}

Animation is defined in the namespace, "System.Windows.Media.Animation", we need to add the namespace into the code. Callback function to ValueChanged event of the slider is painted with red color. In the function, we have to define animation with destination value and duration firstly. And then, let's attach the animation into the target. In this case, the target is ProgressBar. We can set the target with its name, "progressBar", defined in the XAML. Nextly, we need to choose property of the target, which will be animated. In this examples, Value property is chosen.Now, we declare Storyboard object which has the animation, and then begin it. we can see the animated progress bar.

I hope this article will be helpful.