Creating a motion path with the PathListBox

Build the Loop de Loop

The task at hand is to create a loop de loop track for the car to race its way through, thus accomplishing a daredevil feat of bravery.

1. With the Pen tool (P) draw a looping path that takes up the whole screen. Best to start high to build up speed and end low and flat.
2. Set the Fill property of the Path to “No brush” and the Stroke property to a dark orange.
3. Set the StrokeThickness property to 5.
4. Right-click the Path and select the Path -> Make Layout Path option.
5. In the Objects panel, click and drag the rocketCar Grid to the PathListBox. When the tooltip reads “Move to [PathListBox] Grid rocketCar” release the mouse button.

With the last step, the rocketCar Grid has been added as a child of the new PathListBox and is now almost ready to roll. Let’s fix the orientation and positioning.

1. In the Objects panel, drag the PathListBox below the Path, so the car is rendered above the Path.
2. Set the Orientation property to “OrientToPath”.
3. Select the rocketCar Grid and set the Translate Y property to -42, so the wheels touch the track.

Roll down the track

The car is in the proper position; the time has come to roll down the track.

1. Create a new Storyboard called LoopDeLoop.
2. Move the playhead to the four second mark.
3. Select the PathListBox and set the Start property to 100%
4. Select the newly created keyframe and in the Properties panel set the easing function to “Exponential InOut”.
5. Close the Storyboard.
6. Drag a ControlStoryboardAction Behavior from the Assets panel and drop it on the rocketCar Grid.
7. Set the Storyboard property of the ControlStoryboard to LoopDeLoop.
8. Run the project and click the car to watch it roll down the track.

Ok, so that’s not really a roll. That was more of a shuffle down the track with a blue tarp on. The blue tarp comes from the Rectangle used with the Selected state of the PathListBoxItem template. Let’s customize the template to get rid of the tarp.

1. Right-click the PathListBox and select Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy…
2. In the States panel, choose the Selected state and in the Objects panel you will find the fillColor2 Rectangle is the one acting as the blue Rectangle.
3. In the States panel, select the Base state.
4. In the Objects panel, delete fillColor, fillColor2 and FocusVisualElement.
5. Exit template editing mode.

In this case, we only want to show the artwork of the car to show so we’ve customized the PathListBoxItem template removing the selection, hover and mouse press visuals. Blend also removes any recorded state changes for the removed visuals so the template is still valid.

Bumping down the track

With the blue tarp removed, we can now add a little rolling and bumping animation to the car while it's moving down the track. Let’s create a separate repeating animation to spin the tires during the Loop de Loop.

1. Create a new Storyboard called Rolling.
2. Move the playhead to 0.6 seconds.
3. Select backwheel and set its rotation Angle to 360.
4. Repeat step 3 with frontwheel.
5. Move the playhead to 0.4 seconds.
6. Select body and press the Record Keyframe () button.
7. Move the playhead to 0.2 seconds.
8. Select body and press the Record Keyframe () button.
9. Move the playhead to 0.3 seconds.
10. Select body and set its translate Y property to -1.
11. Select the Rolling Storyboard in the Objects panel, and in the Properties panel change the RepeatBehavior property to “Forever.

The Record Keyframe button essential adds an empty keyframe in place that persists the pre-existing or previous value. The desired effect was to have the car body “bump” for only a tenth of a second. This was accomplished by adding the empty keyframes at 0.2 and 0.4 seconds and dropping the car body at 0.3 seconds. Without the empty keyframes the change would be interpolated across the entire storyboard and would be difficult to notice.

Chaining it all together

In order to play the animations at the same time we can use multiple behaviors and a specific trigger.

1. Add another ControlStoryboardAction to the rocketCar Grid.
2. Set the Storyboard property to Rolling.
3. Add one more ControlStoryboardAction to the rocketCar Grid.
4. In the Trigger pane, click the New button.
5. Select StoryboardCompletedTrigger and hit OK.
6. In the Trigger pane, set the Storyboard property to LoopDeLoop.
7. Set ControlStoryboardAction to “Stop”.
8. Set the Storyboard property to Rolling.
9. Run the project and click the car to truly roll down the track!