Handling Swipe Guesture in Windows 8 Grid

Question

I am trying to implement a custom control which consists of a grid with some canvas elements as children , When a swipe action is made on the grid , I am intended to preform some operation with the canvas elements . I am unable to handle the swipe for the grid , i have posted the same in the msdn - win8 Dev forum

Solution 1

I was in the same boat as you guys, since there was no samples out there on how this was done, but after perusing and scrutinizing the MSDN documentation on how a swipe gesture is implemented on a Windows 8 Store app using C#, this is what i came up with (and it works for my app which requires swiping up / down / left / right):

First of all, instead of the GestureRecognizer, the Manipulation events need to be used, so on the grid that you want to handle the swiping (lets' say you make it so that it takes the whole screen so it interprets the gestures) do the following:

I called my grid swipingSurface and i'm handling manipulation modes for both the Y-axis and X-axis:

swipingSurface.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;

Then wire up the manipulation events that you want to be notified, in my case i just want to know then the manipulation started and when it ended:

swipingSurface.ManipulationStarted += OnManipulationStarted;
swipingSurface.ManipulationCompleted += OnManipulationCompleted;

Do whatever you want on your manipulation started, such as getting the initial point if you want. But the actual trick is on the ManipulationCompleted event, in which you need to get the Velocities resulting from your gesture, as follows:

public void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e) {
    var velocities = e.Velocities;      
}

The ManipulationCompletedEventArgs Velocities property will bring back a struct of type ManipulationVelocities, which contains other properties inside:

-Angular: The rotational velocity in degrees per millisecond.

-Expansion: The expansion, or scaling, velocity in DIPs per millisecond.

-Linear: The straight line velocity in DIPs per millisecond.

I'm actually looking at the Linear velocity, which is a Point that contains X and Y values indicating the direction in which the gesture was performed; for example, if the swipe was upward, you will notice that the Y value is positive, and if its down the Y value is negative; the same goes for the X value, if the swipe is left, the X values are negative and if the swipe is right, the X values are positive, so you can play around with those values and check your swiping direction, final points, etc.

Hope this helps.

Solution 2

You could check out SwipeHintThemeAnimation that uses GestureRecognizer to hook up to a Rectangle control or modify it to use your Grid control, see the documentation.

Solution 3

You could try setting ManipulationMode on your swipe-able control and handling the Manipulation~ events. Note that some controls might stop bubbling of UI events, so if you say put your control inside of a Button or a ScrollViewer - the events might not work.