Triggers and animation Trigger Class
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
ActivatingAnimation ux
AddingAnimation ux
Android ux
BlockInputWhileNavigating uno
Clicked ux
Triggers when a pointer is clicked on a Visual.
Completed ux
ContainingText ux
DEPRECATED: Use WhileContainsText instead
DarkTheme uno
Deactivated ux
DeactivatingAnimation ux
DefaultTrigger uno
Deselected ux
Fired when the Selectable is removed from the Selection.
DoubleClicked ux
Triggers when a pointer is double-clicked on a Visual.
DoubleTapped ux
Triggers when a pointer is double-tapped on a Visual.
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
EdgeSwipeAnimation ux
DEPRECATED: Use SwipeGesture
with EdgeNavigator
instead
EnteredForceField ux
EnterHorizontal uno
EnteringAnimation ux
EnterVertical uno
ExitedForceField ux
ExitHorizontal uno
ExitingAnimation ux
ExitVertical uno
FallbackTheme uno
HoldPress ux
Triggers when a pointer is pressed on a Visual.
InForceFieldAnimation ux
InteractionCompleted ux
iOS ux
LayoutAnimation ux
LightTheme uno
LongPressed ux
NavEnterHorizontal uno
NavExitHorizontal uno
NavRemoveHorizontal uno
OnBackButton ux
OnKeyPress ux
OnUserEvent ux
Triggers when a UserEvent is raised.
PageBeginLoading ux
Triggers when a WebView begins loading a page
PageLoaded ux
Triggers when a WebView finishes loading a page
PageWhileNavigatingFreeze uno
PhotoCaptured ux
PhotoLoaded ux
Pressed ux
ProgressAnimation ux
Triggers when a Slider or other compatible control changes its value.
PullToReload ux
RangeAnimation ux
Released ux
Triggers when a pointer is released on a Visual.
RemovingAnimation ux
Scrolled ux
ScrollingAnimation ux
Select ux
Deprecated (< 2017-01-01)
Selected ux
Fired when the Selectable is assed to the Selection.
State ux
A Trigger that is managed by a StateGroup.
StickingAnimation uno
StickyHeaderAnimation uno
Animation that progresses as a StickyHeader begins sticking, within to a given distance.
SupportBiometric ux
SwipeActionConfirmed uno
Swiped ux
SwipingAnimation ux
Tapped ux
Triggers when a pointer is tapped on a Visual.
TextInputActionTriggered ux
ThemeBase uno
Timeline ux
Transition ux
WhileActive ux
WhileBusy ux
WhileCanGoBack ux
WhileCanGoForward ux
WhileCompleted ux
Active while the Video is completed.
WhileContainsText ux
WhileCount ux
WhileDisabled ux
Active while the IsEnabled
property of its containing element is False
.
WhileDragging ux
Active while the element is being dragged.
WhileDraggingOver ux
WhileDroppingBy ux
WhileEmpty ux
WhileEnabled ux
WhileFailed ux
WhileFalse ux
WhileFloat ux
Active when the float
Value
fulfills some criteria.
WhileFocused ux
Active whenever its containing element is in focus.
WhileFocusWithin ux
Active whenever a child of its containing element is in focus.
WhileHovering ux
WhileInactive ux
WhileInEnterState ux
WhileInExitState ux
WhileInteracting ux
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
WhileNavigating ux
WhileNotEmpty ux
WhileNotFocused ux
WhilePageActive ux
WhilePageLoading ux
A trigger that is active while its parent WebView is loading.
WhilePaused ux
Active while the Video is paused.
WhilePlaying ux
Active while the Video is playing.
WhilePressed ux
WhileScrollable ux
Active when a ScrollView can be scrolled.
WhileScrolled ux
Is active while the ScrollView is scrolled within a given region.
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>
WhileSelected ux
This trigger is active while the Selectable is currently selected in the Selection
WhileString ux
Activate when the condition on the string value is true
WhileSwipeActive ux
Active whenever an Active-type SwipeGesture has been swiped to the active state.
WhileSwiping ux
WhileTrue ux
WhileVisible ux
Active when the parent element is visible.
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>
WhileWindowLandscape ux
WhileWindowPortrait ux
WhileWindowSize ux
With ux
Location
- Namespace
- Fuse.Triggers
- Package
- Fuse.Triggers 2.9.1
Interface of Trigger
Actions : IList of TriggerAction ux
A list of actions that execute with the trigger. These may react on simple direction changes, or at specific time offsets.
Activate(Action) uno
Animators : IList of Animator ux
BackwardAnimation : TriggerAnimation ux
Bypass : TriggerBypassMode ux
BypassActivate uno
BypassDeactivate uno
BypassSeek(double, AnimationVariant) uno
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
DirectActivate(Action) uno
DirectDeactivate uno
DirectSeek(double, AnimationVariant) uno
HasActions : bool uno
HasAnimators : bool uno
HasBackwardAnimation : bool uno
true
if there is an explicit backward animation.
InversePulse uno
OnPlayStateChanged(TriggerPlayState) uno
OnProgressChanged uno
PlayEnd(bool, Action) uno
Play the trigger from where it currently is to the end.
PlayTo(double, AnimationVariant) uno
Progress : double uno
Pulse uno
PulseBackward uno
RecreateAnimationState uno
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.
Seek(double, AnimationVariant) uno
Start uno
Stop(bool) uno
StretchDuration : double ux
Stretches the duration of the animation to fill up this period of time.
TimeMultiplier : double ux
Specifies a multiplier to the elapsed time for animation playback.
Trigger Constructor uno
Creates a new Trigger
Inherited from NodeGroupBase
FindTemplate(string) : Template uno
Nodes : IList of Node ux
Nodes to add to the Parent when this trigger is any non-deactivated state (Progress > 0)
OnNodeAdded(Node) uno
OnNodeRemoved(Node) uno
Resources : IList of Resource ux
Templates : IList of Template ux
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.
OnUnrooted uno
Parent : Visual uno
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
SoftDispose uno
SourceFileName : string ux
hide
SourceLineNumber : int ux
hide
SubtreeToString : string uno
SubtreeToString(StringBuilder, int) uno
TryGetResource(string, Predicate<object> (object), object) : bool uno
VisitSubtree(Action<Node> (Node)) uno
Inherited from PropertyObject
AddPropertyListener(IPropertyListener) uno
OnPropertyChanged(Selector, IPropertyListener) uno
OnPropertyChanged(Selector) uno
RemovePropertyListener(IPropertyListener) uno
Inherited from object
Equals(object) : bool uno
GetHashCode : int uno
GetType : Type uno
ToString : string uno
Implemented Interfaces
IList<Binding> uno
IScriptObject uno
Interface for objects that can have a script engine representation
IProperties uno
ISourceLocation uno
hide
ICollection<Binding> uno
IEnumerable<Binding> uno
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.