Text Class | fuse X

Displays a block of text.

The Text UI-control renders read-only text.

You can import a Font from ttf files containing TrueType fonts. Because a font is typically referred to throughout an application, it is best to simply create a global resource for it using ux:Global. This way of importing the font ensures that the font is available throughout the whole project, and is only loaded once.

Note

When running desktop preview, neither fallback fonts, colored glyphs, nor Unicode characters outside the basic multilingual plane are supported.

Because of this, certain text features (e.g. emoji) are not supported when running local preview. Do not be surprised if desktop rendering doesn't match device rendering 100%. This is an issue that is being worked on.

Examples

Text properties

<Text Color="#999">Left</Text>
<Text TextAlignment="Center">Center</Text>
<Text FontSize="24" TextAlignment="Right">Right</Text>
<Text LineSpacing="10">
Multiple
Lines
</Text>

In this example, the first text element will be left aligned as this is the default, and have its color set to a medium light grey. The second text will be center aligned. The third will be right aligned and have a larger font. The fourth will span two lines with 10 points of space inbetween.

Custom text-components

<App>
    <Font File="Roboto-Medium.ttf" ux:Global="Medium" />
    <Font File="Roboto-Light.ttf" ux:Global="Light" />

    <Text ux:Class="Light" Font="Light" />
    <Text ux:Class="Medium" Font="Medium" TextWrapping="Wrap" />
    <Text ux:Class="Warning"
        Font="Medium"
        FontSize="42"
        TextAlignment="Center"
        Color="#f00" />

    <StackPanel>
        <Light>Just some text</Light>
        <Warning>The robots are coming!</Warning>
        <Medium>This is just some medium text, but it will happily wrap when the edges of the screen is reached.</Medium>
    </StackPanel>
</App>

In this example we load two fonts and create three different semantic classes, Light, Medium and Warning, combining some of the available Text properties. In this example, the fonts are located in the same directory as the relevant UX file.

Remarks

Text is the primary control for displaying read-only text in apps.

Location

Namespace: Fuse.Controls
Package: Fuse.Controls.Primitives 2.9.1

Show Uno properties and methods

Interface of Text

LoadAsync : bool ux

This can be useful if your app has a lot of text since the initial loading time for such an app's text elements can be too high to do without a noticable delay.

Text Constructor uno

Creates a new Text

Inherited from TextControl

Color : float4 ux

The color of the text (alias for TextColor).

Font : Font ux

FontSize : float ux

FontSizeScaled : float uno

GetITextView : ITextView uno

InternalLoadAsync : bool uno

InvalidateRenderer uno

LineSpacing : float ux

Specifies the spacing in points between each line of text

MaxFontScale : float ux

MaxLength : int ux

Specifies the max number of characters that the Value can have

MaxLines : int ux

Specifies the maximum number line of text if TextWrapping set to Wrap

MinFontScale : float ux

OnColorChanged(IPropertyListener) uno

OnFontChanged uno

OnFontSizeChanged uno

OnLineSpacingChanged uno

OnLoadAsyncChanged uno

OnMaxLengthChanged uno

OnMaxLinesChanged uno

OnTextAlignmentChanged uno

OnTextTruncationChanged uno

OnTextWrappingChanged uno

OnValueChanged(IPropertyListener) uno

SetColor(float4, IPropertyListener) uno

SetValue(string, IPropertyListener) uno

SetValueInternal(string) uno

Sets the value without notifying the native view. Used by ITextEditHost implementation in TextEdit.

TextAlignment : TextAlignment ux

TextColor : float4 ux

The color of the text.

TextTruncation : TextTruncation ux

TextWrapping : TextWrapping ux

Specifies how the TextControl is going to wrap its text

Value : string ux

ValueChanged : ValueChangedHandler<string> (object, ValueChangedArgs<string>) ux

Inherited from LayoutControl

Layout : Layout ux

The layout that will be applied to the children.

Inherited from Control

Appearance : object uno

Background : Brush ux

The brush that will used to paint the background of this control.

CreateNativeView : IView uno

DrawBackground(DrawContext, float) uno

DrawVisual(DrawContext) uno

GraphicsVisual : Visual uno

NativeView : IView uno

PushPropertiesToNativeView uno

Inherited from Element

ActualAnchor : float2 uno

The anchor 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.

ActualSize : float2 uno

The size of the element.

Alignment : Alignment ux

The Alignment of the Element.

Anchor : Size2 ux

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

ArrangePaddingBox(LayoutParams) uno

The provided LayoutParams is guaranteed to have a defined size that should be used to layout the padding box.

Aspect : float ux

The aspect ratio that an element must fulfill in layout.

AspectConstraint : AspectConstraint ux

Determines how the aspect ratio is maintained in a situation when it violates the min or max sizing constraints.

BoxSizing : BoxSizingMode ux

The manner in which the size and position of the element is calculated.

