Implement Swipe event on WP8

swipe, windows-phone-8

Solution

There are two possibilities (AFAIK): You can use XNA TouchPanel (more information about it you can find here: Working with TouchInput, Detecting Gestures and this blog) for this:

public MainPage()
{
   InitializeComponent();

   TouchPanel.EnabledGestures = GestureType.Flick;
   myWebbrowser.ManipulationCompleted += myWebbrowser_ManipulationCompleted;
}

private void myWebbrowser_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
   if (TouchPanel.IsGestureAvailable)
   {
      GestureSample gesture = TouchPanel.ReadGesture();
      switch (gesture.GestureType)
      {
        case GestureType.Flick:
            if (e.FinalVelocities.LinearVelocity.X < 0)
                        LoadNextPage();
            if (e.FinalVelocities.LinearVelocity.X > 0)
                        LoadPreviousPage();
            break;
        default:
            break;
      }
  }
}

Or you can use Silverlight Toolkit as described in this answer or other here. EDIT - small remark Only watch out, because when you use XNA, you sometimes need to do (for example OnNavigatedTo):

FrameworkDispatcher.Update();

Otherwise your App will sometimes crash.

Hope this helps. EDIT 2 - code example after comment In case your ManipulationEvent is handeled first (for example by Pivot or Map), I tried to subscribe to `Touch.FrameReported` - as I've tested - it should work:

public MainPage()
{
    InitializeComponent();

    TouchPanel.EnabledGestures = GestureType.Flick;
    Touch.FrameReported += Touch_FrameReported;
}

private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
   if (TouchPanel.IsGestureAvailable)
   {
      GestureSample gesture = TouchPanel.ReadGesture();
      switch (gesture.GestureType)
      {
         case GestureType.Flick:
             if (gesture.Delta.X > 0)
                  MessageBox.Show("Right");
             if (gesture.Delta.X < 0)
                  MessageBox.Show("Left");
             break;
         default:
             break;
      }
   }
}

NEXT EDIT (after next comments) - better implementation and example of disabling up, down gestures:

If you don't want to activate for up (little left)/down (little right), you have to describe conditions yourself. Be aware that there is a very little chance (if any) that user will move his finger only left/right/up/down - so you have to include some margin. There are many solutions for that, you have to try and play with it, the simpliest solutions just compare deltaX and deltaY of gesture:

public MainPage()
{
   InitializeComponent();
   TouchPanel.EnabledGestures = GestureType.Flick | GestureType.HorizontalDrag;
   Touch.FrameReported += Touch_FrameReported;
}

TouchPoint firstPoint;
private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
   TouchPoint mainTouch = e.GetPrimaryTouchPoint(ContentPanel);

   if (mainTouch.Action == TouchAction.Down) firstPoint = mainTouch;
   else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)
   {
       double deltaX = mainTouch.Position.X - firstPoint.Position.X;
       double deltaY = mainTouch.Position.Y - firstPoint.Position.Y;
       if (Math.Abs(deltaX) > 2 * Math.Abs(deltaY))
       {
           if (deltaX < 0) MessageBox.Show("Right.");
           if (deltaX > 0) MessageBox.Show("Left.");
       }
    }
}

Problem

I am creating a wp8 application for showing some html files in a browser and the structure is ``` <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Name="PageNavigationMenu"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Button Height="70" Content="P" Grid.Column="0" VerticalContentAlignment="Center" Click="btnPrevious_Click" x:Name="btnPrevious" ></Button> <Button Height="70" Content="N" Grid.Column="1" VerticalAlignment="Center" Click="btnNext_Click" x:Name="btnNext"></Button> </Grid> <Grid Grid.Row="1" Hold="Grid_Hold"> <phone:WebBrowser IsScriptEnabled="True" x:Name="mainBrowserControl"> </phone:WebBrowser> </Grid> </Grid> ``` Now i am using a previous button and next button to change the content in browser . I want to do it using the Swipe Left / Swipe Right on browser . Like if user Swipe left direction , borswer content should be loaded with previous page and Swipe right results to load next page. So what are the events i have to listen to implement swipe feature

Original source

Related problems