Create the PathListBox

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

1. 2. 3. 4. 5. 6. 7. 8. 9.

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.

Weve 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 youre 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; lets quickly create some sample data.

1. 2. 3. 4. 5.

In the Data panel, click the Create sample data button ( Hit OK on the New Sample Data dialog. Remove Property2 from the Collection item.

) and select the New Sample Data option.

Change Property1 to an Image type, leave the folder blank and hit OK. Well 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.) 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. 2. 3. 4. 5. 6. 7. 8. 9.

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 control. 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 theIncrementButton Click. 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. 11. 12.

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 lets add the PathListBoxItemTransformer control as part of a custom PathListBoxItem template, so we can have position-based scaling and opacity as well.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

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

1. 2. 3. 4. 5. 6. 7. 8.

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 hit OK. 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. ).