Handle Swipe Up, Swipe Down, Swipe Left & Swipe Right Gestures in a WinRT app

Question

I have the following code:

public MainPage()
{
    this.InitializeComponent();
    this.ManipulationStarting += MainPage_ManipulationStarting;
    this.ManipulationStarted += MainPage_ManipulationStarted;
    this.ManipulationInertiaStarting += MainPage_ManipulationInertiaStarting;
    this.ManipulationDelta += MainPage_ManipulationDelta;
    this.ManipulationCompleted += MainPage_ManipulationCompleted;
}
void MainPage_ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
    Debug.WriteLine("MainPage_ManipulationStarting");
}
void MainPage_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    Debug.WriteLine("MainPage_ManipulationStarted");
}
void MainPage_ManipulationInertiaStarting(object sender, ManipulationInertiaStartingRoutedEventArgs e)
{
    Debug.WriteLine("MainPage_ManipulationInertiaStarting");
}
void MainPage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Debug.WriteLine("MainPage_ManipulationDelta");
}
void MainPage_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    Debug.WriteLine("MainPage_ManipulationCompleted");
}

But I have no idea on how to use the Manipulation events. Can you anyone describe how to handle the gestures swipe up, down, left and right?

Solution 1

Manipulation events provide you the translation values. Manipulation Delta will fire continuously until your manipulation completed along with inertia. In this event check whether the move is inertial, (a normal move shouldn't be considered as swipe) and detect the difference between initial and current position.

Once it reached the threshold, fire the swipe up/down/left/right event. And stop the manipulation immediately to avoid firing the same event again and again.

Following code will help you,

    private Point initialpoint;

    private void Grid_ManipulationStarted_1(object sender, ManipulationStartedRoutedEventArgs e)
    {
        initialpoint = e.Position;
    }

    private void Grid_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        if (e.IsInertial)
        {
            Point currentpoint = e.Position;
            if (currentpoint.X - initialpoint.X >= 500)//500 is the threshold value, where you want to trigger the swipe right event
            {
                System.Diagnostics.Debug.WriteLine("Swipe Right");
                e.Complete();
            }
        }
    }

Solution 2

I tried the answer by XAML lover, but it wasn't that accurate for me (IsIntertial always came back false for me). I implemented something different (I replied to a previous post of a related topic here Handling Swipe Guesture in Windows 8 Grid) for anyone who wanted to try something different.

Solution 3

Take a look at GestureRecognizer.CrossSliding event. There is also EdgeGesture class, and samples: EdgeGesture sample, gestures sample.

Comments

[Jerry Nixon]

There's no need for multiple events. Just use e.Cumulative.Translation.X.

[simonalexander2005]

I'm finding that e.IsInertial is always coming back false - any ideas?