Starting down the Path
The PathListBox control is similar to the ListBox control in the way that both controls
support the display of one or more items added either at design-time or dynamically
while the application is running. Where the ListBox is confined to traditional box
based layout, the PathListBox arranges items based on defined paths named appropriately
A LayoutPath can be defined by drawing a Path with the Pen Tool (P), adding a Rectangle,
Ellipse or Line from the Tools panel or by using one of the new Shapes in the Assets
panel. Other controls like a Button, CheckBox, and Slider work as LayoutPaths, as
well. In the case of not using a Shape or a Path, the bounding box of the control
will be used to define the path.
- Create a new "Silverlight Application + Website" project in Blend and name it "PLBIntro"
to get started.
- From the Tools panel, select the Ellipse tool and draw a circle that fills up most
of the available space (hold down Shift, while drawing to keep the width and height
- Change the Fill to “No brush” and set the Stroke to a green color.
- Increase the StrokeThickness to 7.
- Now for the magic part, right-click the Ellipse and select Path -> Make Layout Path
After selecting the "Make Layout Path" option, Blend runs through a few
tasks. A PathListBox control has been created (you can find it in the Objects panel).
The Ellipse has been given a name ellipse and set as a LayoutPath for the
By default the PathListBox control is selected and if you reposition the control
by dragging it away from the Ellipse you will notice it has no visual component.
The Ellipse has not been added as an item of the PathListBox, it’s simply linked
as a path to use for layout. At this point you can resize the PathListBox and move
it off main drawing surface, so it won’t catch any unintended clicks later.
Add a few items
With the path defined for layout, now is the time to see it in action. We’ll add
a few arrows to the PathListBox and end up with an object that looks like a compass.
- In the Assets panel, select the Block Arrow Up option under the Shapes category.
- Double-click within the empty PathListBox bounding box to add an arrow as a child
item of the PathListBox.
The arrow has appeared not within the bounding box of the PathListBox, it’s shown
on top of the Ellipse since the Ellipse been defined as the LayoutPath for the PathListBox.
At this point feel free to make the arrow larger and set the colors to show more
contrast between the arrow and the ellipse. After changing the colors you may notice
that the Ellipse is on top of the arrow. Since the arrow is a child of the PathListBox
it’s rendered at the same z-index as its container.
- In the Objects panel, drag the PathListBox below the Ellipse to change the z-order
- In the Objects panel, select the [BlockArrow] node (you may have to expand
the PathListBox node to find it)
- Hit Ctrl+C to Copy the arrow and then hit Ctrl+V seven times to Paste in seven more
- Select the PathListBox and in the Properties panel find the Orientation property
and change the value from “None” to “OrientToPath”.
This is a great feature that rotates the PathListBoxItem (the hidden container control
for each arrow) based on its position on the path. Our next step is to spread the
arrows out evenly to create a compass style look. There are two ways we can do this:
- With the PathListBox selected, set Distribution to “Even”. That’s a static way to
- We’re going to animate the distribution, though, so reset Distribution to “Padded”
and decrease the Padding value to layer the arrows on top of each other.
- Increase and decrease the value of the Start property to see its effect on where
item layout begins on the path. When finished reset the Start value to 0%.
- Increase and decrease the value of Span to see its effect on how much of the LayoutPath
is used for item layout. When finished reset the Span value to 100%.
Slide the items along the Path
The properties explored in the last section are all types of Dependency Properties
which means they can be used with databinding and animation.
Let’s create an animation to slide the arrows along the circle.
- Add a new Storyboard in the Objects and Timeline panel.
- Hit OK on the Create Storyboard Resource dialog.
- Position the playhead at the one second mark.
- Change the Padding value to spread the arrows evenly along the circle.
- Hit play in the Objects panel and watch the arrows slide into place.