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.

<window x:Class="WpfApplication1.Animating_Line_in_WPF" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Animating_Line_in_WPF" Height="600" Width="800" Loaded="Window_Loaded"> <canvas> <line Name="Ln" X1="10" Y1="100" X2="300" Y2="100" StrokeThickness="5" Stroke="Red" Canvas.Left="135" Canvas.Top="8" /> </Canvas> </Window>

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.


private void Window_Loaded(object sender, RoutedEventArgs e) { // Demonstrates the From and To properties used together. // Animates the lines canvas.top property from 50 to 300 over 10 seconds. DoubleAnimation myDoubleAnimation = new DoubleAnimation(); myDoubleAnimation.From = 50; myDoubleAnimation.To = 300; myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(10)); myDoubleAnimation.AutoReverse = true; myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever; Storyboard.SetTargetName(myDoubleAnimation, "Ln"); Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Canvas.TopProperty)); Storyboard myStoryboard = new Storyboard(); myStoryboard.Children.Add(myDoubleAnimation); myStoryboard.Begin(Ln); }

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.