Silverlight Animation - Microsoft Silverlight

What is Silverlight Animation?

Animation permits you to create really dynamic user interfaces. It is frequently used to apply effects, for instance, icons that grow when you move over them, logos that spin, text that scrolls into view, and so on.

Occasionally, these effects seem like extreme glitz. If used correctly, animations can improve an application in a number of ways. They can make an application seem more reactive, natural, and intuitive.

For instance, a button that slides in when you click it feels like a real, physical button, not just another gray rectangle. Animations can also attract attention to important elements and guide the user through transitions to new content.

Silverlight’s method to animation is declarative rather than focusing on sequences of frames animations.

Defining Animations

Animations are classically defined in resource sections. In fact, they are usually enfolded in a story board element, which we will see in detail shortly.

  • It provides a Begin() method, so the animation can be invoked from code.
  • Animations can also be put inside of the visual state elements in a control template.

Declarative Animation

Animations in Silverlight are declarative. They define what would like to have happen. Leave it up to Silverlight to work out how to make that happen. So animations typically follow the pattern we tell Silverlight what we would like to change.

This is always some property on some named elements i.e. TargetName and TargetProperty.

  • We say how we would like that property to modify in this case we are changing the opacity from a value of zero to a value of one. In other words, we like the target elements to fade from opaque to transparent.
  • Lastly, we say how long we would like this to take; in this case it will take five seconds.
  • The meaning of the double in this double animation is that it targets a property which has type double, so a floating point value.
  • If you want to animate a property representing a color, you use a color animation instead.

Let us have a look at a simple instance of double animation. Given below is the XAML code in which two buttons, one rectangle and two story boards are added.

Here is the implementation for different events in C#.

When the above code is compiled and executed, you will see the following output.

Repeating and Reversing

Animations deal some properties to automatically repeat and all reverse animations.

  • If you set the recurrence activities property to a time spam the animation will loop around repeating until the stated amount of time has elapsed or you can just tell it how many times you would like it to repeat.
  • This ropes decimal points so you can repeat four and a half times.
  • You can repeat forever and you can also tell the animation that once it reaches the end, it should run in reverse back to the start.

Key Frame Animation

Often a humble animation from A to B is a little too simple. For instance, you want to animate a ball bouncing off the ground. This is not a modest point to point movement. The ball drops, speeding up gradually and then reverses its direction as it hits the bottom. Slowing up again as it comes back to the top of its travel.

Let us have a look at a simple example of Key Frame animation.

Given below is the XAML code, which contains an ellipse and double animation with key frames.

Here is the implementation for mouse left button down event, which will begin animation when user press mouse left button down on the web page.

When the above code is compiled and executed, you will see the following output.


When you click the web page, you will see that the ball starts moving.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Microsoft Silverlight Topics