Click here to Skip to main content
12,405,895 members (66,338 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked

Animation Storyboard using XAML and C#

, 8 Aug 2014 CPOL
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 Wink | ;)  

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 Smile | :)


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
I study Software Engineering , 23 years old , I'm motivated with all Technologies of Microsoft.
Since I have been in the Community of Microsoft as Microsoft Student Partners, I developped many apps on the platform Windows and Phone. Now , it's time to share what I learn here and I'am ready to help Everyone.
You can contact me at any time (
Group type: Organisation

9 members

You may also be interested in...

Comments and Discussions

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