Making swipe work for a pivot control with embedded WebBrowser on Windows Phone 8.0

Question

I'd like my application to have a Pivot control with a WebBrowser control in each PivotItem. The problem is that swiping to next PivotItem doesn't work since it instead results in scrolling the web page horizontally. However, the web pages are responsive and doesn't need to be scrolled horizontally so instead I want horizontal swiping to result in a pivot switch. Can this be accomplished? If I can't use a Pivot control what is the recommended way to implement page switching with WebControls on the pages? A top menu a la iOS/Android?

Answer 1

Yes it is possible, however needs little workaround since Webbrowser handles the event first and your Pivot probably doesn't know about it. You can use for this purpose Touch and its event FrameReported. Simple code can look like this:

public MainPage()
{
   InitializeComponent();
   Touch.FrameReported += Touch_FrameReported;
}

TouchPoint first;

private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
   TouchPoint mainTouch = e.GetPrimaryTouchPoint(myWebBrowser);
   if (mainTouch.Action == TouchAction.Down)
         first = mainTouch;
   else if (mainTouch.Action == TouchAction.Up)
   {
       if (mainTouch.Position.X - first.Position.X < 0)
            MessageBox.Show("Next item.");
           //myPivot.SelectedIndex++;
       if (mainTouch.Position.X - first.Position.X > 0)
           MessageBox.Show("Previous item.");
          //myPivot.SelectedIndex--;
   }
}

As you can see - I'm remembering the where the user start his movements, then when he releases his touch - I change myPivot.SelectetIndex. Hope this helps a little. You can also try with TouchPanel, but I think that will be simpler (if it's sufficient).

---

If you want to disable some gestures it can look for example like in the code below. I enabled only HorizontalDrag - so it won't fire for zoom. The tolerance of course shouldn't be 0, you will have to define the most suitable for your App.

// in MainPage() constructor
TouchPanel.EnabledGestures = GestureType.HorizontalDrag; 

private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
   TouchPoint mainTouch = e.GetPrimaryTouchPoint(myMap);
   if (mainTouch.Action == TouchAction.Down)
        first = mainTouch;
   else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)
   {
      if (mainTouch.Position.X - first.Position.X < 0)
        MessageBox.Show("Next item.");
        //myPivot.SelectedIndex++;
      if (mainTouch.Position.X - first.Position.X > 0)
        MessageBox.Show("Previous item.");
        //myPivot.SelectedIndex--;
   }
}