Triggers are the main tools for interaction response, transitions and animation in Fuse.

Triggers are objects that can be used in UX markup that detect events, gestures, other user input or changes of state in your app, and performs animations and actions in response.

When a trigger is activated, it performs a timeline of actions based on what objects you put inside the trigger tag.

Triggers can contain the following types of child-nodes in UX Markup:

  • Animators that animate properties, transforms or effects when the trigger is active
  • Actions that perform actions with permanent effects, or call back to JavaScript when the trigger activates.
  • Nodes (visuals, behaviors, other triggers) that are added to the parent visual while the trigger is active.
  • Resources (nodes marked with ux:Key="your_key"), which overrides {Resource your_key} for the parent scope while the trigger is active.

See the remarks section at the bottom of this page for more information

Available triggers in Fuse

Android ux

Triggers if run on an Android device

Completed ux

Pulses when the busy status of a node is cleared.

DragEnded ux

a Trigger that pulse when drag has been ended by Draggable Element

DragStarted ux

a Trigger that pulse when drag has been started by Draggable Element

Dropped ux

a Trigger that pulse when draggable element has been dropped to the target or target element has received draggable element

EnterHorizontal uno

This is an internal class used in Navigation. Do not use it. It is only exposed in the API due to a limitation in our toolset.

EnterVertical uno

This is an internal class used in Navigation. Do not use it. It is only exposed in the API due to a limitation in our toolset.

ExitHorizontal uno

This is an internal class used in Navigation. Do not use it. It is only exposed in the API due to a limitation in our toolset.

ExitVertical uno

This is an internal class used in Navigation. Do not use it. It is only exposed in the API due to a limitation in our toolset.

iOS ux

Triggers if run on an iOS device

LongPressed ux

Triggers when a pointer is held down for a period of time.

Pressed ux

Triggers when a pointer is pressed on a visual. As opposed to Clicked or Tapped, this trigger triggers immediately when a pointer is pressed on the visual. It does not wait for a pointer release or minimum amount of press time.

PullToReload ux

Helps you create a "pull to reload" interaction with a ScrollView.

RangeAnimation ux

Animates using a value clamped between a minimum and a maximum as progress.

Scrolled ux

Triggers when the ScrollView is scrolled to within a specified region.

SupportBiometric ux

Triggers if device has biometric sensor and user has already configure it

Swiped ux

Pulse trigger that activates when a swipe has occurred.

SwipingAnimation ux

A trigger that maps the progress of a SwipeGesture to a series of animations.

Transition ux

Controls the animations for page-to-page transitions in a Navigator.

WhileBusy ux

A trigger that is active whenever a sibling or parent is marked as busy.

WhileCount ux

Active when the number of items in a collection fulfills some criteria.

WhileDisabled ux

Active while the IsEnabled property of its containing element is False.

WhileDraggingOver ux

a Trigger that activate when Draggable Element is intersected with the Target element

WhileDroppingBy ux

a Trigger that activate when the element that has WhileDroppedBy trigger is intersected with Source element (Draggable Element)

WhileEmpty ux

Active when the number of items in a collection is 0.

WhileEnabled ux

Active while the IsEnabled property of its containing element is True.

WhileFalse ux

A trigger that is active while its Value property is false.

WhileFloat ux

Active when the float Value fulfills some criteria.

WhileHovering ux

Active while a pointer is within the bounds of its containing element.

WhileKeyboardVisible ux

Active when on-screen controls are visible, such as the keyboard. This excludes the fixed controls, such as navigation and home button, on some devices.

WhileLoading ux

Active while a resource in the surrounding context is loading.

WhileNavigating ux

Active while the user is currently navigating between two pages.

WhileNotEmpty ux

Active when the number of items in a collection is greater than 0.

WhilePageActive ux

Is active while a page, optionally matching given criteria, is active in the navigation.

WhilePressed ux

Active while at least one pointer is pressed on a visual.

WhileScrollSnapping ux

Active while an element is positioned within the snapping area.

<ScrollView LayoutMode="PreserveVisual">
    <StackPanel>
        <Each Count="100" Reuse="Frame" >
            <Panel ux:Name="panel" Color="#AAA">
                <Text ux:Name="text" Value="Data-{= index() }"/> <a href="../../fuse/triggers/whilescrollsnapping.html" class="table-of-contents-item-has-more" title="There is more information available for this entry"><i class="fa fa-ellipsis-h"></i></a>
WhileString ux

Activate when the condition on the string value is true

