Design Process, Inspiration, and User Experience

PAGES

24

Jun 10

“That’s a HUGE List!” – WP7 Jump List



If you have been tinkering around with the Windows Phone 7 SDK you’ve probably noticed a handful of controls that seem to be missing. The obvious ones are the Panorama and Pivot controls. Fortunately, the phone runs Silverlight, and most of the controls that are missing are relatively easy to build. In addition there are a handful of people in the Silverlight Community that have created their own panorama and pivot controls, including this one built by Clarity. And these on CodePlex.

WP7 Missing Control: WP7 Jump List

Today I would like to share some techniques I used in recreating the “jump list” functionality that is shown in the Windows Phone 7 Features Video.

clip_image001

To see this feature in action watch this video (around 00:50) : http://www.youtube.com/watch?v=wlJ_fLPpmdM

The List

Some of Silverlight’s built in functionality made building this control a cinch. The basic List box scroll functionality in the WP7 SDK has touch and inertial already built in, so I didn’t have to do any physics or manipulation coding to get the smooth scrolling (like the back in the day with WPF). Phew…that gets us half way there.

Ironically, one of the challenging features was figuring out how to dynamically add the “touch tiles” into the list of contacts.

clip_image003

After I thought about it for a little while, I decided to go the brute force method and just use a nested ItemsControl (see below). I’m sure there are many different/better approaches to go about this, but that’s the beauty of Silverlight.

pic3

Flipping Tiles

The flipping of the jump tiles is easily done utilizing the Perspective 3D features. Check out this link for more information on how to use Perspective 3D.

clip_image007

First I added a User control that examines the underlying data list and generates a “jump tile” for each of the letters in the alphabet. Then to get the disabled visual style on the letters that didn’t have any entries I used a Value Converter that checks the count of the list and sets the IsEnabled Property accordingly.

pic5

Smooth Scroll List

First I added a dependency property that is linked to the ScrollToVericalOffset method on the scrollviewer. Because there is no VerticalOffset dependency property on scrollviewers in SL, we can simply create one to enable binding and animation, etc.

pic6

Then, once we know which letter to scroll to we can use the ever-so-handy TransformToVisual method to find the absolute position relative to the list of items. The transformToVisual method returns a MatrixTransform that gives us the Y-offset value and we simply plug that into the “to” value of the animator.

pic7

To do the actual animation I used the Artefact animator framework. I’ve recently, been playing around with it and I must say its pretty awesome. . The framework is inspired by the flash community and offers up Tweener like functionality for Silvelight. If you haven’t seen this before I recommend checking it out.

Commands and Behaviors

One of the challenges I faced when building this control was communicating between user controls in the visual tree. For this,I used the MVVM light toolkit. available HERE: . This toolkit simplifies some of the pains in adhering to the MVVM pattern. Specifically,the RelayCommand and the EventToCommand behavior came in handy for achieving the desired results.

Source Code

I’ll post the source code for this shortly. I need to clean it up a little bit and make it Blend happy (blendable?) . Stay posted for more WP7 goodness…

Cheers,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

0 comments , permalink