CachingMode : CachingMode ux

How the element's visuals are cached while drawing.

CalcRenderBounds : VisualBounds uno

CalcRenderBoundsWithEffects : VisualBounds uno

CaptureRegion(DrawContext, Rect, float2) : framebuffer uno

ClipToBounds : bool ux

Clips the child elements to the bounds of this element visually.

DrawNonUnderlayChildren(DrawContext) uno

DrawUnderlayChildren(DrawContext) uno

DrawWithChildren(DrawContext) uno

ExplicitTransformOrigin : Size2 ux

FastTrackDrawWithOpacity(DrawContext) : bool uno

GetContentSize(LayoutParams) : float2 uno

GetVisibleViewportInvertPixelRect(DrawContext, VisualBounds) : Recti uno

Height : Size ux

The height of the Element.

HitTestLocalVisualBounds : VisualBounds uno

HitTestMode : HitTestMode ux

Specifies how hit tests should be performed on this element.

InvalidateRenderBoundsWithEffects uno

IsPointInside(float2) : bool uno

IsSelectionParentOf(Element) : bool uno

LimitHeight : Size ux

The height limit for an element using BoxSizing="Limit".

LimitWidth : Size ux

The width limit for an element using BoxSizing="Limit".

Margin : float4 ux

The margin of the Element in points.

MaxHeight : Size ux

The maximum height of the Element.

MaxWidth : Size ux

The maximum width of the Element.

MinHeight : Size ux

The minimum height of the Element.

MinWidth : Size ux

The minimum width of the Element.

Offset : Size2 ux

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

OnDraw(DrawContext) uno

OnHitTestLocalVisual(HitTestContext) uno

Opacity : float ux

The opacity of the element.

Padding : float4 ux

The padding of the Element in points.

Placed : PlacedHandler (object, PlacedArgs) ux

Raised when the element receives a new position and size by the layout engine.

Position : Size2 ux

The combined X and Y position of the element.

RenderBoundsWithEffects : VisualBounds uno

RenderBoundsWithoutEffects : VisualBounds uno

SetExplicitTransformOrigin(Size2, IPropertyListener) uno

SetHitTestMode(HitTestMode, IPropertyListener) uno

SetOpacity(float, IPropertyListener) uno

SetVisibility(Visibility, IPropertyListener) uno

Size : Size2 ux

The combined Width and Height of the element.

TransformOrigin : ITransformOrigin ux

Specifies the origin of transformation used by transformation behaviors and animators such as Move, Scale, Rotation, Scaling, etc.

TreeRenderer : ITreeRenderer uno

Visibility : Visibility ux

The Visibility of the Element.

Width : Size ux

The width of the Element.

X : Size ux

The X location of the Element.

Y : Size ux

The Y location of the Element.

Inherited from Visual

AbsoluteViewportOrigin : float2 uno

Returns the origin of this Visual in the viewport (world) space.

AbsoluteZoom : float uno

Add(Node) uno

AddDrawCost(double) uno

ArrangeMarginBox(float2, LayoutParams) : float2 uno

BeginInteraction(object, Action) uno

BeginRemoveChild(Node, Action<Node> (Node)) uno

Begins removing a given node, playing all RemovedAnimations before actual removal.

BeginRemoveVisual(Visual, Action<Node> (Node)) uno

Begins removing a given visual, playing all RemovedAnimations before actual removal.

BringIntoView uno

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.

BringToFront(Visual) uno

Brings the given child to the front of the Z-order. In UX markup, use the BringToFront trigger action instead.

CancelInteractions(CancelInteractionsType) uno

ChildCount : int uno

The number of child nodes of this visual.

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.

Draw(DrawContext) uno

DrawCost : double uno

EndInteraction(object) uno

FindTemplate(string) : Template uno

FindViewport : IViewport uno

FirstChild<T> : T uno

Returns the first child node of the given type.

GetHitWindowPoint(float2) : Visual uno

GetMarginSize(LayoutParams) : float2 uno

GetTransformTo(Visual) : float4x4 uno

GetZOrderChild(int) : Visual uno

Get the Visual for a given z-order

HasChildren : bool uno

HasPendingRemove : bool uno

HasVisualChildren : bool uno

Whether this visual has any visual child nodes.

HitTest(HitTestContext) uno

HitTestBounds : VisualBounds uno

HitTestChildrenBounds : VisualBounds uno

HitTestLocalBounds : VisualBounds uno

IfSnap(float2) : float2 uno

IfSnapDown(float2) : float2 uno

IfSnapUp(float2) : float2 uno

Insert(int, Node) uno

InsertAfter(Node, Node) uno

Inserts a child node after the given sibling node.

InvalidateHitTestBounds uno

InvalidateLayout(InvalidateLayoutReason) uno

Indicates that this element requires a new layout as some layout parameters or content have changed.

InvalidateLocalTransform uno

