Property Types

AlignmentBoundary

A value that is used to constrain the result of aligning an element.

Value	Description
None	The element has no boundary and no clamping will occur
Screen	The element's position is clamped to the screen. This ensures the element remains on screen
Parent	The element's position is clamped inside the bounds of it's parent
ParentContentArea	The element's position is clamped to the it's parent size minus any padding or border the parent has on the relaveant axis
Clipper	The element's position is clamped to the it's clipper's bounds
View	The element's position is clamped to the it's view's bounds
UnconstrainedParent	The element's position is clamped to the it's parent's bounds but ignores the element's size, effectively ensuring the alignment point remains inside the parent but the rest of the element is unconstrained

syntax

AlignmentDirection

Determines the direction that alignment will occur.

Value	Description
Start	The element aligns from the left side of the parent
End	The element aligns from the right side of the parent

syntax

AlignmentOffset

Offsets the point from which alignment occurs

Unit	Shorthand	Description
Width	w	The width of the element
Height	h	The height of the element
ContentHeight	cnth	The content height of the element
ContentWidth	cntw	The content width of the element
Em	em	The em size resolved for this element
ParentWidth	pw	The post layout width of the parent element or the view size if parent is null
ParentHeight	ph	The post layout height of the parent element or the view size if parent is null
ParentContentAreaWidth	pcaw	The parent's width (or viewport width if parent is null) minus any border and padding on the horizontal axis
ParentContentAreaHeight	pcah	The parent's height (or viewport height if parent is null) minus any border and padding on the vertical axis
ContentAreaWidth	caw	The post layout width of the element minus any padding and border on the horizontal axis
ContentAreaHeight	cah	The post layout height of the element minus any padding and border on the vertical axis
Percent	%	A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is
Pixel	px	A fixed pixel value that accounts for any dpi scaling
ScreenWidth	sw	The total screen width in dpi scaled pixels
ScreenHeight	sh	The total screen height in dpi scaled pixels
ViewportWidth	vw	The width of the view that an element belongs to in dpi scaled pixels
ViewportHeight	vh	The height of the view that an element belongs to in dpi scaled pixels
BackgroundImageWidth	bw	The width of the currently assigned background texture in unscaled texels
BackgroundImageHeight	bh	The height of the currently assigned background texture in unscaled texels

syntax

AlignmentTarget

Determines the point against which an element applies alignments.

Value	Description
LayoutBox	The element aligns relative to it's own layout position and size
Clipper	The element aligns relative to it's clippers position and size or it's view if there is no clipper
Parent	The element aligns relative to it's parent position and size
ParentContentArea	The element aligns relative to it's parent position and size inset by any padding and border the parent has on the relavant axis
View	The element aligns relative to it's view
Screen	The element aligns relative to the screen
Mouse	The element aligns relative to the mouse position. This is an easy way to make things follow the mouse

syntax

AspectRatio

Constrains the element's size based on a provided aspect ratio.

There are two valid values WidthControlsHeight and HeightControlsWidth

These modes in conjuction with a ratio define the size constraints for this element during layout.

There are some layout types that cannot support this in some cases, most notably HorizontalWrap and VerticalWrap cannot support element's aspect ratio constraints on the main axis.

Style syntax examples:

height-ctrl-width 1:1 width-ctrl-height 3:2 height-ctrl-width 5:1

syntax

BackgroundFit

Determines how an element's background texture will scale with the element's rendered size.

Value	Description
ScaleToFit	The image will scale up or down with element size but will retain it's native aspect ratio
ScaleToFitAndOverflow	The image will scale up or down with element size but will retain it's native aspect ratio, allows the texture to overflow the element size
Fill	The image will always fill the entire element and will not retain its native aspect ratio

syntax

BorderMode

Currently Unused

syntax

ClipBehavior

Determines what kind of rectangles can clip this element.

Value	Description
Normal	The element is clipped against the next highest element in it's ancestry with an OverflowX or OverflowY property defined
Never	The element will never be clipped
View	The element will clip only against it's view
Screen	The element will clip only against the screen

syntax

ClipBounds

Determines the rectangle considered for clipping children when OverflowX or OverflowY are set for an element

Value	Description
BorderBox	The clipping size is determined based on the full size of the element
ContentBox	The clipping size is determined based on the full size of the element and inset by any padding or border on the clipping element

syntax

