SilverLight Animations
  • Share this blog:

An animation is an illusion that is created by quickly cycling through a series of images, where each image is slightly different from the last.

An animation updates the value of a property over a period of time.

When we are cycling group of image the brain will  perceive group of images as a single changing scene

In any file this illusion is created by using cameras that record many photographs or frames each second.

When the frames are played back by  a projector the audience see a moving picture

In silver light animations can enhance your graphical creations by adding movement and interactivity

In silver light we animate objects but apply  by applying animations to their individual properties

SilverLight Storyboard

Story board controls animations with timer line and provides object and property targeting information for it child animations.

In silver light to create storyboards we use story board class.

Story board is physically does not exits, rather it is a logical implementation used to apply the animations we use the following syntax to create story board in xaml.

<Story Board___>         properties

One (or) more child formations>

</story board>

 Methods with story board class

  • Begin()
  • Pause()
  • Resume()
  • Stop()

Begin():-  This method initiates or sorts the set of animations  associated with the story board

Pause():- This method is used to pause the animation clock associated with the story board.

Resume():-  used to resume the animation clock that is in pause state or runtime state associated with the story board

Stop():- Used to stop the story Board. That is all animations associated with story board will be stopped

Properties With Story Board Class


  1. Auto Reverse
    • True
    • False (default) Duration Replace Behavior
  2. Begin time

Auto Reverse :-  When set to  true the animation will take back to original state after completing forward animation. That is during the timeline first forward animation will be executed. After completion of forward animation, backward animation will be implemented or applied

False:- No back word animation will be implemented

Begin time:-  Used to set or get the time value at which the animation or timeline should begin. In general the begin time format will be [days] house: Minutes: seconds [.fract: onalseconds]

If we did not give any value animation will begin at time of execution of being method()

Duration:-  used to set or get a value which indicates length of the time for animation.

We use the following format for the duration

[days.] -- 0to 23  hours: Minutes  --0 to 59: seconds – 0 to 9  [functional seconds]         optional

Repeat Behavior:-  Used to set or get a value that indicates how many times animation should be repeated

If we give set Repeat behavior as 2x animation will be repeated If we give set Repeat Behavior as 2X animation will be repeated 2 times, 3X animation will be repeated for 3 times and 4x – 4 times etc

If we set repeat behavior is Forever animation will be repeated continuously through the execution time of the application. We can integrate this repeat behavior with duration. Like

Duration = “0:0:2” Repeat behaviors = “0:0:4”    à animation will be repeated for 2 times.

Duration = “0:0:2” repeat behavior=”0:0:6” à repeated  for 3 times.

Attached properties with storyboard class:-

Target name

Target property

These properties will be attached to animation classes when we create any animation class within the story board.

Target name:- This property is used to set the required silver light control id to which we want to apply the animations. Target property:- used to set or get the property name of the silver light control set in target name property with which we want to apply animation.

To use these properties we use the following syntax. Within the storyboard container tag

<animation alls story board. Target name = “control ID”

Story board. Target property = “property name

Duration =”value” Begin Time=”value” Auto reverse = “ value”

Repeat Behavior = “Value”/>

Types of Animation:-

These are 3 types of animations in silver light

Double animation

Color animation

Point animation

All there classes are present in system. Windows. Media. Animation]

Double Animation in SilverLight

Double animation is used to animate the value of a double property between two target values using linear Interpolation over a specified duration The class is used to implement this animation is double animation present in system. Windows. Media. Animation A double animation in which creates a transition  b/w two values




Begin Time


  1. Auto reverse

    • True
    • false (default)
  2. Repeat Behaviors

From:-  used to set a value from which animation clock begin

To :- used to set a value up to where animation should continue

Color Animations in SilverLight

The color animation is used to animated the value of a color property b/w values using linear interpolation  over a specified duration

The color animation class creates a transition between two target values

Color animation class is present in system. Windows. Media. Animation



