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

PathListBox Series

This series of tutorials introduces the PathListBox control and explores different techniques using path layout.

More tutorials...

An introduction to the PathListBox

A simple PathListBox

The PathListBox is a new control included in the Expression Blend 4 SDK that builds on the original functionality of the ListBox, displaying multiple items and item selection, and new functionality enabling path-based layout. The PathListBox provides many areas of customization through properties and a custom child container control, the PathListBoxItem.

In this tutorial, we’ll create a simple PathListBox, explore a few of properties available and learn how Blend makes working with PathListBox easy.

The following tutorials in this series will explore different techniques using the PathListBox and all of its included components.

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 LayoutPaths.

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.

  1. Create a new "Silverlight Application + Website" project in Blend and name it "PLBIntro" to get started.
  2. 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 the same).
  3. Change the Fill to “No brush” and set the Stroke to a green color.
  4. Increase the StrokeThickness to 7.
  5. 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 PathListBox.

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.

  1. In the Assets panel, select the Block Arrow Up option under the Shapes category.
  2. 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.

  1. In the Objects panel, drag the PathListBox below the Ellipse to change the z-order
  2. In the Objects panel, select the [BlockArrow] node (you may have to expand the PathListBox node to find it)
  3. Hit Ctrl+C to Copy the arrow and then hit Ctrl+V seven times to Paste in seven more arrows.
  4. 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:

  1. With the PathListBox selected, set Distribution to “Even”. That’s a static way to do it.
  2. 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.
  3. 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%.
  4. 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.

  1. Add a new Storyboard in the Objects and Timeline panel.
  2. Hit OK on the Create Storyboard Resource dialog.
  3. Position the playhead at the one second mark.
  4. Change the Padding value to spread the arrows evenly along the circle.
  5. Hit play in the Objects panel and watch the arrows slide into place.
That was a simple introduction to the PathListBox, let’s take a look at using multiple paths.