Detect Simple Touch Gestures

Elmo picture Elmo · Sep 4, 2012 · Viewed 16.2k times · Source

Can anyone explain on how to detect simple touch gestures in a WinRT app? I tried using the GestureRecognizer class but it didn't work:

    public MainPage()
    {
        this.InitializeComponent();
        Windows.UI.Input.GestureRecognizer gr = new Windows.UI.Input.GestureRecognizer();
        gr.CrossSliding += gr_CrossSliding;
        gr.Dragging += gr_Dragging;
        gr.Holding += gr_Holding;
        gr.ManipulationCompleted += gr_ManipulationCompleted;
        gr.ManipulationInertiaStarting += gr_ManipulationInertiaStarting;
        gr.ManipulationStarted += gr_ManipulationStarted;
        gr.ManipulationUpdated += gr_ManipulationUpdated;
        gr.RightTapped += gr_RightTapped;
        gr.Tapped += gr_Tapped;
        gr.GestureSettings = Windows.UI.Input.GestureSettings.ManipulationRotate | Windows.UI.Input.GestureSettings.ManipulationTranslateX | Windows.UI.Input.GestureSettings.ManipulationTranslateY |
        Windows.UI.Input.GestureSettings.ManipulationScale | Windows.UI.Input.GestureSettings.ManipulationRotateInertia | Windows.UI.Input.GestureSettings.ManipulationScaleInertia |
        Windows.UI.Input.GestureSettings.ManipulationTranslateInertia | Windows.UI.Input.GestureSettings.Tap;

    }

    void gr_Tapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.TappedEventArgs args)
    {
        Debug.WriteLine("gr_Tapped");
    }
    void gr_RightTapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.RightTappedEventArgs args)
    {
        Debug.WriteLine("gr_RightTapped");
    }
    void gr_Holding(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.HoldingEventArgs args)
    {
        Debug.WriteLine("gr_Holding");
    }
    void gr_Dragging(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.DraggingEventArgs args)
    {
        Debug.WriteLine("gr_Dragging");
    }
    void gr_CrossSliding(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.CrossSlidingEventArgs args)
    {
        Debug.WriteLine("gr_CrossSliding");
    }
    void gr_ManipulationUpdated(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.ManipulationUpdatedEventArgs args)
    {
        Debug.WriteLine("gr_ManipulationUpdated");
    }
    void gr_ManipulationStarted(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.ManipulationStartedEventArgs args)
    {
        Debug.WriteLine("gr_ManipulationStarted");
    }
    void gr_ManipulationCompleted(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.ManipulationCompletedEventArgs args)
    {
        Debug.WriteLine("gr_ManipulationCompleted");
    }
    void gr_ManipulationInertiaStarting(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.ManipulationInertiaStartingEventArgs args)
    {
        Debug.WriteLine("gr_ManipulationInertiaStarting");
    }

Answer

Mark Hall picture Mark Hall · Sep 8, 2012

If you will notice the MainPage Class has its own Manipulation Events which you can use without creating a seperate GestureRecognizer. You can enable it by setting this.ManipulationMode to ManipulationModes.All. This will allow you to see responses on the MainPages Tapped, RightTapped, ManipulationStarting, ManipulationStarted, ManipulationDelta and ManipulationCompleted Events.

As far as getting the GestureRecongnizer to work according to this Blog and this MSDN Forum Posting you will need to handle the MainPage's PointerMoved, PointerReleased and PointerPressed events like so.

Windows.UI.Input.GestureRecognizer gr = new Windows.UI.Input.GestureRecognizer();  

public MainPage()
{
    this.InitializeComponent();
    this.PointerPressed += MainPage_PointerPressed;
    this.PointerMoved += MainPage_PointerMoved;
    this.PointerReleased += MainPage_PointerReleased;
    gr.CrossSliding += gr_CrossSliding;    
    gr.Dragging += gr_Dragging;    
    gr.Holding += gr_Holding;    
    gr.ManipulationCompleted += gr_ManipulationCompleted;    
    gr.ManipulationInertiaStarting += gr_ManipulationInertiaStarting;    
    gr.ManipulationStarted += gr_ManipulationStarted;    
    gr.ManipulationUpdated += gr_ManipulationUpdated;    
    gr.RightTapped += gr_RightTapped;    
    gr.Tapped += gr_Tapped;    
    gr.GestureSettings = Windows.UI.Input.GestureSettings.ManipulationRotate | Windows.UI.Input.GestureSettings.ManipulationTranslateX | Windows.UI.Input.GestureSettings.ManipulationTranslateY |    
    Windows.UI.Input.GestureSettings.ManipulationScale | Windows.UI.Input.GestureSettings.ManipulationRotateInertia | Windows.UI.Input.GestureSettings.ManipulationScaleInertia |    
    Windows.UI.Input.GestureSettings.ManipulationTranslateInertia | Windows.UI.Input.GestureSettings.Tap; 
}

void MainPage_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    var ps = e.GetIntermediatePoints(null);
    if (ps != null && ps.Count > 0)
    {
        gr.ProcessUpEvent(ps[0]);
        e.Handled = true;
        gr.CompleteGesture();
    }
}

void MainPage_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    gr.ProcessMoveEvents(e.GetIntermediatePoints(null));
    e.Handled = true;
}

void MainPage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    var ps = e.GetIntermediatePoints(null);
    if (ps != null && ps.Count > 0)
    {
        gr.ProcessDownEvent(ps[0]);
        e.Handled = true;
    }
}

According to the Documentation you need to enable the CrossSlide Event by adding it to your GestureRecongnizer and setting up the CrossSlideThresholds and Direction. From last link:

CrossSlide must be set in the GestureSettings property to support CrossSliding. CrossSliding distance thresholds are disabled by default. Use CrossSlideThresholds to set these values.

example:

Windows.UI.Input.CrossSlideThresholds cst = new Windows.UI.Input.CrossSlideThresholds();
cst.SelectionStart = 2;
cst.SpeedBumpStart = 3;
cst.SpeedBumpEnd = 4;
cst.RearrangeStart = 5;
gr.CrossSlideHorizontally = true;
gr.CrossSlideThresholds = cst;
gr.CrossSliding += gr_CrossSliding;

and make sure it is added to your GestureSettings

gr.GestureSettings = Windows.UI.Input.GestureSettings.ManipulationRotate | Windows.UI.Input.GestureSettings.ManipulationTranslateX |
                     Windows.UI.Input.GestureSettings.ManipulationScale | Windows.UI.Input.GestureSettings.ManipulationRotateInertia |
                     Windows.UI.Input.GestureSettings.ManipulationScaleInertia | Windows.UI.Input.GestureSettings.ManipulationTranslateInertia |
                     Windows.UI.Input.GestureSettings.Tap | Windows.UI.Input.GestureSettings.CrossSlide;