Recognizes a swipe (the movement of a pointer in a given direction).
<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
Sourceproperty 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.
SwipeGesture is designed to handle multiple scenarios,
and can have one of three types, specified via the
The type of a SwipeGesture determines its behavior, and below we'll explain each one.
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 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.
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.
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">
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
It accepts a single number, which represents the maximum distance from the edge (in points) that swipes can
Length based on element size
Instead of specifying a fixed
Length for the gesture,
we can supply an Element to be measured via the
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>
- Fuse.Gestures 2.2.1
Interface of SwipeGesture
For edge SwipeGestures,
HitSize determines the maximum distance
from the edge (in points) that swipes can begin at.
true if the SwipeGesture has
Type="Active" and has been swiped to the active state.
LengthNode : Element ux
The type of swipe to detect. See SwipeType.
Inherited from Node
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
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
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.
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.
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.
The parent Visual of this node. Will return null if the node is not rooted.
PreviousSibling<T> : T uno
Returns the next sibling node of the given type.
Properties : Properties uno
A linked list holding data for extrinsic properties.
Remove(Binding) : bool uno
SourceFileName : string ux
SourceLineNumber : int ux
SubtreeToString : string uno
Inherited from PropertyObject
Inherited from object
Equals(object) : bool uno
GetHashCode : int uno
Attached UX Attributes
Interface for objects that can have a script engine representation
An element may have multiple swipe gestures, and will behave correctly as long as they point in different directions.
Take a look at this sample project for an in-depth example.