Adding animation when items are added to the Silverlight Listbox


An enhancement has been made that allows you to add animation when items are added ,or removed from, the list box.  Silverlight 4 adds a new StateGroup to the ListBoxItem class:

ListBoxItemAttributes

fluidUIDemo

A Simple Demo

The user types into the text box, clicks the add button and the text “floats” up into the list.

So Where Is the Magic??

To take advantage of the new FluidUI all you need to do is to set the behavior you want on any or all of the three new Visual States in the LayoutStates group of the ListBoxItem class.

The easiest way to do this is to open the project in Blend and right click on the ListBox. Choose Edit Additional Templates –> Edit Generated Item Container –> Edit a Copy

Name the new template and then click on the ListItem and open the CreateStyleStates tab. For this simple demo, only modified the Loaded state.

To do so, click on the Loaded state and then expand the timeline. You’ll set new values for the entire Grid (which has 4 sub-elements).

select 0 seconds, and set the opacity to 0 and the  y coordinate of a translate-transform to 200.   Click save keyframe values, and then select 1 second and set the opacity to 1 and the y coordinate to 0. Save the new template…

Via Silverlight 4 Fluid UI – Jesse Liberty – Silverlight Geek

Advertisements

One thought on “Adding animation when items are added to the Silverlight Listbox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s