Using multiple paths with the PathListBox

Add a few LayoutPaths

The PathListBox has been moved off the main Grid and is patiently waiting for some paths to use for layout. Without one or more LayoutPaths defined you will notice each of the items are simply stacked within the bounds of the PathListBox. Let’s add a few paths and define them as LayoutPaths.

1. Select the Pen Tool (P) from the Tools panel.
2. Draw and Arc in the upper left, across the middle and in the lower right of the LayoutRoot Grid.
3. Select the PathListBox and in the Properties panel in the Layout Paths pane click the target icon ()
4. Move your cursor over one the new Paths and when you see the tool tip that reads “[Path] will be named ‘path’”, click the Path.
5. Repeat steps 3 and 4 for the other two Paths.

Following this procedure the Paths have now been defined as the LayoutPaths for the PathListBox and as a result the stars should line each of the arcs. The first item in the list (the star with the “1” in the center) is positioned at the starting Point of the first Path added as a LayoutPath. The following items are then arranged from start Point to end Point along the first Path until Capacity is reached. The next item is then added to the start Point of the next Path defined in the LayoutPath collection until all of the available space is used.

1. In the Objects panel, drag the PathListBox below the paths so that it is rendered after the paths resulting in a higher z-order. This will place the stars above the fill of the paths and into view.
2. In the Layout Paths pane, change the StartItemIndex to 9.
3. Check the WrapItems checkbox.

Modify path specific properties

In the Layout Paths pane, the first two properties above the LayoutPaths collection affect the layout of the items across all paths. The StartItemIndex property determines which item should be displayed at the starting point of the first Path. The WrapItems property sets whether the items in the beginning of the collection should be added once the final item has been added (in this case, should the “1” star be added after the “20” star).

The properties below the LayoutPaths collection are specific to the selected LayoutPath. When the PathListBox is selected the first LayoutPath is also selected, by default. To modify the properties for a different LayoutPath, select the LayoutPath by name in the LayoutPathCollection box.

1. Select the first LayoutPath and set the Capacity property to 1.
2. Select the second LayoutPath and set the Orientation property to OrientToPath.
3. Select the third LayoutPath and set the Capacity property to 12 and decrease the Padding property until all 20 stars are shown.

Support for multiple LayoutPaths and path-level customizations offer a lot of flexibility when using the PathListBox. In the next tutorial, we’ll explore how the availability of both “global” (all paths) and “local” (path specific) coordinates and properties can be leveraged by the PathListBoxItem.

Animate items across the LayoutPaths

Before we move on, though, let’s take a quick look at animating these properties.

1. Reset the StartItemIndex property of the PathListBox to 0.
2. Create a new Storyboard.
3. Position the playhead at the one second mark.
4. Set the StartItemIndex property to 9 (which results in a keyframe being created).
5. Select the second LayoutPath and increase the Padding property until the stars are spread evenly across the path.
6. Select the Storyboard in the Objects panel and in the Properties panel check the AutoReverse property.
7. Hit play in the Objects panel and you’ll see the numbers stars shift across all three LayoutPaths.