CursorInfo

A reference to a cursor asset

syntax

ElementRelativeSize

A size that is relative to an element's post layout size.

% is relative to the element's height or width depending on which axis this property is applied to.

Unit	Shorthand	Description
Width	w	The width of the element
Height	h	The height of the element
Percent	%	A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is
Pixel	px	A fixed pixel value that accounts for any dpi scaling
BackgroundImageWidth	bw	The width of the currently assigned background texture in unscaled texels
BackgroundImageHeight	bh	The height of the currently assigned background texture in unscaled texels
MinWidthHeight	mnwh	The minimum of the target's width or height
MaxWidthHeight	mxwh	The maximum of the target's width or height

syntax

FontAssetId

A reference to a Font asset

syntax

FontStyle

Not yet implemented

Value	Description
Normal	The text will render normally without decoration
Bold	The text will render with a bold font if available or a pseudo bold if no bold font is provided
Italic	The text will render with an italic font if available or a pseudo italic if no italic font is provided
Underline	The text will render with an underline
StrikeThrough	The text will render with a strike though

Multiple values can applied with an | operator. For example to render both bold and italic: Bold | Italic

syntax

GridItemPlacement

Defines how an element is placed inside of a grid layout. Only applies if the element's layout parent is a grid

This is made of two parts, a place and a span. place refers to the coordinate on the relevant axis that the element should placed on. If place < 0 the grid will automatically place the element in the next available cell(s).

span tells the grid how wide or tall the element should be inside the grid. If span <= 0 it will default to 1

syntax

GridLayoutDensity

Grids can either be Dense or Sparse. When a grid places element inside of itself, Dense will always try to place new elements starting at the first cell where Sparse will remember the last place it successfully placed and element and will continue placement from that point. Sparse is faster since the search range is reduced.

syntax

GridTemplate

Grids define a template of cells that determine how elements are sized and placed within it.

A grid can define a maximum of 24 cells on each axis

syntax

ImageRenderMode

Not yet implemented

syntax

LayoutBehavior

An element can either participate in it's parent's layout phase (Normal) or not (Ignored). An element with LayoutBehavior = Ignored will be totally ignored by it's parent and will not contribute to it's parent size at all. Ignored elements are always laid out at their parent's top left position. Ignored elements can reference sizes relative to their parent and excute their layout after the parent has completed it's main layout pass.

syntax

LayoutDirection

Layout direction determines if an element lays out it's children starting with the first child and ending with the last child (Forward) or starting with the last child and ending with the first (Reverse)

syntax

LayoutType

Determines the layout algorithm used by an element to layout it's children that are do not have LayoutBehavior = Ignored

Value	Description
Vertical	A one dimensional vertical column
Horizontal	A one dimensional horizontal colum
GridHorizontal	A two dimensional grid that places children first horizontally then wraps to another row when overflowing
GridVertical	A two dimensional grid that places children first vertically then wraps to another column when overflowing
HorizontalWrap	Similar to Horizontal except that children that overflow will wrap to a new row instead of simply overflowing
VerticalWrap	Similar to Vertical except that children that overflow will wrap to a new column instead of simply overflowing
Stack	All children are laid out on top of each other on the z axis
Radial	Not yet implemented

syntax

Overflow

Determines if any descendants that overflow are Visible or Hidden. Note that this only applies to screen aligned bounding boxes and is not the same as per-pixel masking.

syntax

PointerEvents

Determine if input should be handled by an element or completely ignored

Value	Description
Normal	Input is handled as normal
None	Input is totally ignored

syntax

RenderTransform

Applies a series of matrix transformations to an element in world space. Supports up to 7 transformations.

syntax

RevealDirection

The direction in which a reveal effect runs, either Clockwise or CounterClockWise

syntax

RevealMode

Value	Description
None	No reveal effect
Manual	User completely controls the effect with the corresponding style properties
HorizontalSweepLeft	Reveal the element from right to left
HorizontalSweepRight	Reveal the element from left to right
VerticalSweepUp	Reveal the element from bottom to top
VerticalSweepDown	Reveal the element from top to bottom
RadialSweep	Reveal the element from the center point in a sweep direction set by RevealDirection
CenterExpand	Reveal the element from the center in an ever growing circle, size is set by RevealAmount
OffsetExpand	Reveal the element from the RevealOffsetX and RevealOffsetY positions in an ever growing circle, size is set by RevealAmount

