When the Windows Phone 7 Developer SDK was released a couple
of weeks ago at MIX10 many people noticed the SDK doesnt 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 didnt 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 Ill add some **asterisks ** to the code below as my coding skills arent 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 cant 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 didnt 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 Id love to know what you think. You can download the Source HERE or from the Expression Gallery Erik Klimczak |
[email protected] | twitter.com/eklimczDid you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.
