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

Creating a carousel with the PathListBox

A carousel-effect created with the PathListBox

While the PathListBox control provides an easy way to lay out items along a path, creating a carousel-like effect that appears 3 dimensional and has smooth scrolling requires a fair amount of custom code. Thankfully the Expression team has written this custom code and recently made it available on Codeplex.

Enter PathListBoxUtils - this collection of behaviors, controls and extensions makes creating a carousel very easy.

Install the PathListBoxUtils

The first step is to install the code samples.

  1. Go to the Expression Blend Codeplex site.
  2. Locate the PathBoxUtils section and download and install the latest release.
  3. Browse around the site and find other cool samples for later.

Create the PathListBox

Now we need the PathListBox in place. This should be a familiar process by now, if you’ve been working through the whole series.

  1. Create a new “Silverlight Application + Website” project and name it “PLBCarousel”.
  2. Draw a Path with the Pen tool (P).
  3. Set the Fill to “No Brush”
  4. Right-click the Path and select the Path > Make Layout Path option.
  5. With the PathListBox selected, set the WrapItems property to true.
  6. Set the Distribution property to “Even”.
  7. Set the Capacity property to “7”.
  8. Set the Start property to “7%”.
  9. If your Path is an open Path, set the FillBehavior to “NoOverlap”.

We’ve now configured the PathListBox to display seven evenly distributed items on the path, offsetting the start position slightly. Setting the FillBehavior property with an open path helps keep the sliding of items in and out of view smooth. If you’re interested in seeing this in action, complete the tutorial and toggle the FillBehavior value between running the project. You will notice a difference when an item is added to the path.

Create the Sample Data

The PathListBox is in place; let’s quickly create some sample data.

  1. In the Data panel, click the Create sample data button (Create sample data button) and select the New Sample Data… option.
  2. Hit OK on the New Sample Data dialog.
  3. Remove Property2 from the Collection item.
  4. Change Property1 to an Image type, leave the folder blank and hit OK. We’ll use the faithful Blend chairs.
  5. Drag and drop the Collection icon (Collection icon) on to the PathListBox to bind the Collection to the ItemsSource property. (Look for the “Data bind [PathListBox].ItemsSource to Collection” tooltip before letting go of the mouse.)
  6. Drag the PathListBox below the Path in the Objects panel.

Add the Scrolling behavior

This is the part that has been greatly simplified now by wrapping all of the custom code into a reusable behavior named appropriately PathListBoxScrollBehavior.

  1. Add two buttons and change their Content property to “<” and “>” and name them “DecrementButton” and “IncrementButton” respectively.
  2. Select the PathListBox.
  3. In the Asset panel Search box type “Path” to filter the list of controls shown.
  4. Double click “PathListBoxScrollBehavior” to add it directly to the selected PathListBox control.
  5. In the DecrementCommand pane click the Add Trigger icon (Add Trigger icon).
  6. In the Select Object dialog, select EventTrigger and click OK.
  7. Now set the SourceObject to DecrementButton and the EventName property to “Click”.
  8. Repeat the last three steps, but this time bind the IncrementCommand to the IncrementButton Click.
  9. Add an EventTrigger to the ScrollSelectedCommand, and set the EventName property to “SelectionChanged”. You do not need to change the SourceObject from “[Parent]” since the behavior is attached to the PathListBox instance, making it the behaviors “parent”.
  10. Set the Ease property to “Back Out” with Amplitude of “0.7”.
  11. Set the DesiredOffset to 0.5.
  12. If your path is an open path, check HideEnteringItem.

Adjust Size and Opacity

At this point if you run the project you will see smooth scrolling in action. But before we do that let’s add the PathListBoxItemTransformer control as part of a custom PathListBoxItem template, so we can have position-based scaling and opacity as well.

  1. Right-click the PathListBox and select the Edit Additional Templates > Edit Generated Items Container (ItemContainerStyle) > Edit a Copy… option.
  2. Hit OK on the Create Style Resource dialog.
  3. Create a Grid off the root Grid and name it “TransformerParentGrid”.
  4. Move the children of the root Grid into TransformerParentGrid.
  5. Select the root Grid and double click PathListBoxItemTransformer from the Assets panel.
  6. Add TransformerParentGrid to the PathListBoxItemTransformer.
  7. Reset the Width and Height of TransformerParentGrid to “Auto”.
  8. Select the PathListBoxItemTransformer.
  9. In the Item Transformer pane in the Property panel, check IsCentered.
  10. Set the OpacityRange property to 0.7, 1.0.
  11. Set the ScaleRange property to 0.8, 3.6.
  12. Set the Ease to “Sine In”.

Now even at design time, you should the position based scaling in action.

Add a Blur Effect

One more feature to show is the AdjustedOffset property and the matching AdjustedOffsetToRadiusConverter.

  1. Select the contentPresenter and add a Blur effect by clicking the New button next to the Effect property.
  2. Next to the Radius property of the BlurEffect, click the Advanced options square (Advanced options square) and select the Data Binding… option.
  3. In the Create Data Binding dialog, click the Element Property tab and select the AdjustedOffset property of the PathListboxItemTransformer.
  4. At the bottom of the dialog click the Show advanced properties icon (Show advanced properties).
  5. Click the “…” button next to the Value converter dropdown.
  6. In the Add Value Converter dialog, select the AdjustedOffsetToRadiusConverter and hit OK.
  7. Now set the Converter parameter to 5 and hit OK.
  8. Run the project and enjoy the smooth-scrolling of the position-based scaled, blurred and faded items.

Congratulations! You have just created a carouse-effect with the PathListBox. For additional details on the features available in PathListBoxUtils see the reference documentation on CodePlex.