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.
