Social Icons

Friday, 26 July 2013

WPF Animation: Moving a line from top to bottom using wpf doubleanimation

Moving a line using WPF DoubleAnimation:

Introduction:

In my previous articles i had explained various articles on WPF , Asp.Net and Oops Concepts. Now we will see a simple example on how to move a line from top to bottom using WPF DoubleAnimation.

         If you are new to WPF animation, If you want to move an element in wpf applications then this example will help you.


Description:

In WPF Three types of Animations are available.
  • From/To/By Animations
  • Key Frame Animations.
  • Path Animations.
In From/To/By Animations we will specify the from, To or By values , Based on these values animation occurs. We use From/To/By Animation to move a line from top to bottom.

First take a window in wpf project and then draw a horizontal line using following syntax.  You can find more details on how to draw basic shapes and drawings in wpf.



In the above code we used line element to draw a line by specifying starting point(X1,Y1) and Ending Point(X2,Y2) and it is stroked with red color with thickness 5. It is placed as a child in a Canvas.

Now our task is to move this line element from top to bottom. Now in the Window Load event write below code.




In the Above code first we created a DoubleAnimation and assigned values for From ,To,Duration,AutoReverse and RepeatBehaviour.

Next to Apply this double animation to an element we have to use storyboard and set Target Name and Target Property and doubleanimation as child for storyboard.

StoryBoard has three events such Begin(), Pause(), and Stop() to control Animation.

See How it works
Moving Line from top to bottom using DoubleAnimation

Conclusion:

I hope this will help to you to move an element in wpf. Later i will explain more animation examples.

  Don't forget to Comment and Share for our friends if you like this post. Thank You.


1 comment:

  1. Thank you very much!
    You are the only person who has me to help to find a way in WPF to move an image!!!

    But for me, this is not fonctional:




    I remplace with this:


    ReplyDelete

Please Give your Valuable Suggestions,Questions and Comments to improve my blog.