WhileTrue ux

A trigger that is active while its Value property is true.

WhileVisibleInScrollView ux

Active while an element is positioned within the visible area of the ScrollView.

<ScrollView>
    <StackPanel>
        <Each Items="{images}">
            <DockPanel Height="100">
                <Image Url="{source}" MemoryPolicy="UnloadUnused" Dock="Left"
                    Visibility="Hidden" ux:Name="theImage"/>
                <Text Value="{description}" TextWrapping="Wrap"/> <a href="../../fuse/triggers/whilevisibleinscrollview.html" class="table-of-contents-item-has-more" title="There is more information available for this entry"><i class="fa fa-ellipsis-h"></i></a>
WhileWindowSize ux

Active while the size of the app's viewport fulfills some given constraints.

With ux

Represents a scope in which the current data context is narrowed down.

Location

Namespace
Fuse.Triggers
Package
Fuse.Triggers 2.9.1
Show Uno properties and methods

Interface of Trigger

BackwardAnimation : TriggerAnimation ux

Specifies an explicit backward animation instead of using the implied backward animation of the animators involved. Be aware that actions are not part of the animation.

CrossFadeDuration : double ux

If there is a transition between forward/backward playback and two timeilnes are being used (implicit or explicit) this specifies the cross-fade time.

Deactivate uno

Deactivates the trigger (target progress of 0).

Pulse uno

Plays the trigger to progress 1 then back to 0.

RequireLayout(Visual) uno

Indicates the trigger is bound to the layout of a visual. This will keep the trigger in Bypass mode until after the first layout of the element is obtained. This is required since layout does not happen in the same root grouping/update phase as the creation of the element, yet not having a layout should qualify as part of the rooting period.

Inherited from NodeGroupBase

Nodes : IList of Node ux

Nodes to add to the Parent when this trigger is any non-deactivated state (Progress > 0)

Inherited from 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.

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.

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.

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.

Inherited from PropertyObject

Inherited from object

Implemented Interfaces

IScriptObject uno

Interface for objects that can have a script engine representation

Remarks

Rest state and deviation

The default layout and configuration of UX markup elements is called the rest state. Triggers define deviations from this rest state.

Each trigger knows how to "un-apply" its own animation to return to the rest state, even if interrupted mid-animation. This is great because it means animation is completely separated from the logical state of your program, greatly reducing the complexity of dealing with combined animation on multiple devices, screen sizes, with real data and real user input.

Pulse triggers

Pulse triggers detect one-off events such as Clicked or Tapped, and play their timeline once. A typical use case is to do a Callback to JavaScript:

<Panel Color="Blue">
    <Tapped>
        <Callback Handler="{panelTapped}" />
    </Tapped>
</Panel>

Pulse triggers typically have names that are past-tense verbs.

While-triggers

Triggers with names starting with While... are sustained triggers that activate under certain conditions, and remain active until that condition goes away.

For example WhilePressed activates while the containing visual is pressed by a pointer, and deactivates when the pointer is released.

<Panel Color="Red" ux:Name="panel">
    <WhilePressed>
        <Scale Factor="0.9" Duration="0.2" Easing="BackOut" />
        <Change panel.Color="Blue" Delay="0.2" Duration="0.2" Easing="CubicOut" />
    </WhilePressed>
</Panel>

The containing timeline starts plaing from the beginning when a pointer is pressed, and sustains the end state of the animation while the pointer remains pressed. If the pointer is released in the middle of the animation, the progress is cancelled and recedes naturally from its progress at the time of the release.

Animation-triggers

Triggers with names ending in ...Animation are specialized for certain controls. They map the logical progress of the control to the progress of the animation.

For example, the progress of a ScrollingAnimation is tied to the relative scroll position of a ScrollView. When scrolled to the start of the progress is 0, and when scrolled to the end the progress is 1.

The progress here "seeks" to the target value. For example, a sudden jump in the ScrollView position will result in a sudden jump in the trigger animations. This ensures the trigger progress is tied precisely to the user input.

The Animator.Delay and Animator.Duration settings of animators are respected in ...Animation triggers, but only as relative values (they are normalized over the range of 0...1 to match the progress).

Bypass

When a trigger is rooted already in its active state it executes in "bypass" mode. This will not trigger any pulse actions, and it will skip over animations, simply putting them in their final state.

This default can be override by specifying Byass="Never" on a trigger.

Various actions and functions also offer the option to use a bypass mode in the transition. These work in the same way by skipping animations and not triggering and pulse actions.