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.