The properties are same as double animation



Begin Time


  1. Auto Reverser
    • True
    • False
  2. Repeat Behavior

Point animation:-

This animation is used to animate the value or point property between target values using lines interpolation over a specified duration the point animation class is used to create a transition between two  target values




Begin Time

  1. Auto Reverse
    • True
    • False (default)


Repeat behavior

Steps to work with animation

Create an object to which animation is to be applied

Add on event Trigger to the object

Create the story board

Apply the required animation using the respective animation class

Set the attached properties of animation class i.e target name and target property

Set the properties and their values of animation class.


1) <Rectangle name= “R” Fill = “Red” width = “100” Height = “50”> 2) <rectangle .trigger> <Event Trigger

<Begin Story Board> <Story Board xi name=”SBI>

4) <Double animation story board. Target name = “R”

5) Storyboard. Target property = “width” From = “100”

6) To =”200” Duration = “0:0:5”/>

</Story board>

</Begin story board>

</event trigger>

</rectangle. Trigger>


Example with double animation class:-

Crate a new silver light application go to XAML source and write the following are eg to apply the animation to the height of a  rectangle

<Rectangle name = “R1”

Height = “50” width = “100”

<Rectangle.Trigger>Fill = “red”>


<Event Trigger>

<Begin story Board

<story Board x: Name = “SBI”>

<Double Animation story board. Target name = “R1”

Story board. Target property = “Height” from =”50” To = “150”

Duration = “0:0:5”/>

</story Board>

</Begin Story Board>

</Event Trigger>

<Rectangle. Trigger>


EG : with double animation using opacity property

<Rectangle name = “R1” height = “150” width = “100” fill = “orange”>


<Event Trigger>

<Begin story Board>

<story board x: name = “SBI”>

<double animation story board. Target name = “x1”

Story board. Target property = “opacity” from = “1.0”           to “0.0”

Highest       lowest

Thickness  thickness

</story board>

</begin story board>

</event Trigger>



Example with color animation

EG:- To change color from red to green

<Rectangle name = “R1” height “150” width = “100”

Fill = “red”>

<Rectangle. Trigger>

<event Trigger>

<Begin story board>

<story board  x:Name = “SBI”>

Example with _ Point animation:-

Create a new silver Light application


Go To source


Write the following code.


<path fill = “Blue”>


<Ellipse geometry  x:name=”E1” center = “30, 60” radius x = “40” radius y = “20”/>

<path. Data>



<canvas. Resources>

<story board        S:Name= “SBI”>

<point Animation story board. Target name=”E1” story board .Target property = “center” From=”80, 60” to = “200, 200”

Duration = “0:0:5”/>

</Story board>



Create a button control, write the following code in button click event

Protected button click (objectr sender, routed event args





Eg to control the animation programmatically the code is some as above for source and write it in new silver light application

<Grid          X:=

<path fill = Blue>


<Ellipse geometry            X:name= “E1”   enter = “80,60”

Radius x= “40”    Radius y = “20”/>




<convas. Resources>

<Story board  x: Name = “SBI”>

<point animation story board. Target name = “E1”

Story board. Target property = “center” from = “80, 60” to

“200,200” duration = “0:0:5”/>

</Story board>

</canvas resources>


Create the buttons and write the following code protected void btn start – click – Route d event args e

{ SBI.Begin(); }

Protected void to be pause – click(..)


Protected void to be resume – click (--

{ SBI. Resume();

} protected void to be stop – click (--)


SBI. Stop ();


Protected void to be resume – click (--

{ SBI. Resume(); } protected void to be stop – click (--)

{ SBI. Stop (); }




Data Binding in Silver light:-

Data binding in silver light represents attaching the data from source to target. Whenever we bind the data in silver light the data source need not be database. It might be a silver light object or XML source or database.


You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses


About Author
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.

Stay Updated

Get stories of change makers and innovators from the startup ecosystem in your inbox