Skip to content

DisplayKit StyleProperties

Jump to bottom
Killers0992 edited this page Mar 15, 2026 · 3 revisions

Style Properties Reference

Complete reference for all styling properties available on DisplayKit elements.

Table of Contents

Background (BackgroundData)

Controls the element's background appearance.

Property Type Description
Color StyleColor Background color 
element.Background.Color = Color.blue;
element.Background.Color = new Color(1f, 0f, 0f, 0.5f); // Semi-transparent red

Visual Guide

Background

Flex (FlexData)

Controls flexbox layout behavior.

Property Type Description
Grow StyleFloat How much element grows relative to siblings
Shrink StyleFloat How much element shrinks relative to siblings
Basis StyleLength Initial size before grow/shrink
Direction StyleEnum<FlexDirection> Layout direction (Row, Column, RowReverse, ColumnReverse)
Wrap StyleEnum<Wrap> Whether items wrap to multiple lines (Wrap, NoWrap) 
// Element takes all available space
element.Flex.Grow = 1f;

// Column layout
element.Flex.Direction = FlexDirection.Column;

// Prevent shrinking
element.Flex.Shrink = 0f;

// Enable wrapping
element.Flex.Wrap = Wrap.Wrap;

// Set initial size
element.Flex.Basis = Length.Percent(50f);

Visual Guide

Flex Layout Diagram Flexbox properties: Grow (expands to fill), Shrink (can shrink), Direction (Row/Column)

Align (AlignData)

Controls alignment of children and self.

Property Type Description
AlignItems StyleEnum<Align> Cross-axis alignment of children (FlexStart, Center, FlexEnd, Stretch)
JustifyContent StyleEnum<Justify> Main-axis distribution (FlexStart, Center, FlexEnd, SpaceBetween, SpaceAround, SpaceEvenly)
AlignSelf StyleEnum<Align> Override this element's alignment
AlignContent StyleEnum<Align> Multi-line content alignment 
// Center children
element.Align.AlignItems = Align.Center;
element.Align.JustifyContent = Justify.Center;

// Space between items
element.Align.JustifyContent = Justify.SpaceBetween;

// Right-align this specific element
element.Align.AlignSelf = Align.FlexEnd;

// Space evenly
element.Align.JustifyContent = Justify.SpaceEvenly;

Visual Guide

Alignment Properties AlignItems (cross-axis) vs JustifyContent (main-axis) - center, start, end, space between

Size (SizeData)

Controls element dimensions.

Property Type Description
Width StyleLength Element width
Height StyleLength Element height
MinWidth StyleLength Minimum width
MinHeight StyleLength Minimum height
MaxWidth StyleLength Maximum width
MaxHeight StyleLength Maximum height 
// Fixed size
element.Size.Width = 300f;
element.Size.Height = 200f;

// Responsive (percentage)
element.Size.Width = Length.Percent(50f);

// Constraints
element.Size.MinWidth = 100f;
element.Size.MaxWidth = 500f;
element.Size.MinHeight = 50f;
element.Size.MaxHeight = 300f;

Visual Guide

Size

Spacing (SpacingData)

Controls padding and margin.

Property Type Description
MarginTop StyleLength Top margin
MarginBottom StyleLength Bottom margin
MarginLeft StyleLength Left margin
MarginRight StyleLength Right margin
PaddingTop StyleLength Top padding
PaddingBottom StyleLength Bottom padding
PaddingLeft StyleLength Left padding
PaddingRight StyleLength Right padding 
// All margins
element.Spacing.MarginLeft = 10f;
element.Spacing.MarginRight = 10f;
element.Spacing.MarginTop = 20f;
element.Spacing.MarginBottom = 20f;

// All padding
element.Spacing.PaddingTop = 15f;
element.Spacing.PaddingBottom = 15f;
element.Spacing.PaddingLeft = 20f;
element.Spacing.PaddingRight = 20f;

// Individual sides
element.Spacing.PaddingTop = 10f;
element.Spacing.MarginBottom = 5f;

Visual Guide

Spacing

Border (BorderData)

Controls border appearance.