syntax

SpaceCollapse

Determines the interaction of padding and margin between elements in a layout.

Multiple values can be set with the | operator

Value	Description
None	No changes occur, both parent and siblings all keep their defined paddings and margins
RemoveInner	Removes all marigins from children except left margin on the first child and right margin on the last
RemoveOuter	Removes margin left from the first child and margin right from the last child
CollapseOuter	Looks at the parent's padding left and the first child's margin left and takes the larger of the two. Does the opposite for the last child
CollapseInner	Looks at the margins between each child and takes the largest of the two
Collapse	Applies both CollapseInner and CollapseOuter
Remove	Applies both RemoveInner and RemoveOuter

syntax

TextAlignment

Aligns the text within its own layout box. Does not impact text position if text is content sized because in that case there is no space to align into.

Value	Description
Left	Push text to the left
Right	Push text to the right
Center	Center the text

syntax

TextAlignmentVertical

Aligns the text vertically within its own layout box. Does not impact text position if text is content sized because in that case there is no space to align into.

Not currently working

Value	Description
Baseline	Aligns text to the elements baseline
Top	Aligns text to geometric top of the text quads
Bottom	Aligns text to geometric bottom of the text quads
Center	Aligns text to geometric center of the text quads

syntax

TextOverflow

Determine how text is displayed that overflows its own bounds

Not currently working

Value	Description
None	Do nothing and allow the overflow
Truncate	Shorten the rendered text so there is no overflow
Ellipsis	Shorten the rendered text so there is no overflow and append ...

syntax

TextTransform

Performs a case transform on text

Value	Description
None	Input is unchanged
UpperCase	All characters in the text will be uppercased
LowerCase	All characters in the text will be lowercased
SmallCaps	All characters in the text will be uppercased but rendered smaller. Not currently working
TitleCase	The first character of each word in the text will be upper cased. Not currently working

syntax

TextureInfo

A reference to a texture, gradient, or mask. Includes a SampleMode that defines how the texture will be used

Value	Description
Default	Just renders the texture as is
NineSlice	Applies 9-slice borders based on the element's Border sizes and the texture asset's Border size
LinearGradient	Samples the texture a linear gradient. Underlying texture data should be a gradient or this will look very strange
RadialGradient	Samples the texture a radial gradient. Underlying texture data should be a gradient or this will look very strange
EllipticalGradient	Samples the texture an elliptical gradient gradient. Underlying texture data should be a gradient or this will look very strange
ConicGradient	Samples the texture a conic gradient. Underlying texture data should be a gradient or this will look very strange
SoftMask	Samples the texture as a soft mask, applying its alpha value along with a threshold to determine which parts of the main texture are visible
SoftMaskInverse	Same as SoftMask but inverts the mask region
HardMaskInverse	Same as HardMask but inverts the mask region

syntax

TextureRelativeSize

A size that is relative to a given texture's size.

% is relative to the texture's height or width depending on which axis this property is applied to.

Unit	Shorthand	Description
Percent	%	A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is
Pixel	px	A fixed pixel value that accounts for any dpi scaling
ImageWidth	bw	The width of the currently assigned background texture in unscaled texels
ImageHeight	bh	The height of the currently assigned background texture in unscaled texels

syntax

UIAngle

An angular measurement

% is relative to a rotation of 360 degrees. 25% == 90 degrees, 50% == 180 degrees, etc

Unit	Shorthand	Description
Percent	%	A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is
Degrees	deg	An angular value in degrees
Radians	rad	An angular value in radians

syntax

UIFontSize

Unit	Shorthand	Description
Em	em	The em size resolved for this element
Rem	rem	The root em size resolved for this element
Point	pt	A size specified in units defined by the currently assigned font file or the default font if none is assigned
Pixel	px	A fixed pixel value that accounts for any dpi scaling

syntax

UIMeasurement

A size used for measuring elements for layout.

% is relative to the parent's layout size.

There is a paradox that is possible where a parent has a size relative to its content and a child size's relative to its parent. In such cases the child will have a 0 size.

