I was reading through the UI Design and Interaction Guide for Windows Phone 7 Series and found out that there is currently no panoramic application template or control provided as part of the standard application platform. Nothing stops us from creating our own though.

To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460

So, let’s start by creating a new Windows Phone Application project in Blend 4.

You’ll be presented with a default layout. Obviously, your panoramic screen design will go outside the bounds of the “phone”. Layout your screen accordingly. This is what I did with mine.

Now that I have all my elements on screen, I’ll create 3 visual states, one for each active session. Let’s go into our States tab and add a state group called Sections. To do that, click on the icon with a green plus sign.

In the Sections state group, let’s add the 3 states and name them accordingly. For each state, let’s also move the Grid along the  x-axis.

We can also set the default transition to some built in easing functions to smooth out the user experience.

In my case, I used the back easing function but you can play around with the different functions to see what suits you. You can preview what the transitions look like by clicking on the Turn on transition preview button.

Okay, now we’re all set. The only thing left to do is enable state changing when a user flicks the screen either to the left or to the right. This is where we will be making use of the my WPBehaviorsLibrary. We’ll go into our asset library –> behaviors tab and you’ll find a behavior called GoToNextState and GoToPreviousState:

Drag and drop these two behaviors one by one to the LayoutRoot so that it looks like this:

With one of the behaviors selected, go into the property inspector. You have a few options you can set (Loop & UseTransitions) which are pretty self explanatory.

. You’ll notice there is also a trigger property. The default trigger type is an event trigger. Let’s go ahead and click New to select the FlickGestureTrigger.

When you click ok, you’ll find that the Gesture has a Direction property that you can set. Basically, we’re saying that the GoToPreviousState action gets fired when the user triggers a flick to the Right. Do the same for the GoToNextState behavior but with a flick to the Left.

And that’s it! Press F5 and select Windows Phone 7 Emulator, unless you’re lucky enough to have a Windows Phone 7 Device.

You’ll get something like this:http://www.screencast.com/t/YzBhZGE5OT

After reading some more on the UI Guidelines, they’ve mentioned a few things about the title like moving at a different speed from the sections, etc. so I’ve tweaked the animations a bit,and now I have the title outside the overall grid, animating it separately. I also have different easing functions on the first and last page from the middle one. The result is this:

[youtube]http://www.youtube.com/watch?v=II7z9qihof0[/youtube]

You can get the code for this project as well as the library here. Also, although I’ve only managed to port  (i.e. copy paste) the States behavior from the Mix Behavior Pack to a Windows Phone behavior,  I’ve recompiled the pack to work with Silverlight 4. It’s in this folder as well.

Related Posts