Friday, March 19, 2010

Silverlight 4 PathListBox for Motion Path Animation

by andy@andybeaulieu.com via Andy's Blog on 3/19/2010 2:03:00 AM

The PathListBox control is a cool new addition to the Blend 4 SDK, and allows the elements inside a ListBox to lay out along any Path control shape. You’ll need to install the Blend 4 SDK to get access to the PathListBox control, but note that this is available outside of Expression Blend 4 (you don’t need to purchase or install Blend 4).

One of the neat bonus features of the PathListBox is that you can animate the Path that it is bound to, and the items will follow the animation! This gives Silverlight functionality similar to the AnimationUsingPath class that WPF has had since .NET 3.0, and provides basic Motion Path Animation.

Let’s see how we can use PathListBox for some interesting effects.

[VIEW DEMO]  *Requires Silverlight 4*

[DOWNLOAD DEMO]

-          Open Blend 4 and expand the Asset Library. To quickly find the PathListBox control, type PathListBox into the search box.

-          Draw a PathListBox control onto the artboard, and give it a name of “pathListBox1”

-          In order for the PathListBox to determine the shape that its Items should follow, you’ll need to draw out a Path control. Select the Pen tool and draw out a shape.

-          We only want to use the Path for its shape information, so let’s hide its visual representation. Set the Fill and Stroke to “No Brush” (you can quickly do this by select “Reset” from the Advanced Property Options – that little square to the right of the brush selection).

-          Now, select the PathListBox control, and in the Properties Panel, go to the Items Layout category and click the Artboard Element Picker. Then select the Path that you created in the previous step by clicking on it in the Artboard.

-          Select the main UserControl in the Objects and Timeline Panel.

-          Go to the Events Panel in the Properties Panel and double-click the Loaded event.

-          Add a little bit of code inside the Loaded event, which fills the PathListBox with an array of characters (note that we can data bind a character array to the Items Source of a control):
private void UserControl_Loaded(object sender,
System.Windows.RoutedEventArgs e)
{
        // TODO: Add event handler implementation here.
    string data = @"This is the theme to Gary's Show, the theme to Gary's show.
                                Gary called me up and asked me if I'd write his theme song.";
    pathListBox1.ItemsSource = data.ToCharArray();
   
}

-          Run the project by hitting F5. The characters follow the Path. Weird effect, eh?

-          Let’s try animating these chars. Add a new Storyboard named sbAnimateChars.

-          Select the Storyboard (by clicking its name just above the Objects and Timeline Panel), and set its RepeatBehavior to “Forever”

-          Fast-forward the timeline for the storyboard a second or so.

-          From the toolbox, grab the Direct Selection tool and drag around the points within your Path element (Blend records changes in Path points within a Storyboard for you).

-          Add another line of code into the MainPage_Loaded event handler, to start the Storyboard up:

sbAnimateChars.Begin();

-          Run the project. You’ll see the characters animated on the Path.