Click here to Skip to main content
13,737,037 members
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 8 Aug 2014
Licenced CPOL

Animation Storyboard using XAML and C#

, 8 Aug 2014
Rate this:
Please Sign up or sign in to vote.
The easiest way to animate your object using Storyboard


Animations always attract users to use the App usually , it's very important to incude some animation on your App

I will show you how to do it with XAML then With C#. Let's Start!

You can download the Full Project here 

Using the code

At first we add the tag Storyboard in Page's Ressources. and you should give it  a name.

  <Storyboard x:Name="storyboard1">

After that we add DoubleAnimation in animation.

Thera are many types of animations. I will show you 3 types. TranslateX or Y , Rotation and Opacity.

Part1 : Using XAML

1-Translate X

Storyboard.TargetName="rec2" />

Each animation has these properties : 

AutoReverse : if we want to return back the animation.

RepeatBehavior : if want to keep the animation forever.

Duration : specify the duration of the animation

Storyboard.TargetProperty : specify the type of animation.

Storyboard.TargetName : specify the name of the object that we want to animate.

2-Translate Y

just change the Storyboard.TargetProperty


3-Translate X and Y at the same time

Just add 2 DoubleAnimation with the same Storyboard.TargetName. it means on the same object.

PS: You should add the tag CompositeTransform on your object : 


4- Rotation

Changing as usual the Storyboard.TargetProperty : 


Ps : you should add the tag RotateTransform on your object : 




Part2 : Using C#

Now we can do the same animation with a pure c#  to do it dynamically. so here is the following Code , now  you can understand it ;) 

Storyboard storyboard1 = new Storyboard();

 ((UIElement)rec1).RenderTransform = (Transform)new TranslateTransform();
 DoubleAnimation doubleAnimation1 = new DoubleAnimation();
 doubleAnimation1.Duration = new Duration(new TimeSpan(0, 0, 2));
 doubleAnimation1.To = 100;
 doubleAnimation1.AutoReverse = true;
 doubleAnimation1.RepeatBehavior = RepeatBehavior.Forever;

 Storyboard.SetTarget((Timeline)doubleAnimation1, (DependencyObject)rec1.RenderTransform);

Ps : if you are working on window phone change : 


With : 

Storyboard.SetTargetProperty((Timeline)doubleAnimation1, new PropertyPath("X"));


After we create our Storyboard , we need now to declenche it whenever we want : 


and Stopped as well : 



Sometimes we need to execute some codes just after the finish of the Animation se we declenche the Event Completed : 

 storyboard1.Completed += storyboard1_Completed;

void storyboard1_Completed(object sender, object e)
            //when story is finished do something...



Don't forget to download it from here , it's very important to add it in your Apps , Good luck :)


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


About the Author

Anis Derbel
Software Developer (Junior) Microsoft Student Partners
Tunisia Tunisia
This member doesn't quite have enough reputation to be able to display their biography and homepage.
Group type: Organisation

9 members

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180920.1 | Last Updated 8 Aug 2014
Article Copyright 2014 by Anis Derbel
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid