Swipe Gestures SwipeGesture Class

Recognizes a swipe (the movement of a pointer in a given direction).

Basic usage

A SwipeGesture must be attached to an Element, and will begin detecting swipes when the pointer is pressed down on that element. Attaching a SwipeGesture to an Element is simply adding it as a child:

<Panel>
    <SwipeGesture ux:Name="swipe" Direction="Right" Length="200" />
</Panel>

The snippet above will recognize swipe gestures moving from left to right, over a distance of 200 points.

However, this isn't doing anything useful yet. Let's add a trigger!

<Panel Width="100" Height="100" Background="Black">
    <SwipeGesture ux:Name="swipe" Direction="Right" Length="200" />
    <SwipingAnimation Source="swipe">
        <Move X="200" />
    </SwipingAnimation>
</Panel>

We've now added a SwipingAnimation, which will map the progress of our swipe gesture onto a series of animations. In this case, we are moving the panel over the same distance as the Length of our SwipeGesture, resulting in the panel moving along with the pointer.

Note that we've referenced our SwipeGesture via the Source property of SwipingAnimation. This is because it is possible to have multiple swipe gestures on a single element, so it must be referenced explicitly. All swipe-related triggers share this property.

We also want to respond when the swipe has completed, which is achieved using the Swiped trigger. Let's extend our previous example a bit.

<Panel Width="100" Height="100" Background="Black">
    <SwipeGesture ux:Name="swipe" Direction="Right" Length="200" />
    <SwipingAnimation Source="swipe">
        <Move X="200" />
    </SwipingAnimation>

    <Swiped>
        <DebugAction Message="Swiped!" />
    </Swiped>
</Panel>

For illustrative purposes, we are using DebugAction to log a message to the console when the swipe has completed.

Swipe types

SwipeGesture is designed to handle multiple scenarios, and can have one of three types, specified via the Type property.

The type of a SwipeGesture determines its behavior, and below we'll explain each one.

Simple

Simple is the default SwipeType, and thus the one we have been using so far in this article.

When using this type, swipes are treated as one-off events, and swipes will complete once the pointer is released.

Auto

Auto is almost identical to Simple, however swipes complete once the user has swiped over the entire distance of the SwipeGesture, without the user needing to release the pointer. This allows multiple SwipeGestures to be triggered in sequence without releasing the pointer.

Active

Type="Active" makes swipes toggle between an active/inactive state. Swiping in the Direction of the SwipeGesture will transition to the active state, while swiping in the opposite direction will transition to the inactive state.

We can alter the state of an Active-type SwipeGesture using SetSwipeActive and/or ToggleSwipeActive.

Reacting to state transitions

When using the Active type, we can optionally configure the Swiped trigger to respond to only activation or only deactivation.

<Swiped How="ToActive">
<Swiped How="ToInactive">

In addition, the WhileSwipeActive trigger will be active while its source SwipeGesture is an Active-type SwipeGesture, and has been swiped to its active state.

Edge

Instead of specifying a Direction, we may provide an Edge. This will make the SwipeGesture detect swipes originating at a given edge of its parent element.

We can also customize the size of the edge area using the HitSize property. It accepts a single number, which represents the maximum distance from the edge (in points) that swipes can begin at.

Length based on element size

Instead of specifying a fixed Length for the gesture, we can supply an Element to be measured via the LengthNode property.

This is a powerful feature, as it allows us to create swipe-based controls that work regardless of their size.

Below is an example of a size-independent switch control implemented using SwipeGesture.

<Panel Height="50">
    <Circle Width="50" Height="50" Color="#000" Alignment="Left">
        <SwipeGesture ux:Name="swipe" LengthNode="track" Direction="Right" Type="Active" />
        <SwipingAnimation Source="swipe">
            <Move X="1" RelativeTo="Size" RelativeNode="track" />
        </SwipingAnimation>
    </Circle>

    <Rectangle ux:Name="track" Height="15" Color="#0003" Margin="25,0" CornerRadius="15" />
</Panel>

Location

Namespace: Fuse.Gestures
Package: Fuse.Gestures 2.9.1

Show Uno properties and methods

Interface of SwipeGesture

Direction : SwipeDirection ux

The direction of movement to detect swipe gestures for.

Edge : Edge ux

If specified, this makes the swipe gesture activate from the edge of the parent element.

HitSize : float ux

For edge SwipeGestures, HitSize determines the maximum distance from the edge (in points) that swipes can begin at.

IsActive : bool ux

true if the SwipeGesture has Type="Active" and has been swiped to the active state.

IsEnabled : bool ux

Length : float ux

The total distance that must be covered in order for the swipe to complete.

LengthNode : Element ux

If specified, the SwipeGesture will measure the given element to determine its Length.

SetIsActive(bool, IPropertyListener) uno

SwipeGesture Constructor uno

Threshold : float2 ux

The relative distance that must be travelled before the gesture automatically completes.

Type : SwipeType ux

The type of swipe to detect. See SwipeType.

Inherited from Node

Add(Binding) uno

Bindings : IList of Binding ux

The list of bindings belonging to this node.

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindByType<T> : T uno

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

GetNearestAncestorOfType<T> : T uno

Insert(int, Binding) uno

IsRootingCompleted : bool uno

Whether rooting for this node is completed. Returns false if unrooting has started.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

NextSibling<T> : T uno

Returns the next sibling node of the given type.

OnDataChanged(string, object) uno

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.