Implementation references
Scripting API and implementation references.
UI Toolkit
IMGUI
Overview
- 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 in UI Toolkit
API in
UIT
Guidance
Choosing between foldout, list view, and tree view
- 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
Tree view requires all visual elements to have the same height so that it can calculate a sensible scroller size.
Use rowHeightto set the fixed height used for each row in the TreeView.
Alternating row backgrounds
Use showAlternatingRowBackgrounds property to add alternating row background colors to the tree view.
Show border
Use showBorder property to show a border around the tree view.
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
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
- 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
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
Renaming tree view Items
Double clicking on a tree view item allows for renaming of the selected item.
Formatting
Anatomy and layout
Anatomy
A Tree view can contain and be paired with the following elements:
1. TreeView
2. TreeViewItem
3. Scrollbar
Interaction states
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
Tree view item backgrounds
Code samples
Code references
Resources and related
