Version: 2023.2
Fallback font
Migration guides

Examples

This page lists a collection of examples that you can build with UI Toolkit:

Layout

Topics 描述
Relative and absolute positioning C# example Use relative and absolute positioning to lay out UI in C#.

List and tree views

Topics 描述
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 描述
Wrap content inside a ScrollView Use styles to wrap content inside a scroll view.

Label

Topics 描述
Create a tabbed menu Use Label to create tabbed menu.

Pop-up window

Topics 描述
Create a pop-up window Use UnityEditor.PopupWindow to create a pop-up window

Toggle

Topics 描述
Use Toggle to create a conditional UI Use Toggle to create a conditional UI in an Editor window.

Custom control

Topics 描述
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 bounds 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.

Transition

Topics 描述
Create a transition in a custom Editor window Create a custom Editor window with three labels that rotate and scale when you hover over them.
Create a transition event Create a custom Editor window with a button and color palette.
Create looping transitions Create a Yo-yo and a A-to-B looping animations.

Drag-and-drop

Topics 描述
Create a drag-and-drop UI inside a custom Editor window Create several slots, and one object that can be dragged into any slot.
Create a drag-and-drop UI to drag between Editor windows Create two custom Editor windows that an asset can be dragged from one window to another.

Basic Editor binding examples

Topics 描述
Bind with binding path in C# script Use bindingPath to create a binding that changes the name of a GameObject in a custom Editor window.
Bind without the binding path Use BindProperty() to create a binding that changes the name of a GameObject in a custom Editor window.
Bind with UXML and C# Create a binding and set the binding path in UXML, and bind with Bind() in C#.
Create a binding with the Inspector Create a binding that binds among a custom Inspector, a custom Editor, and serialized objects.
Bind to nested properties Use the binding-path attribute of a BindableElement in UXML to bind fields to nested properties of a SerializedObject
Bind to a UXML template Create a binding and set binding paths with UXML templates.
Receive callbacks when a bound property changes Creates a custom Editor window with a TextField that binds to the name of a GameObject in a scene.
Receive callbacks when any bound properties change Create a custom Inspector with two fields that warns the user if the values of the fields fall outside certain ranges.

Advanced Editor binding examples

Topics 描述
Bind to a list with ListView Create a list of toggles and binds the list to an underlying list of objects.
Bind to a list without ListView Create a binding that binds to a list with array instead of ListView.
Bind a custom control Create a custom control and bind it to a native Unity type.
Bind a custom control to custom data type Create a custom control and bind it to a custom data type.

Vector UI examples

Topics 描述
Create a pie chart in the Editor and runtime UI Use the Vector API to create a pie chart.
Use Vector API to create a radial progress indicator Use the Vector API to create a radial progress indicator custom control and add the custom control in a runtime UI.

Runtime UI examples

Topics 描述
Get started with runtime UI Use this example to get started with runtime UI.

Runtime data binding examples

Topics 描述
Get started with runtime data binding Use this example to get started with runtime data binding.
Create a custom binding to bind USS selectors Learn how to create a custom binding to bind USS from an example.
Fallback font
Migration guides