# Style Properties Reference

Complete reference for all styling properties available on DisplayKit elements.

## Table of Contents

- [Background](#background-backgrounddata)
- [Flex](#flex-flexdata)
- [Align](#align-aligndata)
- [Size](#size-sizedata)
- [Spacing](#spacing-spacingdata)
- [Border](#border-borderdata)
- [Position](#position-positiondata)
- [Transform](#transform-transformdata)
- [Display](#display-displaydata)
- [Text](#text-textdata)
- [Available Fonts](#available-fonts-fonttype)

---

## Background (`BackgroundData`)

Controls the element's background appearance.

| Property | Type | Description |
|----------|------|-------------|
| `Color` | `StyleColor` | Background color |

```csharp
element.Background.Color = Color.blue;
element.Background.Color = new Color(1f, 0f, 0f, 0.5f); // Semi-transparent red
```


### Visual Guide

![Background](Images/background-layout.png)

---

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

```csharp
// 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](Images/flex-layout.png)
*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 |

```csharp
// 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](Images/alignment.png)
*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 |

```csharp
// 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](Images/size-layout.png)

---

## 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 |

```csharp
// 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](Images/spacing-layout.png)

---

## 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 |

```csharp
// 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](Images/border-styles.png)
*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 |

```csharp
// 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](Images/positioning.png)
*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 |

```csharp
// 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](Images/transform-layout.png)

---

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

```csharp
// 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](Images/display-layout.png)

---

## 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 |

```csharp
// 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

```csharp
// 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](Images/text-layout.png)

---

## 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 |

```csharp
// Usage
textElement.Text.Font = FontType.RobotoBold;
textElement.Text.Font = FontType.RobotoMonoRegular;
```

---

## Next Steps

- [Element Reference](DisplayKit-ElementReference) - Element API documentation
- [Examples](DisplayKit-Examples) - See styling in action