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.

Drawer uno

Provides sidebar navigation toggleable by a floating button.

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.

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 ux

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.

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.

The basic structure of a StateGroup looks like this:

<StateGroup>
	<State ux:Name="firstState" />
	<State ux:Name="secondState" />
</StateGroup>

Now, this setup does nothing at all. We need to add some animators to our States, so that they actually do something. We'll add a Panel as well, so we have something to animate.

<Panel ux:Name="thePanel" Width="100" Height="100" />
	<StateGroup>
		<State ux:Name="firstState">
			<Change thePanel.Color="#f00" />
		</State>
		<State ux:Name="secondState">
			<Change thePanel.Color="#00f" />
		</State>	
	</StateGroup>
</Panel>

Since the first State in a StateGroup will be activated by default, the above example will display a red Panel.

At this point, we'd like to switch to a different state somehow. This can be achieved in several ways, as seen below.

The Active property

The Active property can be used to activate a particular State. The below example displays a colored Panel, along with three buttons that change its color.

<StackPanel>
	<Panel ux:Name="thePanel" Width="100" Height="100" />

	<StateGroup ux:Name="stateGroup">
		<State ux:Name="redState">
			<Change thePanel.Color="#f00" Duration="0.2"/>
		</State>
		<State ux:Name="greenState">
			<Change thePanel.Color="#0f0" Duration="0.2"/>
		</State>
		<State ux:Name="blueState">
			<Change thePanel.Color="#00f" Duration="0.2"/>
		</State>
	</StateGroup>

	<Grid ColumnCount="3">
		<Button Text="Red">
			<Clicked>
				<Set stateGroup.Active="redState"/>
			</Clicked>
		</Button>
		<Button Text="Green">
			<Clicked>
				<Set stateGroup.Active="greenState"/>
			</Clicked>
		</Button>
		<Button Text="Blue">
			<Clicked>
				<Set stateGroup.Active="blueState"/>
			</Clicked>
		</Button>
	</Grid>
</StackPanel>

TransitionState

Instead of directly jumping to a particular state, the TransitionState action can be used to advance to the next State in a StateGroup, following the order in which they are declared. If a TransitionState is triggered while the last State is active, it wraps around to activate the first State.

The following example displays a panel that will cycle its color between red, green and blue when clicked.

<Panel ux:Name="thePanel" Width="100" Height="100">
	<StateGroup ux:Name="stateGroup">
		<State ux:Name="redState">
			<Change thePanel.Color="#f00" Duration="0.2"/>
		</State>
		<State ux:Name="greenState">
			<Change thePanel.Color="#0f0" Duration="0.2"/>
		</State>
		<State ux:Name="blueState">
			<Change thePanel.Color="#00f" Duration="0.2"/>
		</State>
	</StateGroup>

	<Clicked>
		<TransitionState Type="Next" Target="stateGroup" />
	</Clicked>
</Panel>

Controlling StateGroup using JavaScript

A StateGroup may be controlled via its JavaScript interface. This is done either by calling the goto(state) or gotoNext() methods on the StateGroup itself, or by calling the goto() method on a particular State.

<JavaScript>
	exports.gotoNextState = function()
	{
		stateGroup.gotoNext();
	}

	exports.gotoSecondState = function()
	{
		stateGroup.goto(secondState);
	}

	exports.gotoThirdState = function()
	{
		thirdState.goto();
	}
</JavaScript>

<StateGroup ux:Name="stateGroup">
	<State ux:Name="firstState">
		<!-- ... -->	
	</State>
	<State ux:Name="secondState">
		<!-- ... -->
	</State>
	<State ux:Name="thirdState">
		<!-- ... -->
	</State>
</StateGroup>

<StackPanel>
	<Button Clicked="{gotoNextState}" Text="Next state" />
	<Button Clicked="{gotoSecondState}" Text="Second state" />
	<Button Clicked="{gotoThirdState}" Text="Third state" />
</StackPanel>

Transition

We can also specify the Transition property, which can be either Exclusive or Parallel. Exclusive means that each state will have to be fully deactivated before the next state becomes active. Parallel means that as one state deactivates, the next one will become active and whatever properties they animate will be interpolated between them.

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.

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.

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.

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.

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.

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.

Actions

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.

LoadUrl ux

Loads a new URL into the WebView

Pause ux

Pause a video or timeline

Play ux

Resume or start a video or timeline

PlayTo ux

Play to a specific point in a 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.

Reload ux

Reloads the currently loaded URL

RouterModify ux

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.

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

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