Property Type Description
Color StyleColor All border colors (sets all sides)
TopColor StyleColor Top border color
BottomColor StyleColor Bottom border color
LeftColor StyleColor Left border color
RightColor StyleColor Right border color
Width StyleFloat All border widths (sets all sides)
TopWidth StyleFloat Top border width
BottomWidth StyleFloat Bottom border width
LeftWidth StyleFloat Left border width
RightWidth StyleFloat Right border width
Radius StyleLength All corner radii (sets all corners)
TopLeftRadius StyleLength Top-left corner radius
TopRightRadius StyleLength Top-right corner radius
BottomLeftRadius StyleLength Bottom-left corner radius
BottomRightRadius StyleLength Bottom-right corner radius 
// Simple border
element.Border.Color = Color.white;
element.Border.Width = 2f;

// Rounded corners
element.Border.Radius = 8f;

// Individual sides
element.Border.TopColor = Color.red;
element.Border.BottomColor = Color.blue;
element.Border.LeftWidth = 5f;
element.Border.RightWidth = 2f;

// Individual corners
element.Border.TopLeftRadius = 15f;
element.Border.BottomRightRadius = 15f;

// Card-like appearance
element.Border.Color = new Color(0.5f, 0.5f, 0.5f);
element.Border.Width = 1f;
element.Border.Radius = 10f;

Visual Guide

Border Styles Different border widths, colors, and corner radius values

Position (PositionData)

Controls element positioning.

Property Type Description
Position StyleEnum<Position> Position mode (Absolute, Relative)
Top StyleLength Top offset
Bottom StyleLength Bottom offset
Left StyleLength Left offset
Right StyleLength Right offset 
// Absolute positioning
element.Position.Position = Position.Absolute;
element.Position.Top = 50f;
element.Position.Left = 100f;

// Fixed distance from edges
element.Position.Top = 20f;
element.Position.Bottom = 20f;
element.Position.Left = 20f;
element.Position.Right = 20f;

// Percentage positioning
element.Position.Top = Length.Percent(10f);
element.Position.Left = Length.Percent(50f);

// Relative positioning (default)
element.Position.Position = Position.Relative;
element.Position.Top = 10f; // Offset from normal position

Visual Guide

Positioning Modes Absolute positioning (top/left coordinates) vs Relative positioning (offset from flow)

Transform (TransformData)

Controls element transformations.

Property Type Description
Translate StyleTranslate Translation offset
Scale StyleScale Scale factor
Rotate StyleRotate Rotation angle
TransformOrigin StyleTransformOrigin Transform origin point 
// Scale element
element.Transform.Scale = new Scale(new Vector3(1.5f, 1.5f, 1f));

// Rotate element
element.Transform.Rotate = new Rotate(45f);

// Move element
element.Transform.Translate = new Translate(new Vector2(10f, 20f));

// Combine transforms
element.Transform.Scale = new Scale(new Vector3(2f, 2f, 1f));
element.Transform.Rotate = new Rotate(90f);
element.Transform.Translate = new Translate(new Vector2(50f, 50f));

// Transform origin
element.Transform.TransformOrigin = new TransformOrigin(50, 0, 0); // Rotate around center-top

Visual Guide

Transform

Display (DisplayData)

Controls element visibility and rendering.

Property Type Description
Display StyleEnum<DisplayStyle> Display mode (Flex, None)
Visibility StyleEnum<Visibility> Visibility (Visible, Hidden)
Opacity StyleFloat Opacity (0-1)
Overflow StyleEnum<Overflow> Overflow handling (Visible, Hidden, Scroll) 
// Hide element (removes from layout)
element.Display.Display = DisplayStyle.None;

// Show element (default)
element.Display.Display = DisplayStyle.Flex;

// Semi-transparent
element.Display.Opacity = 0.5f;

// Completely transparent
element.Display.Opacity = 0f;

// Clip overflow
element.Display.Overflow = Overflow.Hidden;

// Show overflow
element.Display.Overflow = Overflow.Visible;

// Invisible but takes up space
element.Display.Visibility = Visibility.Hidden;

// Visible (default)
element.Display.Visibility = Visibility.Visible;

Visual Guide

Display

Text (TextData)

