XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control

In this third installment of the Windows Phone HTML5 XBox Reveal sample, we’ll look at fixing the horizontal and vertical scrolling of the index.html

Here are the first articles available if you have not read them yet for some background

1. HTML5 & Windows Phone: XBox Reveal Sample
2. HTML5 & Windows Phone: Multiple Resolutions

Usually using CSS you would fix horizontal scrolling by setting the following meta tag in your HTML page.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Unfortunately this does not work within our app. But fortunately for us, there is a fix to this but does take a little extra work.

The Fix

To fix the issue, we are going to leveraging some code from the open source PhoneGap project. Specifically we are going to look at the BrowserMouseHelper and some of the code in there.

I decided for my purposes to use just some code and not the entire class. To implement the fix, open up MainPage.xaml.cs and within the MainPage.Browser_Loaded() method, add the following code

// disable scrolling in webbrowser control
var border0 = VisualTreeHelper.GetChild(Browser, 0);
var border1 = VisualTreeHelper.GetChild(border0, 0);
var panZoom = VisualTreeHelper.GetChild(border1, 0);
var grid = VisualTreeHelper.GetChild(panZoom, 0);
var grid2 = VisualTreeHelper.GetChild(grid, 0);
var border = VisualTreeHelper.GetChild(grid2, 0) as Border;

if (border != null)
{
    border.ManipulationDelta += (o, args) =>
    {
        args.Handled = true;
    };
    border.ManipulationCompleted += (o, args) =>
    {
        args.Handled = true;
    };
}

Essentially in this piece of code, we use VisualTreeHelper to help us get the System.Windows.Controls.Border object within the visual tree so we can wire up the ManipulationDelta and ManipulationCompleted events to disable any scrolling in the WebBrowser window. Run the app and test the code.

Vertical Scrolling Only

Sometimes depending on your circumstances, you are going to have to scroll vertically, but the fix above will not do that.  To accommodate vertical scrolling we will need to add a bit of code to the ManipulationCompleted event handler as follows

border.ManipulationCompleted += (o, args) =>
{
    double y = args.TotalManipulation.Translation.Y;
    double x = args.TotalManipulation.Translation.X;

    if (Math.Abs(y) < Math.Abs(x))
        if (x < 0)
            args.Handled = true;

};[TODO - TEST VS CODE AND PASTE HERE].

When you run the app you should be able to scroll vertically but not horizontally, again, not what we want in our app, but it’s something you may want in yours.

We are pretty much done the sample, so in the next post I’ll go through some final polishing of the app to get it ready for Windows Store certification.