Active whenever a page becomes active.

Specifies an animation for an element that's becoming active.

Triggers when the element is added to the visual tree.

Allows placing a node in a different place in the UX tree than the location of this behavior, while keeping the data context from this behavior.

Triggers if run on an Android device

Displays an arc.

Animates a property to a target value using a physics-like attraction simulation.

Displays a backbutton

Applies a gaussian blur to an Element.

Compensates for space taken up by the keyboard and other OS-specific elements at the bottom of the screen.

Marks a UX node as busy.

Displays a button

Baseclass for buttons

Displays a circle

Helper class for implementing circular RangeControls

Triggers when a pointer is clicked on a Visual.

ClientPanel compensates for space taken up by the on-screen keyboard, status bar, and other OS-specific elements at the top and bottom edges of the screen.

Captures the named UX objects and dependencies in the scope and sends them to a script event when ready.

Lays out its children in vertical or horizontal groups.

Pulses when the busy status of a node is cleared.

A panel that places children in a dedicated Subtree visual, allowing you to create custom container.

DEPRECATED: Use WhileContainsText instead

Content controls display a single visual child.

Draws a curve connecting several points, specified as CurvePoint.

Defines a point inside a Curve

Displays a component to select a date.

Active whenever a page becomes inactive.

Specifies an animation for an element that's becoming inactive.

Defers the creation of nodes to improve initialization time.

Desaturates an Element.

Fired when the Selectable is removed from the Selection.

Navigation Order

Lays out its children by docking them to the different sides, one after the other.

Triggers when a pointer is double-clicked on a Visual.

Triggers when a pointer is double-tapped on a Visual.

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

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

A Panel that can be used to draw lines using your finger. As the DrawingPanel is native only, it must be contained in a NativeViewHost.

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

DropShadow applies an underlying shadow to an Element.

Applies a duotone effect to an Element.

A linear navigation that retains the active state during changes of the pages

Displays a collection of objects using the given template(s) for each item.

A navigation control for panels that slide in from the sides of the display.

DEPRECATED: Use SwipeGesture with EdgeNavigator instead

Displays an ellipse

Triggers as a draggable element enters the force field.

Specifies an animation for a page that is in front of the active one.

Triggers as a draggable element leaves the force field.

Specifies an animation for a page that is behind the active page.

Applies a glass backdrop effect to an Element.

A native view that hosts graphics-rendered UI controls.

Lays out children in a grid formation.

Applies a classic halftone effect to an Element.

Triggers when a pointer is pressed on a Visual.

Displays an Image

Animates a draggable element depending on how close it is to a point attractor

Creates and inserts an instance of the given template(s). The templates are only created when the node is rooted.

Triggers when an interaction completes.

Triggers if run on an iOS device

The JavaScript tag is used to run JavaScript and assigns its module.exports as data context for the parent visual.

Triggers when the layout of an element changes

Layout controls perform layout of the children.

Binds an expression or value to a name in the data context. This simplifies repeated calculations and allows introduction of new variables.

A LetType that specifies a bool value.

A LetType that specifies a float value.

A LetType that specifies a float2 value.

A LetType that specifies a float3 value.

A LetType that specifies a float4 value.

A LetType that specifies a Size value.

A LetType that specifies a Size2 value.

A LetType that specifies a string value.

Navigation Order

Common linear sliding behaviour used for implementing a RangeControl.

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

Adds a map marker to a MapView

Adds a map overlay to a MapView

Displays a native map view.

Masks an Element to an image.

Compares a value with a set of constants, and activates/deactivates visual trees associated with those constants.

Allows you to move Elements between different layouts using the Placeholder class.

Creates a layer of native Controls on top of a GraphicsView. Controls in its subtree will be mapped to the native controls provided by the OS.

General-purpose navigation container with on-demand instantiation and recycling of pages.

Allows navigation through swipe gestures.

Allows creating a class that contains several nodes and resources that are added directly to their Parent, as though included directly.

<NodeGroup ux:Class="GridLine">
    <float4 ux:Property="Color"/>
    <string ux:Property="Title"/>
    <string ux:Property="Emoji"/> <a href="fuse/nodegroup.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>

Deprecated, for backwards compatibility

Triggers when the back-button is pressed

Triggers when a specific key is pressed

Triggers when a UserEvent is raised.

Represents a page that participates in navigation.

Triggers when a WebView begins loading a page

Provides standard transitions, user interaction, and page handling for a basic linear navigation.

Builds indicator icons for each page of a PageControl based on a specified template, and displays them next to each other. To use it, you have to provide a template named Dot, as well as providing a PageControl to listen to through the Navigation property.

Triggers when a WebView finishes loading a page

A Navigator without standard transitions. This is convenient when you want to provide custom transitions for all pages.

Performs the default layout on the children, where all children get all available space.

A TransformGesture that provides panning (2D translation).

