Separate two gestures from being executed at the same time in Windows Store App

Question

I have a real problem with gestures manipulation in Windows 8.1 store apps, I'm building an application where I'm implementing two gestures :

1. Pinch To Zoom.
2. Swiping.

For Pinch To Zoom I use ManipulationStarted -> ManipulationDelta -> ManipulationCompleted
For Swiping I use PointerPressed -> PointerMoved -> PointerReleased

The problem is that when ManipulationStarted fires when attempting to do a PinchToZoom operation, the PointerPressed events fires too ! and cuz the other gesture to perform too !

I can figure out the best manner to separate these to gestures, what's the best practice to do so, I should be missing something about the gestures mechanism.

Answer 1

You can use the OnManipulationDelta method to work with zoom and swiping.

XAML

<Canvas >
  <Image  ManipulationMode='All'
          Source='Assets/grapes.png'
          Canvas.Top='79'
          Canvas.Left='107'>
    <Image.RenderTransform>
       <CompositeTransform  />
    </Image.RenderTransform>
  </Image>

  <Image  ManipulationMode='All'
          Source='Assets/grapesBW.png'
          Canvas.Top='79'
          Canvas.Left='461'>
    <Image.RenderTransform>
    <CompositeTransform />
   </Image.RenderTransform>
</Image>
<Rectangle Fill='#7FFFAAAB'
           Height='100'
           Canvas.Left='107'
           Stroke='Black'
           Canvas.Top='335'
           Width='300' />
<Rectangle Fill='#7F738D01'
           Height='100'
           Canvas.Left='461'
           Stroke='Black'
           Canvas.Top='335'
           Width='300' />
</Canvas>

Code

// override the OnManipulationDelta method, instead of setting up event procedures

protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs args)
{
    // All the Image elements have ManipulationMode = All enabled
    // The other elements on the page have manipulations disabled
    // therefore the OriginalSource can only be an image, no need to test for null

    var currentImage = args.OriginalSource as Image;
    var transform = currentImage.RenderTransform as CompositeTransform;

    transform.TranslateX += args.Delta.Translation.X;
    transform.TranslateY += args.Delta.Translation.Y;

    transform.ScaleX *= args.Delta.Scale;
    transform.ScaleY *= args.Delta.Scale;

    transform.Rotation += args.Delta.Rotation;

base.OnManipulationDelta(args);

}

Answer 2

Since you didn't provide code, I'm guessing how you implemented your Manipulation events.

If you are using the GestureRecognizer class it can also track swipes with the Dragging event handler.

GestureRecognizer knows what type of gesture is currently being expressed by the user.