Panoramic Navigation on Windows Phone 7 with No Code!

Posted on by Being In Tech

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.

image

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.

image

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.

image

image

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.

image

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.

image

image

image

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

image

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.

image

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:

image

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

image

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.

image

. 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.

image

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.

image

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

image

You’ll get something like this:

 http://content.screencast.com/users/jawss/folders/Jing/media/ca74bfc2-4fa5-4063-be34-e826163a3fe4/jingswfplayer.swf

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:

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.

http://cid-bdfb7845c22e26b6.office.live.com/embedicon.aspx/Projects/TechFriday/WP7%20-%20Panoramic%20Navigation%20with%20no%20code/PanoramaApplication.zip

Unknown's avatar

Published by Being In Tech

63 thoughts on “Panoramic Navigation on Windows Phone 7 with No Code!”

  1. Hi

    This is a great sample thanks for sharing. I downloaded the sample but every time i try to build it on VS2010 Express WP7 it gives me the following error

    Error 1 The “ValidateXaml” task failed unexpectedly.
    System.IO.FileLoadException: Could not load file or assembly ‘file:///C:UsersmrabieDocumentsDownloadsFlickGestureSampleBinDebugMicrosoft.Expression.Interactions.dll’ or one of its dependencies. Operation is not supported. (Exception from HRESULT: 0x80131515)
    File name: ‘file:///C:UsersmrabieDocumentsDownloadsFlickGestureSampleBinDebugMicrosoft.Expression.Interactions.dll’ —> System.NotSupportedException: An attempt was made to load an assembly from a network location which would have caused the assembly to be sandboxed in previous versions of the .NET Framework. This release of the .NET Framework does not enable CAS policy by default, so this load may be dangerous. If this load is not intended to sandbox the assembly, please enable the loadFromRemoteSources switch. See http://go.microsoft.com/fwlink/?LinkId=155569 for more information.

    at System.Reflection.RuntimeAssembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)
    at System.Reflection.RuntimeAssembly.nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)
    at System.Reflection.RuntimeAssembly.InternalLoadAssemblyName(AssemblyName assemblyRef, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection, Boolean suppressSecurityChecks)
    at System.Reflection.RuntimeAssembly.InternalLoadFrom(String assemblyFile, Evidence securityEvidence, Byte[] hashValue, AssemblyHashAlgorithm hashAlgorithm, Boolean forIntrospection, Boolean suppressSecurityChecks, StackCrawlMark& stackMark)
    at System.Reflection.Assembly.LoadFrom(String assemblyFile)
    at Microsoft.Silverlight.Build.Tasks.ValidateXaml.XamlValidator.Execute(ITask task)
    at Microsoft.Silverlight.Build.Tasks.ValidateXaml.XamlValidator.Execute(ITask task)
    at Microsoft.Silverlight.Build.Tasks.ValidateXaml.Execute()
    at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
    at Microsoft.Build.BackEnd.TaskBuilder.ExecuteInstantiatedTask(ITaskExecutionHost taskExecutionHost, TaskLoggingContext taskLoggingContext, TaskHost taskHost, ItemBucket bucket, TaskExecutionMode howToExecuteTask, Boolean& taskResult)

    PanoramaApplication

    anyway to resolve this?

    Thanks

    Like

    1. Hi Mrabie, try this: before unzipping the file, right click properties and click on unblock. I believe windows blocks dlls that are downloaded from the internet to minimize the risk of malicious apps from running.

      Another thing you can try is expand the references under the project, remove and readd the Microsoft.Expression.Interactions reference.

      Like

  2. The design document points to that the animation should start as soon as you move your finger from side to side and not just the flick move. I have been experimenting a bit with this and I am planning to create a behavior for this if there’s not already one out there. Another thing that I have been trying to figure out is how to loop the panoramic view aka going from last frame to first as it were a long loop, got any thoughts on these things? Great tips btw 🙂

    Like

    1. Yeah I’ve been thinking about that one.. WRT the looping, the GetNextState/PreviousState behavior actually has a property to loop (credits to the original author of the WPF/Silverlight version of the Mix Behavior Pack Peter Blois) which you should be able to use with this sample.

      Originally was hoping to make use of the TileBrush viewport to paint part of the sections but noticed that it wasn’t present in the WP7 framework.. let me know if you crack it 🙂

      Like

  3. […] developers still have some work to do on their own and MS has yet to provide a template. Aimee Gurl has demonstrated a way to create a panoramic application and shared her method. She’s shared the code and the library so if you’re a dev you may want to take a look and […]

    Like

  5. Thanks for the article! This is definitely a very useful tool for people like me, who have 0 development and programming experience, but would like to jump into the playing field and learn like the pros, especially with an opportunity to catch up, now that windows mobile is starting fresh with a clean slate.

    Like

  8. Hey Aimee,

    Great post but I do have one issue, I can’t get the WPBehaviours to appear in Assets, no matter what I do.

    I’ve added the reference, I’ve Built, cleaned and rebuild the project to make sure but still no luck. I’ve made sure that Windows isn’t blockin the .Dll either.

    Any Ideas?

    Like

    1. Hi Darren, the behavior that should appear is the GoToNext and GoToPrevious state behaviors/actions. You should then be able to set the flickgesturetrigger as the trigger for these.

      Are you able to compile and run the sample application?

      Like

      1. Hi Aimee,

        I can run the sample and all is ok, but if I try to build a new app from sratch it won’t work! I’ll keep playing and see can I get some success!

        Like

      2. Hi Darren, if you’re making your own, use the WPBehaviorLibrary.dll from the folder WPBehaviorLibrary/bin/debug or if you downloaded the one directly from the link in the post, make sure you Rightclick-> propreties -> Unblock that one too 🙂

        Like

      3. Aimee,

        I’m having this same problem. All looks good, just not seeing the behaviors. Has anyone managed to get this resolved? if so, how?

        Like

      4. Hi John, are you also seeing the problem on a new project?

        If so, maybe try adding the WPBehaviorsLibrary project to your new solution, then add the reference. You should then be able to see new “GoToNextState” and “GoToPreviousState” behaviours and replace the TriggerType of those behaviours to FlickGestureTrigger.

        BTW, I made an update with the code and uploaded a file called FlickGestureTrigger.zip which didn’t include the WPBehaviorsLibrary (which was not supposed to be the case ^_^. I’ve reuploaded the entire PanoramaApplication.zip file with both projects.

        Like

  9. Hi Aimee,

    this article is really amazing.

    I just have one question since I’m getting some errors when I’m trying to open the project under Expression Blend 4 Beta.(below a screen shot)

    Note: I installed all components that we need to accomplish this.

    Any idea or solution?

    thanks.

    Like

  10. Aimee, Please nevermind my previous post.

    I figured it out.

    I forgot to copy the Dll file to the root of the project.

    Thanks in advance.

    Like

  11. Hey. First off, THANKS for making this! Really appriciated. I (and im sure many others) am really excited about WP7. So excited ive decided to try my hand at making an app for it(!) Something i have no idea where to start on.

    Anyway, I have downloaded the file but i get the same error as the second commenter and cant find where i click unblock? can you tell me exactly where? thanks

    Like

    1. Hello Byron, when you download the zip file, before extracting, rightclick on it and select properties. You should see the unblock button somewhere there 🙂

      Like

  12. […] โดยผู้ที่ไขข้อข้องใจนี้คือ Jocelyn Villaraza ครับ ผมขออณุญาตแปลเป็นภาษาไทยนะครับ เนื่องจากบทความที่เขียนไว้ในhttp://aimeegurl.com/2010/03/18/panoramic-navigation-on-windows-phone-7-with-no-code/ค่อนข้างอ่านยากสำหรับมือใหม่อย่างผม […]

    Like

  13. Ah – I was clicking open instead of save when downloading and have found the unblock button now. Unfortunately im getting another few errors when i want to run the app in the emulator. What do I do?

    Warning 1 The referenced project ‘..WPBehaviorsLibraryWPBehaviorsLibrary.csproj’ does not exist. PanoramaApplication
    Error 2 The tag ‘FlickGestureTrigger’ does not exist in XML namespace ‘clr-namespace:BehaviorsLibrary;assembly=WPBehaviorsLibrary’. C:UsersByronDocumentsDownloadsFlickGestureSampleMainPage.xaml 114 5 PanoramaApplication
    Error 3 The tag ‘GoToNextState’ does not exist in XML namespace ‘clr-namespace:BehaviorsLibrary;assembly=WPBehaviorsLibrary’. C:UsersByronDocumentsDownloadsFlickGestureSampleMainPage.xaml 115 6 PanoramaApplication
    Error 4 The tag ‘FlickGestureTrigger’ does not exist in XML namespace ‘clr-namespace:BehaviorsLibrary;assembly=WPBehaviorsLibrary’. C:UsersByronDocumentsDownloadsFlickGestureSampleMainPage.xaml 117 5 PanoramaApplication
    Error 5 The tag ‘GoToPreviousState’ does not exist in XML namespace ‘clr-namespace:BehaviorsLibrary;assembly=WPBehaviorsLibrary’. C:UsersByronDocumentsDownloadsFlickGestureSampleMainPage.xaml 118 6 PanoramaApplication
    Warning 6 The referenced component ‘WPBehaviorsLibrary’ could not be found.

    Like

    1. Hi Byron, when you extract the file, you should get the Panoramic.sln file and two folders: WindowsPhoneApplication1 & WPBehaviorsLibrary. To open the solution, click on Panoramic.sln. Make sure 2 projects are loaded: PanoramaApplication and WPBehaviorsLibrary.

      Under PanoramaApplication, make sure WPBehaviorsLibrary is referenced. Expand the References tab under PanoramaApplication and see if you can find WPBehaviorsLibrary. If you can’t right click on References and select add reference. You can either browse the project tab and select WPBehaviorsLibrary (if it’s visible) or go to the Browse tab and navigate to where you extracted the sample project, got to the WPBehaviorsLibrary folder -> bin -> debug and select the WPBehaviorsLibrary.dll.

      Like

    2. Hi Byron, i just realized when i posted the update to the project, i didn’t include the behavior in the zip file 😦 Re-uploaded the entire project under PanoramaApplication.zip. Sorry for the confusion! ^_^

      Like

  20. Hi Aimee .. how are you .. i hope you well

    anyway, i have a question .. in my WP7 app i use your way to create Panorama navigation but i want to cancel upRight upLeft downRight downLeft .. because it’s so annoying when someone navigate throw a listbox inside the panorama..

    So .. if you know anything about it please tell me

    & thanks in advance 🙂

    Like

  21. Aimee, nevermind my last comment. I clicked around and ended up on a Windows Live page where the zip file was available. Enjoyed reading your blog. Thanks for the great work! Richard

    Like

  22. Sorry, it looks like my original comment didn’t get through. Here it is just to avoid confusion.

    Hi Aimee,

    Do you still have this example available for download? I can’t find any links. I know that it is now superceded by your Looping Panorama version, but I’m new to Silverlight and I’d like to start by looking at this version.

    Thanks,
    Richard

    Like

  24. Hey,

    Great post! I got my panorama app running.

    I have only one problem, my panorama image is taller than the standard height. My panorama only scrolls horizontal, is there a way to make it scroll vertical, and how?

    Kind regards,
    Jordy

    Like

    1. Hi George, sorry about the late reply. I may have accidentally deleted the link when updating this post :S I’ve updated it again to include the link to the project. Thanks for the feedback!

      Like

      1. I’m getting the following errors when I try to Build the project in Blend 4 for Windows Phone Beta:

        Could not resolve this reference. Could not locate the assembly “Microsoft.Phone.Controls”. Check to make sure the assembly exists on disk. If this reference is required by your code, you may get compilation errors.

        Could not resolve this reference. Could not locate the assembly “Microsoft.Phone.Controls.Navigation”. Check to make sure the assembly exists on disk. If this reference is required by your code, you may get compilation errors.

        Like

      2. George,
        It seems as though in the newest version of WP7 has condensed the controls into the Microsoft.Phone dll. To fix this issue, add a reference to Microsoft.Phone (delete troubled “Microsoft.Phone.Controls” and “Microsoft.Phone.Controls.Navigation”) in your References folder.

        Then, in your App.xaml, change your namespaces to reference the “Microsoft.Phone” assembly instead. Like so:

        xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

        Like

  34. Hello,
    first thanks for this very nice example. But i have found problems with the final Windows Phone 7 developer tools what includes Expression Blend 4 for Windows Phone 7. It looks that you have create this example with a beta version of the dev tools and so it dosn’t work with the final.
    One of the problems is assambly like this: “xmlns:phoneNavigation=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation”. Microsoft have change some of the.
    You can found more informations about this at http://blogs.msdn.com/b/jaimer/archive/2010/06/28/migrating-apps-from-windows-phone-ctps-to-the-beta-build.aspx?wa=wsignin1.0

    Hope you can update the example so that it works with the final of the dev tools.

    Thanks and best regards,
    Nico

    Like

    1. Hey Nico, you won’t be needing this anymore if you have the release version of the tools. This was more meant for the CTP days when there was no Panorama control for people to use but they wanted to maybe present their concept app running in the emulator with the interactions. The controls should by default have all these animations & interactionn already. 🙂

      Like

    2. also check the comment from andy above:
      George,
      It seems as though in the newest version of WP7 has condensed the controls into the Microsoft.Phone dll. To fix this issue, add a reference to Microsoft.Phone (delete troubled “Microsoft.Phone.Controls” and “Microsoft.Phone.Controls.Navigation”) in your References folder.

      Then, in your App.xaml, change your namespaces to reference the “Microsoft.Phone” assembly instead. Like so:

      xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
      xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

      Like

  35. I am a complete novice to programming… but would like to make my own apps for WP7. Where do I start? Is there a dummies guide to creating apps? Or a prog like the above I could use to do it for me? Sorry for the newbie question!

    Like

  37. Quick question,

    I also wanted to know if I could use the flickgesture for sketchflow… if so, the one question I have is that I get the left for forward and the right for backward but what how do you do multiple forwards and backwards? or do you only have to add the state twice period?

    Thanks so much this is truly helpful…

    Like

  38. Is it possible that you can have the gestures for just the sketchflow… i am trying to get it to work but can’t. this would be great for creating mockups…

    Like

Leave a comment