Install the PathListBoxUtils
The first step is to install the code samples.
- Go to the Expression Blend Codeplex site.
- Locate the PathBoxUtils section and download and install the latest release.
- 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.
- Create a new “Silverlight Application + Website” project and name it “PLBCarousel”.
- Draw a Path with the Pen tool (P).
- Set the Fill to “No Brush”
- Right-click the Path and select the Path > Make Layout Path option.
- With the PathListBox selected, set the WrapItems property to true.
- Set the Distribution property to “Even”.
- Set the Capacity property to “7”.
- Set the Start property to “7%”.
- 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.
- In the Data panel, click the Create sample data button () and select the New Sample
- Hit OK on the New Sample Data dialog.
- Remove Property2 from the Collection item.
- Change Property1 to an Image type, leave the folder blank and hit OK. We’ll use
the faithful Blend chairs.
- Drag and drop the 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.)
- 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.
- Add two buttons and change their Content property to “<” and “>” and name them “DecrementButton”
and “IncrementButton” respectively.
- Select the PathListBox.
- In the Asset panel Search box type “Path” to filter the list of controls shown.
- Double click “PathListBoxScrollBehavior” to add it directly to the selected PathListBox
- In the DecrementCommand pane click the Add Trigger icon ().
- In the Select Object dialog, select EventTrigger and click OK.
- Now set the SourceObject to DecrementButton and the EventName property to “Click”.
- Repeat the last three steps, but this time bind the IncrementCommand to the IncrementButton
- 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
- Set the Ease property to “Back Out” with Amplitude of “0.7”.
- Set the DesiredOffset to 0.5.
- 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
- Right-click the PathListBox and select the Edit Additional Templates > Edit Generated
Items Container (ItemContainerStyle) > Edit a Copy… option.
- Hit OK on the Create Style Resource dialog.
- Create a Grid off the root Grid and name it “TransformerParentGrid”.
- Move the children of the root Grid into TransformerParentGrid.
- Select the root Grid and double click PathListBoxItemTransformer from the Assets
- Add TransformerParentGrid to the PathListBoxItemTransformer.
- Reset the Width and Height of TransformerParentGrid to “Auto”.
- Select the PathListBoxItemTransformer.
- In the Item Transformer pane in the Property panel, check IsCentered.
- Set the OpacityRange property to 0.7, 1.0.
- Set the ScaleRange property to 0.8, 3.6.
- 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.
- Select the contentPresenter and add a Blur effect by clicking the New button next
to the Effect property.
- Next to the Radius property of the BlurEffect, click the Advanced options square
() and select the Data Binding… option.
- In the Create Data Binding dialog, click the Element Property tab and select the
AdjustedOffset property of the PathListboxItemTransformer.
- At the bottom of the dialog click the Show advanced properties icon ().
- Click the “…” button next to the Value converter dropdown.
- In the Add Value Converter dialog, select the AdjustedOffsetToRadiusConverter and
- Now set the Converter parameter to 5 and hit OK.
- Run the project and enjoy the smooth-scrolling of the position-based scaled, blurred
and faded items.