Click here to Skip to main content
15,867,686 members
Articles / Desktop Programming / Win32
Article

Beginner's WPF Animation Tutorial

Rate me:
Please Sign up or sign in to vote.
4.04/5 (71 votes)
27 Jan 2008CPOL2 min read 481.3K   27.2K   143   35
A simple animation tutorial on WPF
WpfApplication2

Introduction

My expected audience for this article is extreme beginners of WPF. But you should be knowledgeable in any of the .NET CLR languages. I used my favorite C# for description in this article. Also, do not forget, WPF is for .NET Framework 3.x+ and I used Visual Studio Express 2008.

Animate the Button

This tutorial is for creating a simple button animation with System.Windows.Media.Animation namespace. As usual, I use C# for demonstrating this sample since it is my favorite after C language. Also note that I write these articles for programmers and I will be writing code in C# even though we can do all these with XAML itself.

Step 1: Place a button on the form. We will call it Button1.

Step 2: Now add these lines to the button click event. (Simply double click on the button if you are in Visual Studio). Remember to set the language of your code snippet using the language dropdown.

C#
DoubleAnimation da = new DoubleAnimation();
da.From = 30;
da.To = 100;
da.Duration = new Duration(TimeSpan.FromSeconds(1));
Button1.BeginAnimation(Button.HeightProperty, da);

Step 3: Press F5. i.e. Execute.

You will see a button increase its size automatically when you click.

Tips

  1. Add the following line before BeginAnimation. This will restore the button back after the animation. Of course it is also animated.

    C#
    da.AutoReverse = true;
  2. Add the following line before BeginAnimation. You can see that the animation never stops.

    C#
    da.RepeatBehavior = RepeatBehavior.Forever

Rotate Rectangle

WpfApplication2

Step 1: Place a button and shape rectangle on the form. (Button is not needed. I use it just for raising an event.)

Step 2: Add the following code in the button click event:
Note: Do not forget to import System.Windows.Media.Animation namespace.

C#
DoubleAnimation da = new DoubleAnimation();
da.From = 0;
da.To = 360;
da.Duration = new Duration(TimeSpan.FromSeconds(3));
da.RepeatBehavior = RepeatBehavior.Forever;
RotateTransform rt = new RotateTransform();
rectangle1.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);

Step 3: Execute and enjoy. You can see a rectangle rotating 360 degrees continuously. As I mentioned in the other article, you can add autoreverse etc.

Here is the complete C# code:

C#
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 WpfApplication1
{
    /// <summary />
    /// Interaction logic for Window1.xaml
    /// </summary />
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.From = 0;
            da.To = 360;
            da.Duration = new Duration(TimeSpan.FromSeconds(3));
            da.RepeatBehavior = RepeatBehavior.Forever;
            RotateTransform rt = new RotateTransform();
            rectangle1.RenderTransform = rt;
            rt.BeginAnimation(RotateTransform.AngleProperty, da);
        }
    }
}

Artificially Rotate a Wheel

In this article, you can see a wheel picture at the top. We will use image1.RenderTransformOrigin to keep the centerpoint of the image. Check the sample source code attached.

Here is the code for 'running wheel':

C#
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.Media.Animation;
using System.Windows.Shapes;
 
namespace WpfApplication1
{
    /// <summary />
    /// Interaction logic for Window1.xaml
    /// </summary />
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DoubleAnimation da = new DoubleAnimation
                (360, 0, new Duration(TimeSpan.FromSeconds(3)));
            RotateTransform rt = new RotateTransform();
            image1.RenderTransform = rt;
            image1.RenderTransformOrigin = new Point(0.5, 0.5);
            da.RepeatBehavior = RepeatBehavior.Forever;
            rt.BeginAnimation(RotateTransform.AngleProperty, da);
        }
    }
}

The animation procedure specified in this article is simply 'nothing' when compared to the scope hidden in WPF. Hope the fear that beginners have will be wiped out with this sample article. WPF is as simple as ABC.

