courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

school.tutorials

Fluid UI Series

This series of tutorials introduces the concept of Fluid UI and its many forms available to you.

More tutorials...

Layout States of the ListBoxItem

Layout States of the ListBoxItem

One of the base concepts of Fluid UI is smoothly moving items on and off the screen, and one of the most common controls that adds and removes items is the ListBox. In Silverlight 4, a special VisualStateGroup called LayoutStates has been added specifically for this purpose.

Download and open the LayoutStates start project to get started.

Examine the Start Project

A fair amount has been included with this starter project so the focus can remain on the LayoutStates.

  • A Sample Data source had been created where the Items have a string and image property
  • A ListBox has been added and bound to the SampleData
  • A custom ItemPanelTemplate has been created using a WrapPanel
  • A custom ItemTemplate has been created to display the properties of the Items
  • Add and Remove buttons have been created with event handlers that add and remove randomly generated items

If you run the project, you will notice that once items are added or removed they instantly appear or disappear.

Bring In the ListBoxItem

Now let’s use the new states to animate the items on and off the screen.

  1. Right-click the ListBox and select the Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy… option.
  2. On the Create Style Resource dialog, hit OK.
  3. In the States panel, change the Default transition from zero seconds to half a second (0.5 s).
  4. Select the BeforeLoaded state.
  5. Select the base Grid of the template.
  6. Change the Opacity to 0.
  7. Change the Projection Y Angle to -90.

As the names imply, the BeforeLoaded state occurs right before the ListBoxItem is added to the ListBox and the AfterLoaded state happens after the ListBoxItem is added. This makes for a good pair of states to animate between for transitions while maintaining a clean base state.

Send the ListBoxItem Away

For the BeforeUnloaded state, we will create a custom transition.

  1. Select the BeforeUnloaded state.
  2. Click the Add Transition button (Add Transition button) and select the “* -> BeforeUnloaded” option.
  3. Click the FX button on the new transition and select the Pixelate option.
  4. Select the base Grid of the template.
  5. Set the Opacity to 0.
  6. Run the project and watch the items fade and flip into view when added and then watch as they pixelate away when removed.