UX Markup Literals

This article covers in detail how numbers, vectors, colors and strings are interpreted in UX Markup.

Numbers

Any numeric type (float, int, double, Size etc.) can be represented in the same notation as numbers in JavaScript or double in Uno, with period (.) as optional decimal separator.

Valid numbers:

Example:

<Panel Width="10.5" />

Units

Some properties allow units % (percent), pt (points) or px (pixels). This is noted by simply placing the unit after the number literal.

Examples:

<Panel Width="50%" Height="200px" />

The default unit is unspecified, which unless involved in arithmetic with a value with a specified unit, is interpreted as pt (points)

Vectors

Vector types (float2, float3, float4, Size2, etc.) can be noted in various ways, which is interpreted according to the the following rules.

If a single number value is provided, this value is repeated for each component.

For example;

<Panel Margin="10" />

is equivalent to:

<Panel Margin="10, 10, 10, 10" />

If two numbers (X and Y), separated by a comma (,) are provided then these two components are repeated as [X, Y, X, Y] up to the size of the target vector, for example;

<Panel Margin="4, 8" />

is equivalent to:

<Panel Margin="4, 8, 4, 8" />

This means in the case of Margin, two components specify horizontal (left/right) and vertical (top/bottom) margin respectively.

If three numbers (X, Y and Z) separated by commas (,) are provided, then these components are padded with an extra 1.0 if needed, that is:

<Panel Color="1,0,1" />

is equivalent to:

<Panel Color="1,0,1,1" />

This means in the case of Color, the alpha channel (W) will be set to 1 by default, giving an opaque color if not otherwise specified.

Vectors in expressions

To write a vector as part of an expression, make sure to encapsulate the vector in parentheses to make it parse correctly:

<Panel Color="(1,0,1,1) / {fadeValue}" />

Size Vectors

Some properties are of type Size2 and support separate units for X and Y. An example of such a property is Element.Offset. These values are noted like vectors, where each vector component may specify a unit:

<Panel Offset="10%, 20px" />

Colors

Colors are represented by the type float4 (or float3 if no alpha channel). This means they can be noted the same way as vectors (see above).

To ease working with colors, float4 and float3 vectors may also be denoted in hexadecimal notation using the # sign:

<Panel Color="#18f" />

Hexadecimal colors (vectors) can be given with 3, 4, 6 or 8 hexadecimal digits, interpreted as follows:

#RGB (or #XYZ)
#RGBA (or #XYZW)
#RRGGBB (or #XXYYZZ)
#RRGGBBAA (or #XXYYZZWW)

When the alpha channel (A or W) is ommited, an alpha value of 1.0 (f or ff) is assumed.

Strings

String properties are parsed a bit differently from other properties. Strings properties are by default treated as raw string literals.

<Text Value="Hello, World!" />

To inject a binding expression, we simply place a curly brace expression in the middle of the string, like this:

<Text Value="Hello, {username}!" />

To compute a string from an expression, use the inline expression syntax:

<Text Value="Hello {= toLower({username})}" />