History

  • 28th January, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect ORION INDIA SYSTEMS
India India
Praveen.V.Nair - aka NinethSense - PMP, Microsoft MVP - is working as a Head of Technology and Architecture at Orion India Systems, Kochi, India. He has been playing with electronics from the age of 10 and with computers from the age of 14. He usually blogs at http://blog.ninethsense.com/.

Comments and Discussions

 
PraiseThx Pin
Burak Tunçbilek20-Jan-17 4:16
Burak Tunçbilek20-Jan-17 4:16 
PraiseGood job praveenji Pin
VinayR@J1-Jun-16 4:05
professionalVinayR@J1-Jun-16 4:05 
GeneralMy vote of 5 Pin
Member 1006714421-May-13 0:49
Member 1006714421-May-13 0:49 
GeneralMy vote of 5 Pin
mranarchy26-Mar-13 23:28
mranarchy26-Mar-13 23:28 
GeneralMy vote of 5 Pin
Vedangi6-Mar-13 5:44
Vedangi6-Mar-13 5:44 
GeneralGood one Pin
siva9x28-Aug-12 3:34
siva9x28-Aug-12 3:34 
GeneralMy vote of 3 Pin
Anirudha_Gohokar5-Jun-12 23:46
Anirudha_Gohokar5-Jun-12 23:46 
SuggestionTower of Hanoi source code Pin
JohnDetroit3-Jun-12 23:59
JohnDetroit3-Jun-12 23:59 
GeneralThank you! Pin
Sana Vijay23-Apr-12 20:39
Sana Vijay23-Apr-12 20:39 
GeneralC# Pin
pengdan28-Dec-11 16:35
pengdan28-Dec-11 16:35 
GeneralMy vote of 5 Pin
ashwin_nair20114-Nov-11 2:25
ashwin_nair20114-Nov-11 2:25 
Questionhow to connect winform and wpf in c# Pin
shamilmca12-Feb-11 23:14
shamilmca12-Feb-11 23:14 
AnswerRe: how to connect winform and wpf in c# Pin
Ravi Bhavnani8-Apr-11 9:03
professionalRavi Bhavnani8-Apr-11 9:03 
GeneralMy vote of 5 Pin
_dado_30-Jan-11 21:30
_dado_30-Jan-11 21:30 
GeneralMy vote of 5 Pin
grizzlyb4-Jan-11 22:03
grizzlyb4-Jan-11 22:03 
GeneralAnimation [modified] Pin
adil_iise1-Jan-11 3:20
adil_iise1-Jan-11 3:20 
GeneralThanx Pin
SiteBuilder22-Dec-10 2:36
professionalSiteBuilder22-Dec-10 2:36 
GeneralWPF (Windows Presentation Foundation) – Introduction and Sample Code in C# .NET Pin
amitrajahuja25-Oct-10 5:43
amitrajahuja25-Oct-10 5:43 
GeneralMy vote of 5 Pin
Sandun Rajapakshe12-Jun-10 8:12
Sandun Rajapakshe12-Jun-10 8:12 
GeneralIsItemHost property Pin
Gopi Madala10-May-10 11:07
Gopi Madala10-May-10 11:07 
Hi Praveen,

I have to change IsItemHost property of grid to false to make wheelanimation work.
Can you explain me why?(in your source code its true!)
GeneralSlightly deeper and more general Pin
mike.james25-Jul-09 3:01
mike.james25-Jul-09 3:01 
GeneralSome issues with the tutorial Pin
GHP91708-May-09 3:45
GHP91708-May-09 3:45 
GeneralBeginner's WPF Animation Tutorial Pin
zaurs4-Mar-09 11:10
zaurs4-Mar-09 11:10 
GeneralRe: Beginner's WPF Animation Tutorial Pin
Praveen Nair (NinethSense)4-Mar-09 19:15
Praveen Nair (NinethSense)4-Mar-09 19:15 
GeneralLittle explanation appreciated Pin
debashish 197930-Dec-08 9:15
debashish 197930-Dec-08 9:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.