Text-specific styling (only applies to DisplayText).

Property Type Description
Font FontType Font family (see Available Fonts below)
FontStyle StyleEnum<FontStyle> Font style (Normal, Italic, etc.)
FontSize StyleLength Font size
Color StyleColor Text color
Align StyleEnum<TextAnchor> Text alignment (UpperLeft, UpperCenter, UpperRight, MiddleLeft, Center, MiddleRight, LowerLeft, LowerCenter, LowerRight)
Wrap StyleEnum<WhiteSpace> Text wrapping (Normal, NoWrap, Pre, PreWrap)
Overflow StyleEnum<TextOverflow> Text overflow (Visible, Ellipsis, Clip)
LetterSpacing StyleLength Letter spacing
WordSpacing StyleLength Word spacing
ParagraphSpacing StyleLength Paragraph spacing
OutlineWidth StyleFloat Text outline width
OutlineColor StyleColor Text outline color
TextShadow StyleTextShadow Text shadow effect 
// Basic styling
textElement.Text.Font = FontType.RobotoBold;
textElement.Text.FontSize = 32f;
textElement.Text.Color = Color.white;

// Alignment
textElement.Text.Align = TextAnchor.MiddleCenter;
textElement.Text.Align = TextAnchor.UpperLeft;

// Spacing
textElement.Text.LetterSpacing = 2f;
textElement.Text.WordSpacing = 5f;
textElement.Text.ParagraphSpacing = 10f;

// Text shadow
textElement.Text.TextShadow = new TextShadow
{
    color = Color.black,
    offset = new Vector2(2, 2),
    blurRadius = 4f
};

// Outline effect
textElement.Text.OutlineWidth = 2f;
textElement.Text.OutlineColor = Color.black;

// Text wrapping
textElement.Text.Wrap = WhiteSpace.Normal; // Wrap text
textElement.Text.Wrap = WhiteSpace.NoWrap; // Don't wrap

// Overflow
textElement.Text.Overflow = TextOverflow.Ellipsis; // Show "..." for overflow

TextShadow

// No shadow
textElement.Text.TextShadow = new TextShadow(StyleKeyword.Null);

// Simple shadow
textElement.Text.TextShadow = new TextShadow
{
    color = new Color(0, 0, 0, 0.5f),
    offset = new Vector2(2, 2),
    blurRadius = 0f
};

// Soft shadow
textElement.Text.TextShadow = new TextShadow
{
    color = Color.black,
    offset = new Vector2(3, 3),
    blurRadius = 5f
};

// Colored glow
textElement.Text.TextShadow = new TextShadow
{
    color = Color.cyan,
    offset = new Vector2(0, 0),
    blurRadius = 10f
};

Visual Guide

Text

Available Fonts (FontType)

DisplayKit includes these font options:

Default Fonts

Font Description
Default Default/NotInter Regular
LiberationSans Liberation Sans

Roboto

Font Description
RobotoRegular Roboto Regular
RobotoItalic Roboto Italic
RobotoBold Roboto Bold
RobotoBoldItalic Roboto Bold Italic
RobotoLight Roboto Light
RobotoLightItalic Roboto Light Italic
RobotoMedium Roboto Medium
RobotoMediumItalic Roboto Medium Italic
RobotoThin Roboto Thin
RobotoThinItalic Roboto Thin Italic

Roboto Mono

Font Description
RobotoMonoRegular Roboto Mono Regular
RobotoMonoItalic Roboto Mono Italic
RobotoMonoBold Roboto Mono Bold
RobotoMonoBoldItalic Roboto Mono Bold Italic
RobotoMonoLight Roboto Mono Light
RobotoMonoLightItalic Roboto Mono Light Italic
RobotoMonoMedium Roboto Mono Medium
RobotoMonoMediumItalic Roboto Mono Medium Italic
RobotoMonoThin Roboto Mono Thin
RobotoMonoThinItalic Roboto Mono Thin Italic 
// Usage
textElement.Text.Font = FontType.RobotoBold;
textElement.Text.Font = FontType.RobotoMonoRegular;

Next Steps

Table of contents

GUIDES

Development

Clone this wiki locally