Click here to Skip to main content
11,567,922 members (43,901 online)
Click here to Skip to main content

Beginner's WPF Animation Tutorial

, 27 Jan 2008 CPOL 331K 21.6K 131
Rate this:
Please Sign up or sign in to vote.
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.

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.

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

    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.

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:

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':

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)

Share

About the Author

Praveen Nair (NinethSense)
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/.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 1006714421-May-13 0:49
memberMember 1006714421-May-13 0:49 
GeneralMy vote of 5 Pin
mranarchy26-Mar-13 23:28
membermranarchy26-Mar-13 23:28 
GeneralMy vote of 5 Pin
Vedangi6-Mar-13 5:44
memberVedangi6-Mar-13 5:44 
GeneralGood one Pin
Siva9x28-Aug-12 3:34
memberSiva9x28-Aug-12 3:34 
Simple and clear. Thumbs Up | :thumbsup:
Siva

GeneralMy vote of 3 Pin
Anirudha_baba5-Jun-12 23:46
memberAnirudha_baba5-Jun-12 23:46 
SuggestionTower of Hanoi source code Pin
JohnDetroit3-Jun-12 23:59
memberJohnDetroit3-Jun-12 23:59 
GeneralThank you! Pin
Sana Vijay23-Apr-12 20:39
memberSana Vijay23-Apr-12 20:39 
QuestionNice barcode tutorial Pin
steve7g15-Feb-12 22:27
membersteve7g15-Feb-12 22:27 
GeneralC# Pin
pengdan28-Dec-11 16:35
memberpengdan28-Dec-11 16:35 
GeneralMy vote of 5 Pin
ashwin_nair20114-Nov-11 2:25
memberashwin_nair20114-Nov-11 2:25 
Questionhow to connect winform and wpf in c# Pin
shamilmca12-Feb-11 23:14
membershamilmca12-Feb-11 23:14 
AnswerRe: how to connect winform and wpf in c# Pin
Ravi Bhavnani8-Apr-11 9:03
memberRavi Bhavnani8-Apr-11 9:03 
GeneralMy vote of 5 Pin
_dado_30-Jan-11 21:30
member_dado_30-Jan-11 21:30 
GeneralMy vote of 5 Pin
catfish1014-Jan-11 22:03
membercatfish1014-Jan-11 22:03 
GeneralAnimation [modified] Pin
adil_iise1-Jan-11 3:20
memberadil_iise1-Jan-11 3:20 
GeneralThanx Pin
Andre K22-Dec-10 2:36
memberAndre K22-Dec-10 2:36 
GeneralWPF (Windows Presentation Foundation) – Introduction and Sample Code in C# .NET Pin
dummyahuja25-Oct-10 5:43
memberdummyahuja25-Oct-10 5:43 
GeneralMy vote of 5 Pin
Sandun Rajapakshe12-Jun-10 8:12
memberSandun Rajapakshe12-Jun-10 8:12 
GeneralIsItemHost property Pin
madala1610-May-10 11:07
membermadala1610-May-10 11:07 
GeneralSlightly deeper and more general Pin
mike.james25-Jul-09 3:01
membermike.james25-Jul-09 3:01 
GeneralSome issues with the tutorial Pin
GHP91708-May-09 3:45
memberGHP91708-May-09 3:45 
GeneralBeginner's WPF Animation Tutorial Pin
zaurs4-Mar-09 11:10
memberzaurs4-Mar-09 11:10 
GeneralRe: Beginner's WPF Animation Tutorial Pin
NinethSense4-Mar-09 19:15
memberNinethSense4-Mar-09 19:15 
GeneralLittle explanation appreciated Pin
debashish 197930-Dec-08 9:15
memberdebashish 197930-Dec-08 9:15 
GeneralRe: Little explanation appreciated Pin
NinethSense30-Dec-08 18:34
memberNinethSense30-Dec-08 18:34 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 28 Jan 2008
Article Copyright 2008 by Praveen Nair (NinethSense)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid