- My account
WP7 Mango and HTML5 applications' gestures
The problem - WebBrowser component consumes these manipulation events, so they are not offered to your web application. In addition, I did not like the all the time popping copy/paste while selecting a cell in my table.
So, the search led me to few useful articles:
http://www.scottlogic.co.uk/blog/colin/2011/11/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control/ - some useful information about the visual tree structure of WebBrowser component in WP7.
Ok, so armed with this knowledge I approached my problem as follow:
1. In WebBrowser.LoadCompleted callback I got to the Border child consuming the manipulation events, according to second link article it is the fifth element in WebBrowser children tree:
private void WebB_LoadCompleted(object sender, NavigationEventArgs args)
var border = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(WebB, 0), 0), 0), 0), 0);
(border as Border).ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(WebBBorder_ManipulationDelta);
As you see, first got the Border element, than register a callback to delta event and at the end inform the script that WebBrowser is ready with loading the content.
Now I have the possibility to use the delta manipulation event, so in the callback:
double lastTouch = 0;
private void WebBBorder_ManipulationDelta(object sender, ManipulationDeltaEventArgs args)
args.Handled = true; // handle the event to avoid scrolling the viewport
double x = (args.CumulativeManipulation as ManipulationDelta).Translation.X;
double y = (args.CumulativeManipulation as ManipulationDelta).Translation.Y;
double d = Math.Abs(x) + Math.Abs(y);
if (d - 30 > lastTouch)
lastTouch = d;
else if (lastTouch - 20 > d)
lastTouch = d;
Oh, and yes, I chose to disable the copy/paste in my table tag by adding event handler as onselectstart="return false".
Now, the result is
a. my application WebBrowser viewport is not scrolling and instead of consuming the manipulation events, I intercepted them and have a choice to call my script with their data.
b. this would enable me to use multitouch events to manipulate my html data.
c. got rid of unwanted copy/paste popup
Be aware that there is a good cross platform framework. PhoneGap, enabling many functionalities, but if you are not targeting cross platform deployment, or even if you are, you might need to do similar workarounds in your applications for HTML5. The reason is, as example, the gestures are not addressed by PhoneGap, and in any case, you may need different functionality depending on your application needs.