A panel that contains a chart.

Controls the size-related aspects of the Plot to create a responsive layout.

A layout and enumeration for the axis steps of a Plot, which is used to place labels on axes. Often used together with a GridLayout for positioning.

Iterates over the axis steps/data.

Positions a plot bar.

Convenience wrapper for platting CurvePoint's in a plot.

Iterator for visual plot data.

A Panel positioned on the data point for a chart. This is an easy way to position an object at the correct position for the current plot data.

Creates tick marks, usually for an axis. This is a Shape, allowing Stroke... properties to be used for drawing the ticks. The ticks that are drawn will line up with the labels of PlotAxis provided they are the same element size (either Width or Height depending on the axis).

Creates a wedge shape for a pie chart.

Locks pointer input to a sub-tress in the UX for a limited time.

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.

Triggers when a Slider or other compatible control changes its value.

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

Changes the range of an animation.

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

Baseclass for controls that contains a range value

Displays a rectangle.

Draws a polygon with a number of equal length sides.

Triggers when a pointer is released on a Visual.

Animates when the parent element is removed

A TransformGesture that provides rotation.

Rotates the element by the degrees specified.

Manages routing and navigation history for part or all of a Fuse app.

SafeEdgePanel compensates for space taken up by the on-screen keyboard, status bar, and other OS-specific elements on the edges of the screen. It should be used for any panel that touches any edge of the screen.

Enlarges or shrinks the element by the factor specified.

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

Animates over a given scroll range.

Used to navigate contents that are larger than the available size.

A ScrollView is a control that allows scrolling over the content. It only accepts a single child, from which the size of the scrollable area is calculated. That child can be a single element or a UX tree of controls.

Paging and loading manager for a list of items. Allows a large, or infinite list, to be displayed in a ScrollView.

Add scroll snapping behavior to the ScrollView. Scroll snapping allows you to lock the viewport to certain location after a user has finished scrolling.

Deprecated (< 2017-01-01)

Selectable makes a Visual selectable. Selectable visuals are what can be selected in a Selection control.

Fired when the Selectable is assed to the Selection.

Selection is used to create a selection control, such as an item list, radio buttons, or picker. The Selection itself defines the selection, managing the high-level behaviour and tracking the current value. A variety of Selectable objects define which items can be selected.

Draws a shadow behind an element.

Applies a shear to the visual (skews it). If you wish to animate the shear use a Skew animator instead.

Displays a slider

Stacks children vertically (default) or horizontally.

Displays a star

A Trigger that is managed by a StateGroup.

StateGroup manages a set of State triggers, making sure only a single State is active at once. A State is a regular Trigger that is controlled by a StateGroup. Animators inside a State define what should change while that state is active.

Compensates for space taken up by the status bar.

Configures the appearance of the status bar on Android.

Configures the appearance of the status bar on iOS.

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

Pulse trigger that activates when a swipe has occurred.

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

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

Displays a switch

Triggers when a pointer is tapped on a Visual.

Displays a block of text.

Deprecated, for backwards compatibility

A TextInput with a default look and feel.

Single-line text input control.

Trigger for input action

Multi-line text editor.

Groups several animations together

Displays a component to select a time.

Panel that contains a toggleable value

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

Represents a linear offset in space. For animated translation, consider using a Move animator instead of animating the properties of this class.

Defines a custom event that can be raised by a component and responded to by a user of that component.

Displays a video.

Forces the content (by scaling) to fit inside the available space.

<Viewbox>
    <Rectangle Color="#808" Width="200" Height="100" />
</Viewbox>

This will maintain its aspect ratio of 2:1 while stretching the Rectangle to be the size of the Viewbox.

Displays web content natively on android and iOS.

Animates while the page is active.

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

Active whenever navigating backward is possible.

Active whenever navigating forward is possible.

Active while the Video is completed.

Active while the surrounding context contains text.

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

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

Active while the element is being dragged.

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

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

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

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

Active while the context has failed.

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

Active when the float Value fulfills some criteria.

Active whenever its containing element is in focus.

Active whenever a child of its containing element is in focus.

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

Animates while the page is inactive.

A directional version of WhileInactive.

A directional version of WhileInactive.

Active while the user is interacting with the surrounding element.

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.

Active while a resource in the surrounding context is loading.

Active while the user is currently navigating between two pages.

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

Active whenever its containing element is not in focus.

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

A trigger that is active while its parent WebView is loading.

Active while the Video is paused.

Active while the Video is playing.

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

Active when a ScrollView can be scrolled.

Is active while the ScrollView is scrolled within a given region.

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>

This trigger is active while the Selectable is currently selected in the Selection

Activate when the condition on the string value is true

Active whenever an Active-type SwipeGesture has been swiped to the active state.

Is active while a swiping gesture is in progress.

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

Active when the parent element is visible.

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>

Active when the app's viewport width is larger than its height.

