You can download the example files to this article here.

The below example shows three balls animating along the same distance over the same time.

Ball 1 is the most basic of animations going back and forth from A to B at a constant speed. Although this is a required function it often leaves animations a little lifeless and robotic.

The ‘easing’ feature in Blend allows us to add acceleration or inertia to an animation. In other words, instead of a constant speed we can make an object speed up and slow down during its path while still taking the same time to reach its destination. This effect can really bring animations to life, mimicking how objects work in real life.

Ball 2 uses the ‘easing’ feature to speed up the animation at the begining and slow down at the end each time the ball is moved. Notice how ball 1 still reaches its destination at the same time as ball 2 every time.

There are 2 ways of applying ‘easing’ to your animation inside the Blend interface:

Selecting a percentage for ‘easing in’ and ‘easing out’

Right click on a key frame and select either easing in or easing out. Choose a percentage from the list. In this method the Easing in relates to the journey to the keyframe where as easing out relates to the journey happening after the keyframe.

Using the Easing graph

Highlight a key frame (not at zero seconds) and go to the properties tab, the easing graph should now be displayed as below.

Pull the yellow pin on the left bottom to adjust easing in and pull the yellow pin on the top right to adjust easing out. The easing graph allows you to fine tune your animation in more detail. The easing graph effects the keyframe slightly differently to the first method, the easing in and easing out changed on the graph are related to the animation space between the current selected key frame and the key frame before it.

Ball 3 only applies the ‘easing’ feature at one of the 2 destinations mimicking a bouncing ball in real life. For the purpose of this example the ball never looses its energy through gravity so it will bounce for ever.

An additional scale animation has been placed at the moment ball 3 hits the pretend ground to mimick the ball being impacted and rebounding. This animation has been place on the grid containing the ball so that it can be easily run independantly to the bounce movement.

And finally..

This example loops forever because of a variable we can set in the XAML. Unfortunately the current version of Blend does not offer this function in the interface so you will have to switch to the XAML or Split view and find the Storyboard you want to loop. After the Storyboards x:Name place the following XAML.


See a screen shot here:

This post uses the ‘Resizeable Silverlight shadow effects’┬átutorial that can be found in this previous post.

You can download the example files here.

The below example shows two different effects of using the Opacity feature in Silverlight:

If you select the first radio button then you can see how placing an Opacity effect on multiple items can get some interesting effects coming through when objects overlap.

If you click the second radio option then you can see how we can omit these effects by placing the opacity effect at a higher level, in this case on the grid the items sit in. The above example shows how using a shadow on a popup that has a slight translucency can be treated to omit the shadow effect coming through.

The below example shows another example how shapes react between the two applied methods:

If you want to use the controls talked about in this article you will need to get the free Custom Control Toolkit from Codeplex. You can read how to do this and install them in my post here.

You can download the example files for this article here.

This week I want to show the benefits of using the Wrap Panel. The Wrap Panel is an extension of the Stack Panel, with the additional feature of wrapping content either vertically or horizontally. Just like the Stack Panel the content can be switched on and off while the control updates the positioning visually.

The command for changing the orientation is exactly the same as the Stack Panel when looking at the XAML.


However, when using the Expression Blend interface the option to switch between the two has been moved into the Common Properties area.

The only additional control that differs from the Stack Panel is also located within the Common Properties area. ‘ItemWidth‘ and ‘ItemHeight‘ are set by default to ‘Auto‘ but can be changed to set a maximum area for the items inside the Wrap Panel to adhere to.