How to recognize a swipe gesture in my Metro style app?

Question

Hello all. I was not able to find any example on how to recognize a swipe gesture in HTML/JS Metro style app.

I've checked GestureRecognizer class reference and its links, the Guidelines for cross-slide (and anyway I do NOT want to cross slide, I just want to swipe left and right on a page), this Dev Center question still unanswered, the "Using the Animation Library animations sample" app sample (especially "swipeReveal.js"). All with no luck.

As said, I'd just like to be able to add swipe gesture recognizing to a single page, so to figure out when the user is swiping left or right, and the do something with that.

Has anyone accomplished that? Any help on how to do it? Thanks all

Answer 1

This sample uses the gesture recognizer (what you want to use):

Input: manipulations and gestures using JavaScript sample

You can choose what gestures you want to trap:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturesettings.aspx

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hello. Thanks for your reply.

I am aware of that sample app too, but it is not at all clear to me how could I use that code in order to recognize a swipe gesture. There the gestureRecognizer is setup to detect several input movements, but I cannot find anything related to recognizing swipe. Could you please point me to some part of that app where it does that?

I'm also aware of the gestureSettings property. I checked all the values, and I played with the drag value and the dragging event handler, but it does not seem to fit the case for swipe. Do you know of any particular value I should set for that property, in order to recognize swiping?

Thanks again

Cheers

Answer 3

Hi Gi,

You can choose what gestures you want to trap.  In your case you could use drag, swipe, manipulationTranslateX, rails... I would recommend drag or swipe unless you need super fine control:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturesettings.aspx

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

I do not need super fine control. I just need to detect when the user has made a swipe in left direction, or in right direction, within the whole page.

From those you suggested, it seems to me that "manipulationTranslateRailsX" is the closest bet regarding the settings.

Please correct me if I am wrong, are the following steps correct?

- create a gestureRecognizer, and set it up with one or more of those settings.

- add event listeners for msPointerUp/Down/... and in those event handlers "feed" the recognizer calling processXxxEvent

- add event listerners to the recognizer, so that my code can be called when a manipulation starts, ends, ...

- when the manipulation starts/ ends/ ... try to figure out that a swipe has just happened.

Answer 5

Hi GiUmaTo.

I'm experiencing exatly the same problem. I just want to detect when a swipe occurs on the entire page, and trigger an event.

There are not samples that do this.

Did you find a solution?

Thanks

Answer 6

nope. I also started another thread, based on suggestions on the current thread. But I was not able to find a decent solution myself, nor to grab really applicable suggestions here.

I can only tell you: if - by chance - the page somehow resembles to showing an image from a gallery, it might be worth trying to insert a  FlipView controller and customize it. But I've not tryed this way yet.

Answer 7

Yes, I have already used this control, but in my specific case, it won't work.

I detected swipe, if help, see http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/1e2f91fd-0d97-4103-805a-f6056fe08f45

It seems to be necessary to add a kind of feeder, that feed GestureRecognizer while mouse moves.

But I agreed with you, It could be a easier way to do that.

thanks

Answer 8

To detect to the entire window, the follow code worked for me:

window.addEventListener('MSPointerDown', this.processDown, false);
window.addEventListener('MSPointerMove', this.processMove, false);
window.addEventListener('MSPointerUp', this.processUp, false);
window.addEventListener('MSPointerCancel', this.processUp, false);

Answer 9

Hello geovanneb

thanks for your hints. I think I've applied the same stuff in the past days, but then I ran into another problem. You can see details in this other thread if you feel like: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/200b4ef0-75ec-4818-90de-7d45c21d0039 .

Basically the problem is that if I put a "event sink" container that grabs all MSPointer*** events, then no other control on the screen will receive events.

Instead I'd like to recognize swipe gestures, but still let other controls grab tap events and stuff like that. Not sure if this is somehow possible. Probably I'll drop this scenario and find some other way.

Cheers