Active when the app's viewport height is larger than or equal to its width.

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

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

Lays out children one after the other in a given orientation and wraps around whenever it reaches the end.

A TransformGesture that provides zooming.

Temporarily changes the value of a property while its containing trigger is active. To permanently change a value, use the Set animator.

Animates a repeating cycle between a high and low value using a given waveform.

Animates the translation a visual element.

Allows you to artificially extend the timeline

An Animator that changes the size of an Element.

Rotates the Visual. This does the same transform as Rotation.

Scales the element. Note that scale doesn't actually change the elements size. This means that the rest of the UI layout wont be affected and the animation is guaranteed to be fast.

Allows you to animate a skew transform on an element.

Continuously rotates an element, given a Frequency measured in full rotations per second.

<Panel>
    <WhilePressed>
        <Spin Frequency="2" />
    </WhilePressed>
</Panel>

As with Cycle, you may also specify a Duration to control the length of the animation.

This is trigger action for taking biometric authentication. Both iOS and Android is using Fingerprint/Touch ID or Face Recognition/Face ID sensor depending on what sensor are available on the device. You need to add a reference to "Fuse.Auth" in your project file to use this feature.

Scrolls a fuse/controls/scrollview so that the target element becomes visible

Reorders the siblings of a Visual so that the Visual will be rendered on top.

Calls a phone number

Calls a JavaScript function when a trigger is activated.

Collapses an Element by setting Visibilty to Collapsed.

Log a message, which is useful for debugging

Evaluate a JavaScript snippet on a WebView and optionally get the result

Gives focus to its containing Element when activated.

Navigates backward in the navigation stack/z-order of a Navigation, PageControl, or WebView.

Navigates forward in a Navigation, PageControl, or WebView.

Goto a new route in the router.

Hides an Element by setting Visibility to Hidden.

Launch the default email application with an optional template

Launch the default map app

Launch the default map app

Launch the default browser for an URL or open files with its corresponding default application

Load arbitrary HTML into the webview.

LoadImage is a trigger action to fetch the image data for the ImageFill or Image. This Trigger action is useful when we set the AutoLoad property of the Image component or ImageFill brush to false to make it lazy load, and then using this trigger action to actually load it

Loads a new URL into the WebView

Navigate to a page.

Toggles a Navigation.

Pause a video or timeline

This is trigger action for taking Platform SignIn. Platform SignIn is a SignIn mechanism that use Sign In With Apple on iOS and Google SignIn on Android.

Resume or start a video or timeline

Play bundled .wav files

Momentarily triggers a WhileTrue, WhileFalse or Timeline.

Push a new route onto the router.

Raises a UserEvent specified by name.

Releases focus from the currently focused Element when activated.

For navigation this indicates the page (Visual) is no longer required and can be reused, or discarded, by the container.

<ExitingAnimation>
    <Move X="1" RelativeTo="Size" Duration="0.3"/>
    <ReleasePage AtProgress="1"/>
</ExitingAnimation>

This is currently only necessary in a Navigator and PageView. You can safely call it on transitions used potentially also in a PageControl.

Reloads the currently loaded URL

Cancels a partial navigation on the Router.

Scrolls a ScrollView to a given position when triggered.

Scrolls a ScrollView to a given position when triggered.

Reorders the siblings of a Visual so that the Visual will be rendered underneath.

Permanently changes the value of a property.

Set Status Bar UI

Sets the state of an Active-type SwipeGesture.

Set Screen Orientation

Makes an Element visible by setting Visibility to Visible.

This is trigger action for showing native alert dialog with a single button. Only available on iOS or Android

This is trigger action for showing an ok/cancel dialog. Only available on iOS or Android

Send a message to a phone number

Stop a video or timeline.

Stops loading the currently loading URL

A unified action that controls a Timeline.

Toggles the state of a toggleable component.

Modifies the selection state of a selectable in a selection.

Toggles an Active-type SwipeGesture on or off.

Lets you create a temporary layout change. This can be used to do visual layout transitions without needing actual layout changes.

An action that controls state of a StateGroup.

Vibrate the device for a duration or by vibration type (only on iOS)

Rotates the element by the degrees specified.

Enlarges or shrinks the element by the factor specified.

Applies a shear to the visual (skews it). If you wish to animate the shear use a Skew animator instead.

Represents a linear offset in space. For animated translation, consider using a Move animator instead of animating the properties of this class.

Applies a gaussian blur to an Element.

Desaturates an Element.

DropShadow applies an underlying shadow to an Element.

Applies a duotone effect to an Element.

Applies a classic halftone effect to an Element.

Masks an Element to an image.

Specifies an image file as a data source to be displayed by an Image element.

Provides an image fetched via HTTP which can be displayed by the Image control.

Used to specify multiple image sources that an Image element can display at different pixel densities.

Specifies a texture2D object to be displayed by an Image element.