Unit	Shorthand	Description
Content	cnt	The content size of the element
Em	em	The em size resolved for this element
LineHeight	lh	The line height of the element computed from the current font size
ParentSize	psz	The size of the parent. Note that if there exists a paradox where the parent sizes itself based on content size and some child sizes itself based on the parent size. In this case the child will set its size to zero. This paradox is only applicable for layout
Percent	%	A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is
Pixel	px	A fixed pixel value that accounts for any dpi scaling
ViewportWidth	vw	The width of the view that an element belongs to in dpi scaled pixels
ViewportHeight	vh	The height of the view that an element belongs to in dpi scaled pixels
BackgroundImageWidth	bw	The width of the currently assigned background texture in unscaled texels
BackgroundImageHeight	bh	The height of the currently assigned background texture in unscaled texels
Stretch	s	A portion of 'remaining space' that should be attributed to this element.
ApplicationWidth	aw	The total width of the root view in dpi scaled pixels
ApplicationHeight	ah	The total width of the root view in dpi scaled pixels
MaxChild	mx	The size of the largest child
MinChild	mn	The size of the smallest child
StretchContent	strcnt	A unit that reserves at least 1x the content size and then adds n stretch pieces
FitContent	fc	Not Supported
FillRemaining	fr	A fixed percentage of the remaining space in a layout before stretch values are distributed

syntax

UIRange01

A range between 0 and 1 also expressable and a percentage

syntax

UISizeConstraint

A size that is used to constrain the min and max size of an element for layout.

% is relative to the parent's layout size.

Unit	Shorthand	Description
Content	cnt	The content size of the element
Em	em	The em size resolved for this element
LineHeight	lh	The line height of the element computed from the current font size
ParentSize	psz	The size of the parent. Note that if there exists a paradox where the parent sizes itself based on content size and some child sizes itself based on the parent size. In this case the child will set its size to zero. This paradox is only applicable for layout
Percent	%	A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is
Pixel	px	A fixed pixel value that accounts for any dpi scaling
ViewportWidth	vw	The width of the view that an element belongs to in dpi scaled pixels
ViewportHeight	vh	The height of the view that an element belongs to in dpi scaled pixels
BackgroundImageWidth	bw	The width of the currently assigned background texture in unscaled texels
BackgroundImageHeight	bh	The height of the currently assigned background texture in unscaled texels
ApplicationWidth	aw	The total width of the root view in dpi scaled pixels
ApplicationHeight	ah	The total width of the root view in dpi scaled pixels
MaxChild	mx	The size of the largest child
MinChild	mn	The size of the smallest child

syntax

UISpaceSize

A size that is used to determine spacings around and between elements.

Unit	Shorthand	Description
Em	em	The em size resolved for this element
Pixel	px	A fixed pixel value that accounts for any dpi scaling
ViewportWidth	vw	The width of the view that an element belongs to in dpi scaled pixels
ViewportHeight	vh	The height of the view that an element belongs to in dpi scaled pixels
Stretch	s	A portion of 'remaining space' that should be attributed to this element.
ApplicationWidth	aw	The total width of the root view in dpi scaled pixels
ApplicationHeight	ah	The total width of the root view in dpi scaled pixels

syntax

UVWrapMode

Tells the graphics system how the uvs of a texture should be handled if they overflow.

Value	Description
Default	Behavior is determined based on the type of texture being sampled
Wrap	Constrain the uvs to the texture box and wrap them around if they overflow
Clamp	Never exceed the extreme edges of the uv box

syntax

Visibility

Determines the rendering visibility of an element. Does not impact layout or input handling or clipping.

Value	Description
Visible	The element is always rendered according to clipping rules as normal
Hidden	The element is not rendered

syntax

WhitespaceMode

Tells the text system how whitespace should be handled for a given piece of text.

Multiple values can be combined using the | operator

Value	Description
None	No special processing
CollapseWhitespace	Subsequent whitespace characters are collapsed to be at most 1 character
PreserveNewLines	If there are new line characters in the source, do not collapse them
TrimStart	If there is whitespace between text start and the first visible character, remove it
TrimEnd	If there is whitespace between text end and the last visible character, remove it
TrimLineStart	On each line remove any leading whitespace
TrimLineEnd	On each line remove any trailing whitespace
NoWrap	Disable the auto wrapping feature
CollapseMultipleNewLines	Subsequent new lines get collapsed into a single new line
TrimLine	Applies TrimLineStart and TrimLineEnd
Trim	Applies TrimStart and TrimEnd
CollapseWhitespaceAndTrim	Applies Trim and CollapseWhitespace

syntax