Animating ListBox items - the VisualStateManager

In the first article I showed you how to animate ListBox items in Silverlight 2 Beta 1. Then, to make all the animation the way I wanted, I used some code and hardcoded names of the Storyboards for each state. Now with Silverlight 2 Beta 2 and the cool new VisualStateManager the task for adding animation and other effects for each state becomes easier. Other than that  – now we can add animations even for the transitions from one state to another.

In this article I’ll make the same animations like in the previous one but this time using VisualStateManager and styles. I will also show you the problems and limitations I faced during the implementation.

Download source code

Overview

In the new Silverlight 2 Beta 2 the ListBox control is further improved and adding VisualStateManager in the whole picture makes states animation much easier - without any need of additional code.

I will create a new Silverlight project in VS2008 and I’ll copy the stuff that I need from the first part – the Clients class and the Images.

The second step is to add in the Page.xaml a ListBox which I want to animate. I will also add a TextBlock to show the name of the selected client – a simple feedback showing theselected item. I’ll put both the ListBox and theTextBlock in a StackPanel:

 The lbClients_SelectionChanged event handler set the text of the text block:

 Additionally I add a simple style for the ListBox in the application’s resources, so running the application will give you this:

Now, let’s start playing with the items. I will create new style in application resources and I’ll set it as ItemContainerStyle of the ListBox:

Running it now you will see the list of clients with some additional data:

To apply the animations I need ViewStateManager inside the style, so I’ll add a reference to the assembly in the style:

 I will add Storyboards for several states: Focused, Unfocused, Selected, Unselected and SelectedUnfocused:

 But why do these storyboards have duration of 0? The reason is the fact, that one action can fire more than one animation. For example, when the user selects an item, the Selected and Focused animation is applied, but when the mouse cursor steps out of the control the Unselected is applied. As a result the item is shown as unselected since it is the last animation that is applied. To avoid this, I will make the duration for all these animations to 0 and will add some transitions. Thus the transitions will deal with the animations providing the smooth transition between states. And here are the transition definitions: