SwipeTrap

Swipe or drag inside the container to see the live gesture data: the start point of the gesture, the distance moved on each axis (DiffX/DiffY), the velocity in pixels per millisecond, how long the gesture has been running (Duration), and the type of the pointer performing it (mouse, touch or pen). When the swipe passes the trigger point (a quarter of the container size by default), releasing it raises the OnTrigger event with the dominant swipe direction. A gesture the browser or the system takes over ends with IsCanceled set on the OnEnd event instead. Note the cursor while dragging: it comes from the bit-stp-swp class the trap carries for as long as it holds the gesture.

Trigger sets how far a swipe must travel before releasing it raises OnTrigger. A value below 1 is a fraction of the container measured per axis (0.5 means half of its width horizontally and half of its height vertically), so the gesture scales with the element; a value of 1 or above is an absolute distance in pixels, which keeps the same feel whatever the container size. Both boxes below are the same size: the first needs half of it, the second only 80 pixels.

TriggerVelocity recognizes flicks: a release faster than the given speed (here 0.5 pixels per millisecond) triggers even when the distance never reached the Trigger point, which is set deliberately far away at 0.9 of the container. The velocity is measured over the last moments of the gesture rather than averaged over all of it, so a swipe that drags slowly and then flicks still counts, while one that stops before release does not. Try a quick flick versus a slow drag:

OrientationLock restricts the trap to one axis. A Horizontal or Vertical lock is fixed for the whole gesture, whichever direction it starts in: the locked axis is the only one trapped (its default browser behavior, like scrolling, is prevented via a matching touch-action) and the only one reported, while the free axis is left to the browser and always reads zero. So a gesture along the free axis scrolls the page without moving the trap, and one that turns onto the locked axis is trapped from that moment on. Auto instead locks to whichever axis the gesture moves along first, trapping that one and zeroing the other for the rest of the gesture. Try swiping horizontally, vertically and diagonally on each container:

Threshold is the distance a gesture must cover before the trap takes it over: below it the movement is still reported but nothing is trapped, which is what decides the axis of a diagonal swipe and keeps a small wobble from becoming one. Throttle limits how often OnMove reaches .NET, in milliseconds, which is worth setting when the handler does real work on every move; OnStart, OnEnd and OnTrigger are never throttled, so the final distance always arrives in full.

Control which gestures the trap responds to. TouchOnly ignores mouse drags, trapping only touch and pen swipes (handy when mouse users get buttons instead of gestures). SkipSelector ignores gestures that start on matching descendants, keeping nested interactive elements like inputs and sliders usable inside the trap:

A swipe-to-close panel: the OnMove event drags the panel with the finger (or mouse) so the surface follows the gesture, OnEnd snaps it back when the swipe was too short, and OnTrigger closes it once the swipe passes the trigger point. Open the panel and try to close it by swiping it to the left:

Swipe-to-delete list rows, combining an absolute Trigger (60px), a Threshold (10px) that lets a small wobble scroll the list instead of opening a row, and a horizontal OrientationLock that leaves vertical scrolling to the browser while trapping only intentional horizontal swipes. Swipe each row to the right to trigger the delete action:

An illustrative example of integrating this component into a straightforward mobile application: one trap drives two edge panels, using the move data for follow-the-finger dragging and the trigger direction for opening and closing each panel.