Full UX Markup Class Reference

This is a complete list of the classes that ships with Fuse that are available in UX Markup. Each of these classes can be instantiated by their name as a tag in the markup.

Fuse ships with lots more classes that are available to Uno programmers in advanced use cases. See the Native Interop section.

Application

The App class marks the root of your application.

Nodes

AlternateRoot ux

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.

Android ux

Triggers if run on an Android device

Arc ux

Displays an arc.

Attractor<T> ux

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

BackButton uno

A left-pointing arrow, used in navigation. Note: this component only provides visuals and does not actually perform navigation.

BottomBarBackground ux

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

Bubble uno

A bordered circle, generally used for profile images.

Busy ux

Marks a UX node as busy.

Card uno

Cards are generally light. Thus, they have an implicit LightTheme by default. You can disable this behavior by using its base class, ThemedCard instead.

CardMedia uno

A Rectangle that fills the top of a Card. Generally used to display an image that relates to a piece of text content.

A Carousel component with a depth-like effect.

ClientPanel ux

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.

Closure ux

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

ColorBadge uno

A horizontal rectangle, generally used to communicate category using color.

Completed ux

Pulses when the busy status of a node is cleared.

Container ux

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

Curve ux

Draws a curve connecting several points, specified as CurvePoint.

Deferred ux

Defers the creation of nodes to improve initialization time.

DockPanel ux

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

Donut uno

A colored circle, generally used to communicate category.

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

Drawer uno

Provides sidebar navigation toggleable by a floating button.

Dropped ux

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

Each ux

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

EdgeNavigator ux

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

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.

GraphicsView ux

A native view that hosts graphics-rendered UI controls.

Grid ux

Lays out children in a grid formation.

Icon uno

Alive comes with a set of icons, exposed via the Icon component.

Instance ux

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

Instantiator uno

Base class for behaviors that can instantiate templates from a source.

iOS ux

Triggers if run on an iOS device

JavaScript ux

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

Let ux

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

LetBool ux

A LetType that specifies a bool value.

LetFloat ux

A LetType that specifies a float value.

LetFloat2 ux

A LetType that specifies a float2 value.

LetFloat3 ux

A LetType that specifies a float3 value.

LetFloat4 ux

A LetType that specifies a float4 value.

LetSize ux

A LetType that specifies a Size value.

LetSize2 ux

A LetType that specifies a Size2 value.

LetString ux

A LetType that specifies a string value.

ListView uno

A striped list of items, with optional Adding/Removing/LayoutAnimations.

ListViewHeader uno

A colored header bar with text, used to display the category of a group of items.

LongPressed ux

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

Match ux

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

NativeViewHost ux

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.

NodeGroup ux

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>
Number ux

Deprecated, for backwards compatibility

Page uno

A Page that takes its background color from the currently active theme.

Page ux

Represents a page that participates in navigation.

PageControl ux

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

PageIndicator ux

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.

PageView ux

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

Panel ux

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

Plot ux

A panel that contains a chart.

PlotArea ux

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

PlotAxis ux

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.

PlotPoint ux

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.

PlotTicks ux

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).

PointerCapture ux

Locks pointer input to a sub-tress in the UX for a limited 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.

RadarPlot uno

A radar-style Plot for a single data series of exactly six data points.

RangeAnimation ux

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

Rotation ux

Rotates the element by the degrees specified.

Router ux

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

SafeEdgePanel ux

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.

Scaling ux

Enlarges or shrinks the element by the factor specified.

Scrolled ux

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

Scroller uno

Implements the default scrolling functionality.

ScrollView ux

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

ScrollViewBase ux

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.

ScrollViewPager ux

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

ScrollViewSnap ux

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

Selectable ux

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

Selection ux

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.

Shadow ux

Draws a shadow behind an element.

Shear ux

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

Slider uno

A slider control. Has the same interface as any other RangeControl, such as the default Slider.

StackPanel ux

Stacks children vertically (default) or horizontally.

StateGroup ux

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.

StickyHeader uno

Presents a header above an element that will stick to the top of its enclosing ScrollView while in the vertical range of the StickyHeader.

SupportBiometric ux

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

SwipeActionPanel uno

Reveals a button when the user swipes left on its contents. A confirmation message is shown when the button is tapped.

Swiped ux

Pulse trigger that activates when a swipe has occurred.

SwipeGesture ux

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

SwipingAnimation ux

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

Switch uno

A Switch control that can be swiped. Has the same interface as any other ToggleControl, such as the default Switch.

TabBar uno

A PageIndicator that uses values provided by the Label property of TabPage to instantiate tabs with text labels for each page in a PageControl or other LinearNavigation.

Text ux

Displays a block of text.

ThemedCard uno

A Card that takes its background color from the currently active theme.

TitlePanel uno

Displays a Title and SubTitle on top of the secondary background color.

Transition ux

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

Translation ux

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

UserEvent ux

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

VectorLayer ux

Combines several child vector elements into a single drawing.

Viewbox ux

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.

Viewport uno

The Viewport element allows you to perform 3D transformations with perspective projection.

WebView ux

Displays web content natively on android and iOS.

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.

WrapPanel ux

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

Animators

Change<T> ux

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

Cycle<T> ux

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

Move ux

Animates the translation a visual element.

Nothing ux

Allows you to artificially extend the timeline

Rotate ux

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

Scale ux

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.

Skew ux

Allows you to animate a skew transform on an element.

Spin ux

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.

Actions

Authenticate ux

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.

BringIntoView ux

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

Call ux

Calls a phone number

Callback ux

Calls a JavaScript function when a trigger is activated.

EvaluateJS ux

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

LaunchEmail ux

Launch the default email application with an optional template

LaunchUri ux

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

LoadHtml ux

Load arbitrary HTML into the webview.

LoadImage ux

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

LoadUrl ux

Loads a new URL into the WebView

Pause ux

Pause a video or timeline

PlatformSignIn ux

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.

Play ux

Resume or start a video or timeline

ReleaseFocus ux

Releases focus from the currently focused Element when activated.

ReleasePage ux

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.

Reload ux

Reloads the currently loaded URL

RouterModify uno

Performs a transition on the router with extended options.

Set<T> ux

Permanently changes the value of a property.

Show ux

Makes an Element visible by setting Visibility to Visible.

ShowAlert ux

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

ShowConfirm ux

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

Sms ux

Send a message to a phone number

Stop ux

Stop a video or timeline.

Toggle ux

Toggles the state of a toggleable component.

TransitionLayout ux

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

Vibrate ux

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

Transforms

Rotation ux

Rotates the element by the degrees specified.

Scaling ux

Enlarges or shrinks the element by the factor specified.

Shear ux

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

Translation ux

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

Effect classes

Special Resources