Structure UI examples
Find a list of structure UI examples.
Read time 1 minuteLast updated 21 days ago
The best way to learn how to structure UI is to try examples. The following examples demonstrate how to use built-in controls, and create and use custom controls in your UI.
Layout
Topics | Description |
|---|---|
| Relative and absolute positioning C# example | Use relative and absolute positioning to lay out UI in C#. |
List and tree views
Topics | Description |
|---|---|
| Create list and tree views | Use ListView, TreeView, MultiColumnListView, and MultiColumnTreeView to create list and tree views. |
| Create a complex list view | Use ListView to create a custom Editor window with a list of characters. |
| Create a list view runtime UI | Use ListView to create a simple character selection screen runtime UI. |
| Create a drag-and-drop list and tree views between windows | Use ListView, TreeView, and MultiColumnListView to create a drag-and-drop UI between windows. |
Scroll view
Topics | Description |
|---|---|
| Wrap content inside a ScrollView | Use styles to wrap content inside a scroll view. |
Label
Topics | Description |
|---|---|
| Create a tabbed menu | Use Label to create tabbed menu. |
Pop-up window
Topics | Description |
|---|---|
| Create a pop-up window | Use |
Toggle
Topics | Description |
|---|---|
| Use Toggle to create a conditional UI | Use Toggle to create a conditional UI in an Editor window. |
Custom control
Topics | Description |
|---|---|
| Create a custom control with two attributes | Create a simple custom control with two attributes and expose the custom control to the UXML and UI Builder. |
| Create a slide toggle custom control | Create a "switch-like" toggle custom control. |
| Create a radial progress indicator | Create a custom control that displays a floating point number between 0 and 100. |
| Create a bindable custom control | Create a custom control that binds to a property with the double data type. |
| Create a custom style for a custom control | Create a custom control that reads two colors from USS and uses them to generate a texture. |
| Create an aspect ratio custom control | Create a custom control that maintains a specific aspect ratio. |
| Create a custom inventory property drawer | Create custom property drawers to customize the appearance and behavior of UXML attributes of a custom control in the Inspector. |
| Create custom inspector UIs for UxmlSerializedData | Use |
Asset management
Topics | Description |
|---|---|
| Load UI assets with Addressables | Create a simple UXML file and a USS file, make them addressable, and load them at runtime in a MonoBehaviour script. |