InvalidateRenderBounds uno

Indicates the RenderBounds have changed and need to be recalculated.

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

IsContextEnabled : bool uno

Whether this node is in an enabled context. The context is disabled if one of the ancestor nodes have IsEnabled set to false.

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.

IsInteracting : bool uno

IsLocalVisible : bool uno

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

IsMarginBoxDependent(Visual) : LayoutDependent uno

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.

LastChild<T> : T uno

Returns the last child node of the given type.

Layer : Layer ux

The layer this visual belongs to in the Parent container.

LayoutRole : LayoutRole ux

Describes how this visual participates in layout.

LocalBounds : Box uno

LocalRenderBounds : VisualBounds uno

LocalToParent(float2) : float2 uno

Converts a coordinate from the local space into the parent space.

LocalTransform : float4x4 uno

LocalTransformInternal : FastMatrix uno

LocalTransformInverse : float4x4 uno

OnArrangeMarginBox(float2, LayoutParams) : float2 uno

OnBeginRemoveVisual(PendingRemoveVisual) uno

OnChildAdded(Node) uno

OnChildMoved(Node) uno

OnChildRemoved(Node) uno

OnHitTest(HitTestContext) uno

OnInvalidateLayout uno

OnInvalidateRenderBounds : bool uno

OnInvalidateVisual uno

OnInvalidateVisualComposition uno

OnIsContextEnabledChanged uno

OnIsSelectedChanged(bool) uno

OnIsVisibleChanged uno

OnLocalVisibleChanged uno

onParameterChanged(callback) js

Registers a function to be called whenever the routing parameter is changed.

OnPropertyChanged(PropertyObject, Selector) uno

OnRootedPreChildren uno

OnZOrderInvalidated uno

Parameter : string ux

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

PerformLayout uno

PerformLayout(float2) uno

PrependImplicitTransform(FastMatrix) uno

PrependInverseTransformOrigin(FastMatrix) uno

PrependTransformOrigin(FastMatrix) uno

Remove(Node) : bool uno

RemoveAllChildren<T> uno

Removes all children of the given type.

RemoveDrawCost(double) uno

Resources : IList of Resource ux

The list of resources defined at this node.

SendToBack(Visual) uno

Sends the given child to the back of the Z-order. In UX markup, use the SendToBack trigger action instead.

SetResource(string, object) uno

Snap(float2) : float2 uno

SnapDown(float2) : float2 uno

SnapToPixels : bool ux

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

SnapUp(float2) : float2 uno

Templates : IList of Template ux

List of templates that will be used to populate this Visual.

TryParentToLocal(float2, float2) : bool uno

Converts a coordinate from the parent space into the local space.

ValidFrameCount : int uno

ViewHandle : ViewHandle uno

Viewport : IViewport uno

VisualChildCount : int uno

The number of child visuals of this visual.

VisualContext : VisualContext uno

WindowToLocal(float2) : float2 uno

WorldPosition : float3 uno

WorldTransform : float4x4 uno

WorldTransformInverse : float4x4 uno

ZOffset : float ux

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

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

Attached UX Attributes

ColorScheme (attached by Resources) : ColorScheme ux

Dock (attached by DockPanel) : Dock ux

Specifies how an element is docked while inside a DockPanel

Items (attached by Each) : object ux

The item collection that will be used to populate this visual.

MatchKey (attached by Each) : string ux

Shorthand for setting the MatchKey property on the implicit Each created when using the Items attached property.

Edge (attached by EdgeNavigation) : NavigationEdge ux

LayoutMaster (attached by LayoutControl) : Element ux

Makes an element inherit the layout of another.

Delegate (attached by Focus) : Visual ux

Gained (attached by AttachedFocusMembers) : FocusGainedHandler (object, FocusGainedArgs) ux

Called when a Visual receives input focus.

IsFocusable (attached by Focus) : bool ux

Lost (attached by AttachedFocusMembers) : FocusLostHandler (object, FocusLostArgs) ux

Called when a Visual loses input focus.

Clicked (attached by Clicked) : ClickedHandler (object, ClickedArgs) ux

Tapped (attached by Tapped) : TappedHandler (object, TappedArgs) ux

Column (attached by Grid) : int ux

The index of the column the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.

ColumnSpan (attached by Grid) : int ux

The number of columns this element occupies in a Grid. Defaults to 1.

Row (attached by Grid) : int ux

The index of the row the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.

RowSpan (attached by Grid) : int ux

The number of rows this element occupies in a Grid. Defaults to 1.

Model (attached by ModelJavaScript) : string ux

KeyPressed (attached by AttachedKeyboardMembers) : KeyPressedHandler (object, KeyPressedArgs) ux

Called when a Visual receives a key press event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.

KeyReleased (attached by AttachedKeyboardMembers) : KeyReleasedHandler (object, KeyReleasedArgs) ux

Called when a Visual receives a key release event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.