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.