Windows Phone 7 - Disabling the default pinch/zoom & scroll-snapback behavior

edited May 2012 in Packaging Apps
I've been working through a few pain points when packaging Enyo apps for Windows Phone 7 using PhoneGap, and wanted to share this solution for one of the bigger issues on the platform.

When you package an Enyo (or any HTML app) on WP7, the native WebBrowser control is used as the wrapper for your content. Like other platforms, you have the option of setting your viewport to control whether or not the user can pinch/zoom.

<meta name="viewport" content="user-scalable=no">


Unlike other platforms however, the WP7 implementation still allows you to pinch/zoom - it just resets the content/viewport when you remove your finger from the screen. In addition, you are also able to scroll up/down the page, even though your app content doesn't extend past the viewport (like when using fit:true and/or enyo-fit). Like the pinch/zoom behavior, the scroller snaps back to its original position once you remove your finger from the screen. These quirks prevent you from being able to include certain events in your app (drag, mouseover/out, etc) and give you an undesired user experience - one that's immediately distinguishable from native apps.

I found an article where someone found a solution for this: http://www.scottlogic.co.uk/blog/colin/2011/12/a-simple-multi-page-windows-phone-7-phonegap-example/ . This post includes a handful of other interesting tips, so it's worth looking at. That being said, they include a lot of other information/code that's not directly related to the issue I'm trying to fix. Even while using the code provided, I still had to make some changes to make it work, so I wanted to post a quick walk-through that you can easily reference here.

Note: These instructions are assuming that your application's namespace is "App". Change this to match your own namespace.


-----------------

How-to:

-----------------


1) Add a folder named 'Util' to your PhoneGap's main project folder

Your folder structure should now look something like this:
- App
- Bin
- GapLib
- obj
- Plugins
- Properties
- Service References
- Util
- www (your app contents)


2) Add the following 2 files to the new 'Util' folder, and paste in their contents:

LinqToVisualTree.cs - View code on gist
WebBrowserHelper.cs - View code on gist

*Note*: After adding these files, be sure to select the "Include In Project" option for this folder/files in Visual Studio.



3) Now open your MainPage.xaml.cs file and include this line in your list of dependencies, in the top section:

using App.Util


4) In the same file, go down to your namespace (directly under the line you just entered). You will need to change 3 things:
- Add WebBrowserHelper declaration
- Edit MainPage constructor
- Add Browser_ScriptNotify function

The contents of this file should now be similar to this: View code on gist


5) Lastly, open your app's index.html file and add this script in the <head>:
<script type="text/javascript" charset="utf-8">
// ensure that this page does not scroll
window.external.Notify("noScroll");
</script>

That should have your app looking and feeling a million times better.

Comments

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!