Building the Elusive Windows Phone Panorama Control
When the Windows Phone 7 Developer SDK was released a couple of weeks ago at MIX10 many people noticed the SDK doesn’t include a template for a Panorama control. Here at Clarity we decided to build our own Panorama control for use in some of our prototypes and I figured I would share what we came up with.
There have been a couple of implementations of the Panorama control making their way through the interwebs, but I didn’t think any of them really nailed the experience that is shown in the simulation videos.
One of the key design principals in the UX Guide for Windows Phone 7 is the use of motion. The WP7 OS is fairly stripped of extraneous design elements and makes heavy use of typography and motion to give users the necessary visual cues. Subtle animations and wide layouts help give the user a sense of fluidity and consistency across the phone experience. When building the panorama control I was fairly meticulous in recreating the motion as shown in the videos.
The effect that is shown in the application hubs of the phone is known as a Parallax Scrolling effect. This this pseudo-3D technique has been around in the computer graphics world for quite some time. In essence, the background images move slower than foreground images, creating an illusion of depth in 2D. Here is an example of the traditional use: http://www.mauriciostudio.com/.
One of the “animation gems” I've learned while building interactive software is the “follow animation”. The premise is straightforward: instead of translating content 1:1 with the interaction point, let the content “catch up” to the mouse or finger. The difference is subtle, but the impact on the smoothness of the interaction is huge. That said, it became the foundation of how I achieved the effect shown below.
Source Code Available HERE
Before I briefly describe the approach I took in creating this control..and I’ll add some **asterisks ** to the code below as my coding skills aren’t up to snuff with the rest of my colleagues. This code is meant to be an interpretation of the WP7 panorama control and is not intended to be used in a production application.
1. Layout the XAML
The UI consists of three main components : The background image, the Title, and the Content. You can imagine each these UI Elements existing on their own plane with a corresponding Translate Transform to create the Parallax effect.
2. Storyboards + Procedural Animations = Sexy
As I mentioned above, creating a fluid experience was at the top of my priorities while building this control. To recreate the smooth scroll effect shown in the video we need to add some place holder storyboards that we can manipulate in code to simulate the inertia and snapping. Using the easing functions built into Silverlight helps create a very pleasant interaction.
3. Handle the Manipulation Events
With Silverlight 3 we have some new touch event handlers. The new Manipulation events makes handling the interactivity pretty straight forward. There are two event handlers that need to be hooked up to enable the dragging and motion effects:
the ManipulationDelta event : (the most relevant code is highlighted in pink)
Here we are doing some simple math with the Manipulation Deltas and setting the TO values of the animations appropriately. Modifying the storyboards dynamically in code helps to create a natural feel….something that can’t easily be done with storyboards alone.
And secondly, the ManipulationCompleted event:
Here we take the Final Velocities from the Manipulation Completed Event and apply them to the Storyboards to create the snapping and scrolling effects. Most of this code is determining what the next position of the viewport will be. The interesting part (shown in pink) is determining the duration of the animation based on the calculated velocity of the flick gesture. By using velocity as a variable in determining the duration of the animation we can produce a slow animation for a soft flick and a fast animation for a strong flick.
Challenges to the Reader
There are a couple of things I didn’t have time to implement into this control. And I would love to see other WPF/Silverlight approaches.
1. A good mechanism for deciphering when the user is manipulating the content within the panorama control and the panorama itself. In other words, being able to accurately determine what is a flick and what is click.
2. Dynamically Sizing the panorama control based on the width of its content. Right now each control panel is 400px, ideally the Panel items would be measured and then panorama control would update its size accordingly.
3. Background and content wrapping. The WP7 UX guidelines specify that the content and background should wrap at the end of the list. In my code I restrict the drag at the ends of the list (like the iPhone). It would be interesting to see how this would effect the scroll experience.
Well, Its been fun building this control and if you use it I’d love to know what you think. You can download the Source HERE or from the Expression Gallery
Erik Klimczak | eklimczak@claritycon.com | twitter.com/eklimcz