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.

PathListBox Series

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

A look at the PathListBoxItem control

In order for the PathListBox to extend the ListBox by providing path-based layout, the ListBoxItem control is extended by the PathListBoxItem control. The PathListBoxitem control acts as a container for each individual item, added statically or dynamically, of the PathListBox. In this tutorial, we will look at the additional properties exposed by the PathListBoxItem control, allowing us to customize its display based on its position on the LayoutPath of the PathListBoxItem.

Download the “PLBPathListBoxItem” start project and open it in Blend to get started.

Included in the project you will find:

A Sample Data Source defined
A PathListBox with ItemsSource property bound to the SampleDataSource
A custom ItemTemplate with centered content and a rounded rectangle background

Orient the Items on the Paths

Not only will this tutorial provide more insight into the PathListBoxItem control, it will also provide more examination in working with multiple paths and their behavior.

Notice the light gray arrows denoting the direction the Paths were initially drawn.
Select the PathListBox and add the Paths as LayoutPaths in the following order: greenPath, yellowPath, redPath.
Set the Orientation property of each LayoutPath to “OrientToPath”.

Notice that the yellowPath renders the PathListBoxItems upside down because the OrientationAngle property takes into account the direction the Path was drawn. In this case, the yellowPath was drawn was drawn from right to left, placing the start point of the Path on the right side.

Now let’s take a look at how this is defined in the PathListBoxItem template.

Right-click the PathListBox and select the Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy… option.
In Template editing mode, Select the Grid and change the Rotation Angle value a few times in the Transform pane. You will notice each item rotates disregarding each Path’s Orientation property.
To link this template back to the Path’s Orientation settings, click the Advanced options square () next to the Angle property and select the Template Binding -> OrientationAngle option.
Exit Template editing mode and you will see the items oriented to the paths once again.

Scale Items Based on Position

Another property exposed by the PathListBoxItem is GlobalOffset which is determined by the position of the item based on its relative position to the start point across all paths. In this case, the start point is the first point of the greenPath in the lower right.

Right-click the PathListBox and select the Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit Current option.
In Template editing mode, Select the Grid and click the Advanced options square () next to Scale X property and select the Template Binding -> GlobalOffset.
Repeat the same binding process for the Scale Y property.
Exit Template editing mode and you see the items scaled according to their offset from the start point across all paths.

Scale Items Based on Position per Path

Similar to the GlobalOffset property is the LocalOffset property. This property is determined by the position of the item based on its relative position to the start point of the path it is currently on. Where the lower right was the global start for the whole collection it is also the local start point for items in the greenPath. The yellowPath starts on the right-side middle and the redPath starts in the upper left.

Right-click the PathListBox and select the Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit Current option.
In Template editing mode, Select the Grid and click the Advanced options square () next to Scale X property and select the Template Binding -> LocalOffset.
Repeat the same binding process for the Scale Y property.
And just for kicks, repeat the same LocalOffset binding to the Opacity property.
Exit Template editing mode and you see the items scaled according to their offset from the start point their current path. The opacity is set in accordance with the items local offset.

Now with the basics in place for the PathListBox and the PathListBoxItem controls, let’s look at a few techniques using this new found knowledge.