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.
- Select the Pen Tool (P) from the Tools panel.
- Draw and Arc in the upper left, across the middle and in the lower right of the
- Select the PathListBox and in the Properties panel in the Layout Paths pane click
the target icon ()
- 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.
- 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.
- 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.
- In the Layout Paths pane, change the StartItemIndex to 9.
- 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.
- Select the first LayoutPath and set the Capacity property to 1.
- Select the second LayoutPath and set the Orientation property to OrientToPath.
- 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.
- Reset the StartItemIndex property of the PathListBox to 0.
- Create a new Storyboard.
- Position the playhead at the one second mark.
- Set the StartItemIndex property to 9 (which results in a keyframe being created).
- Select the second LayoutPath and increase the Padding property until the stars are
spread evenly across the path.
- Select the Storyboard in the Objects panel and in the Properties panel check the
- Hit play in the Objects panel and you’ll see the numbers stars shift across all