Elements Element Class

Elements are visuals that cover a rectangular 2D region.

Common properties

HitTestMode

When interacting with an element, it is sometimes desirable to be able to differentiate which elements can be interacted with and how. This is typically referred to as "hit testing". In Fuse, how elements interact with user input can be set using HitTestMode.

Example

This example will layout two Rectangles and add Clicked-triggers to both of them. However, only the left one will output anything when clicked, as the hit testing has been explicitly disabled on the right rectangle:

<Grid ColumnCount="2">
    <Rectangle Width="100" Height="100" Fill="#808" >
        <Clicked>
            <DebugAction Message="Clicked left" />
        </Clicked>
    </Rectangle>
    <Rectangle Width="100" Height="100" Fill="#808" HitTestMode="None" >
        <Clicked>
            <DebugAction Message="Clicked right" />
        </Clicked>
    </Rectangle>
</Grid>

This can be very helpful if you have visual elements obscuring elements below it, where you want the lower elements respond to input.

ClipToBounds

Normally, when laying out an element inside the other, the inner element can freely live outside the parent element:

<Panel Width="100" Height="100">
        <Image Margin="-100" File="Pictures/Picture1.jpg" StretchMode="UniformToFill" />
</Panel>

This Image will appear to be 300pt wide and tall, as the Panel doesn't clip children to its bounds.

If you intend to have the Image clip to its parent size, simply set ClipToBounds="true" on the Panel:

<Panel Width="100" Height="100" ClipToBounds="true">
    <Image Margin="-100" File="Pictures/Picture1.jpg" StretchMode="UniformToFill" />
</Panel>

Now, the Image will not overflow the bounds of the Panel.

Opacity

You can set the transparency of objects using the Opacity-property. When Opacity="0", the element is completely transparent.

Example

In this example, a panel's opacity is set to 0.5

<Panel>
    <Opacity Value="0.5" />
</Panel>

Layers

It is often helpful to redefine what existing controls should look like. Elements that are added to containers can be assigned to different layers. If you want a button to appear with a red background, you can redefine its Background Layer:

<Button Text="Hello!">
    <Rectangle Fill="#931" Layer="Background" />
</Button>

This will not change the layout or behavior of the Button, but its appearance will change.

Available Element classes

Arc ux

Displays an arc.

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.

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.

ColorBadge uno

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

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.

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.

EdgeNavigator ux

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

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.

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.

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.

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.

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

RadarPlot uno

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

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.

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.

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.

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.

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.

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.

WrapPanel ux

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

Location

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

Interface of Element

ActualPosition : float2 uno

The position of the element, the position of its top-left corner to the top-left corner in the parent.

Anchor : Size2 ux

A point within the element to treat as its "epicenter".

Aspect : float ux

The aspect ratio that an element must fulfill in layout.

Offset : Size2 ux

Offets the position of the element after all other layout has been applied.

Inherited from Visual

bringIntoView() js

Requests that this visual be brought into the visible are of the screen. Typically a containing ScrollView will scroll to ensure it is visible.

Children : IList of Node ux

The children of the visual. All nodes placed inside the visual in UX markup are assigned to this list. The order of Visuals this list determines the order of layout. The Z-order of the children is by default equal to this order, but can be manipulated separately using methods like BringToFront and SendToBack.

InvalidateVisual uno

Indicates the visual for this node has changed. This allows the root-level node to know that it must draw, and any caching that it must invalidate the cache for this node.

InvalidateVisualComposition uno

Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).

IsEnabled : bool ux

Whether this node is currently interactable. Disabled visuals do not receive input focus. However, they can still be visible and block hit test for underlaying objects.

IsLocalVisible : bool uno

Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.

IsVisible : bool uno

Returns whether this visual is currently visible. Will return false if any of the ancestor visuals are hidden or collapsed. This property can not be used to check whether a visual is hidden because it is occluded by another visual, or is outside the view but otherwise visible.

Parameter : string ux

The parameter data for this visual, encoded as JSON, provided by a router if this visual represents a navigation page.

SnapToPixels : bool ux

Whether to snap the result of layout of this visual to physical device pixels.

ZOffset : float ux

Specifies a Z-Offset, visuals with higher values are in front of other visuals.

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