Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Implementation references

Scripting API and implementation references.

UI Toolkit
IMGUI

Overview

Tree view in use in project window
  • Tree view displays in a multi-tiered hierarchy unlike list view which displays items as a flat list
  • This control only creates visual elements for visible items while allowing the binding of many more items
  • As the user scrolls, visual elements in tree view are recycled and re-bound to new data items

Tree view APIs

Tree view and tree view Item in project window

Tree view in UI Toolkit

UI Toolkit
Tree view in IMGUI
IMGUI
TreeView
Makes a hierarchical list of items
TreeViewItem
Defines information for each tree view item

Guidance

Comparing tree view, list view, and foldout

1. Tree View 2. List view 3. Foldout
  • Tree view is used for displaying items in a multi-tiered hierarchy, like a folder structure
  • List view is used for displaying items as a flat list
  • Foldout is used to expand or collapse a single level of mixed content, like Inspector controls

Style

Row height
An annotated diagram of a foldout header and foldout contents
Tree view and list views with 16 px row heights

Tree View and List View items can have different height values by changing the virtualization method ->

Alternating row backgrounds

Use showAlternatingRowBackgrounds property to add alternating row background colors to the TreeView.

Show border

Use showBorder property to show a border around the TreeView.

Multi column header

Use multiColumnHeader property to get the MultiColumnHeader of the TreeView. Can be null if the TreeView was created without a MultiColumnHeader.

Header label style
An annotated diagram of a foldout header and foldout contents
Bold and regular label styles in tree view items

Header label text can be bold to signify a main parent folder in the hierarchy, such as assets folder in project window.

Tree view indentation and nesting
An annotated image of nested foldouts and the pixel values of each indentation level
Nested tree view items displaying indentation values
  • Tree view content is indented 15 pixels for each nested level
  • Nested tree view item limit is six items - beyond that the 15 px indentation padding is not adjusted
  • Foldout arrow is rendered offset from the content area

Behavior

Scrolling content

Tree view contents are always displayed in a scroll view container to enable scrolling when the contents are larger than the viewport.

  • Vertical scrolling is enabled by default
  • Use showingHorizontalScrollBar property to display horizontal scrolling in IMGUI framework
Expand and collapse
Tree view expand and collapse behavior

In tree views (e.g. hierarchy, project window), clicking on the foldout arrow expands the foldout, and clicking on the foldout text selects the tree view element.

Drag and drop to reorder and nest
Cursor changing format while moving
Tree view items can be dragged to reorder their position, e.g. hierarchy window
Cursor changing format while moving
Tree view items can be dragged into other folders to nest them, e.g. project window
Renaming tree view Items

Double clicking on a tree view item allows for renaming of the selected item.

Formatting

Anatomy and layout

Anatomy
Anatomy of a tree view and its key parts

A Tree view can contain and be paired with the following elements:

1. TreeView
2. TreeViewItem
3. Scrollbar

Interaction states

The various interactive states of a tree view
Expanded

An open tree view item displaying its children.

Collapsed

A collapsed tree view item.

Default (inactive)

Default state of tree view item.

Hovered

When hovered, tree view item rows are highlighted.

Selected

When selected, tree views rows are highlighted.

Focused

When focused, tree view item labels are highlighted in blue.

Disabled

Disabled tree view items.

Color

1. Tree view item label 2. Foldout arrow  3. Icon
1. Tree view item label
--unity-colors-default-text
The default text color
#090909
#D2D2D2
--unity-colors-default-text-hover
The default text color when the mouse pointer hovers over the text
#090909
#BDBDBD
--unity-colors-highlight-text-inactive
The text color for selected items or selected text when the control does not have focus
#FFFFFF
#FFFFFF
--unity-colors-label-text-focus
The text color for a label when it has focus
#003C88
#81B4FF
2. Foldout arrow
Foldout Arrow
Foldout arrow color
#686868
#7A7A7A
3. Icon
Primary Icon Color
Icons that don’t require to be color coded uses this color
#555555
#C4C4C4
Tree view item backgrounds
--unity-colors-alternated_rows-background
The alternate background color for views with alternating row colors
#CACACA
#3F3F3F
--unity-colors-highlight-background
The background color for selected items or selected text
#3A72B0
#2C5D87
--unity-colors-highlight-background-hover
The background color for line items when the mouse pointer hovers over them
rgba(0, 0, 0, 0.0627451)
rgba(256, 256, 256, 0.0627451)
--unity-colors-highlight-background-hover-lighter
The background color for an item with a line specific background color when the mouse pointer hovers over them
#9A9A9A
#5F5F5F

Code samples