UXML element TreeView

Use TreeView to display hierarchical data in a tree-like structure. It’s a powerful and flexible control that’s commonly used to present data with parent-child relationships or nested structures.

Create a TreeView

You can create a TreeView with UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary Builder, UXML, and C#. The following C# example creates a TreeView:

var treeView = new TreeView();

Refresh the collection view

To refresh the collection view, in general, call the RefreshItems or RefreshItem method. However, in the following cases, call Rebuild instead to refresh the collection view:

You change the type of the data source, such as changing from a List<float> to a List<Vector3>.
You make changes to makeItem or destroyItem.

Note: If you call Rebuild, the collection view is completely rebuilt, which can be expensive. If you call RefreshItems or RefreshItem, the collection view is only refreshed, which is less expensive.

Bind the TreeView to data

You can bind the TreeView to a data source. The data source can be a list of objects or a list of strings.

The following example binds a TreeView to a custom type.

treeView.makeItem = () => new VisualElement();
treeView.bindItem = (i) =>
{
    var c = treeView.GetItemDataForIndex<MyCustomType>(i);
};

Note: In the above example, the TreeView.bindItem receives the Index. You must use the Index (not the ID) with GetItemDataForIndex<T>.

Examples

The following UXML example creates a TreeView:

<UXML xmlns="UnityEngine.UIElements">
    <TreeView class="the-uxml-treeview" />
</UXML>

The following C# example illustrates some of the customizable functionalities of the TreeView:

/// <sample>
// Create some list of data, here simply numbers in a few foldouts
var items = new List<TreeViewItemData<string>>(110);
for (var i = 0; i < 10; i++)
{
    var itemIndex = i * 10 + i;

    var treeViewSubItemsData = new List<TreeViewItemData<string>>(10);
    for (var j = 0; j < 10; j++)
        treeViewSubItemsData.Add(new TreeViewItemData<string>(itemIndex + j + 1, (j+1).ToString()));

    var treeViewItemData = new TreeViewItemData<string>(itemIndex, (i+1).ToString(), treeViewSubItemsData);
    items.Add(treeViewItemData);
};

// The "makeItem" function will be called as needed
// when the TreeView needs more items to render
Func<VisualElement> makeItem = () => new Label();

// As the user scrolls through the list, the TreeView object
// will recycle elements created by the "makeItem"
// and invoke the "bindItem" callback to associate
// the element with the matching data item (specified as an index in the list)
Action<VisualElement, int> bindItem = (e, i) =>
{
    var item = treeView.GetItemDataForIndex<string>(i);
    (e as Label).text = item;
};

treeView.SetRootItems(items);
treeView.makeItem = makeItem;
treeView.bindItem = bindItem;
treeView.selectionType = SelectionType.Multiple;
treeView.Rebuild();

// Callback invoked when the user double clicks an item
treeView.itemsChosen += Debug.Log;

// Callback invoked when the user changes the selection inside the TreeView
treeView.selectedIndicesChanged += Debug.Log;
/// </sample>

To try this example live in Unity, go to Window > UI Toolkit > Samples. For more examples, refer to the following:

Create list and tree views: Use ListView, TreeView, MultiColumnListView, and MultiColumnTreeView to create list and tree views.

C# base class and namespace

C# class: TreeView
Namespace: UnityEngine.UIElements
Base class: BaseTreeView

Inherited UXML attributes

This element inherits the following attributes from its base class:

Name	Type	Description
`auto-expand`	`boolean`	When true, items are automatically expanded when added to the TreeView.
`binding-path`	`string`	Path of the target property to be bound.
`fixed-item-height`	`int`	The height of a single item in the list, in pixels. This property must be set when using the `virtualizationMethod` is set to `FixedHeight`, for the collection view to function. If set when `virtualizationMethod` is `DynamicHeight`, it serves as the default height to help calculate the number of items necessary and the scrollable area, before items are laid out. It should be set to the minimum expected height of an item.
`focusable`	`boolean`	True if the element can be focused.
`reorderable`	`boolean`	Gets or sets a value that indicates whether the user can drag list items to reorder them. The default value is `false` which allows the user to drag items to and from other views when you implement `canStartDrag`, `setupDragAndDrop`, `dragAndDropUpdate`, and `handleDrop`. Set this value to `true` to allow the user to reorder items in the list.
`selection-type`	`UIElements.SelectionType`	Controls the selection type. The default value is `SelectionType.Single`. When you set the collection view to disable selections, any current selection is cleared.
`show-alternating-row-backgrounds`	`UIElements.AlternatingRowBackground`	This property controls whether the background colors of collection view rows alternate. Takes a value from the `AlternatingRowBackground` enum.
`show-border`	`boolean`	Enable this property to display a border around the collection view. If set to true, a border appears around the ScrollView that the collection view uses internally.
`tabindex`	`int`	An integer used to sort focusables in the focus ring. Must be greater than or equal to zero.
`virtualization-method`	`UIElements.CollectionVirtualizationMethod`	The virtualization method to use for this collection when a scroll bar is visible. Takes a value from the `CollectionVirtualizationMethod` enum. The default value is `FixedHeight`. When using fixed height, specify the `fixedItemHeight` property. Fixed height is more performant but offers less flexibility on content. When using `DynamicHeight`, the collection will wait for the actual height to be computed. Dynamic height is more flexible but less performant.

This element also inherits the following attributes from VisualElement:

Name	Type	Description
`content-container`	`string`	Child elements are added to it, usually this is the same as the element itself.
`name`	`string`	The name of this VisualElement. Use this property to write USS selectors that target a specific element. The standard practice is to give an element a unique name.
`picking-mode`	`UIElements.PickingMode`	Determines if this element can be pick during mouseEvents or `IPanel.Pick` queries.
`style`	`string`	Reference to the style object of this element. Contains data computed from USS files or inline styles written to this object in C#.
`tooltip`	`string`	Text to display inside an information box after the user hovers the element for a small amount of time. This is only supported in the Editor UI.
`usage-hints`	`UIElements.UsageHints`	A combination of hint values that specify high-level intended usage patterns for the `VisualElement`. This property can only be set when the `VisualElement` is not yet part of a `Panel`. Once part of a `Panel`, this property becomes effectively read-only, and attempts to change it will throw an exception. The specification of proper `UsageHints` drives the system to make better decisions on how to process or accelerate certain operations based on the anticipated usage pattern. Note that those hints do not affect behavioral or visual results, but only affect the overall performance of the panel and the elements within. It’s advised to always consider specifying the proper `UsageHints`, but keep in mind that some `UsageHints` might be internally ignored under certain conditions (e.g. due to hardware limitations on the target platform).
`view-data-key`	`string`	Used for view data persistence (ie. tree expanded states, scroll position, zoom level). This is the key used to save/load the view data from the view data store. Not setting this key will disable persistence for this `VisualElement`.

USS classes

The following table lists all the C# public property names and their related USS selector.

C# property	USS selector	Description
`ussClassName`	`.unity-tree-view`	The USS class name for TreeView elements. Unity adds this USS class to every instance of the TreeView element. Any styling applied to this class affects every TreeView located beside, or below the stylesheet in the visual tree.
`itemUssClassName`	`.unity-tree-view__item`	The USS class name for TreeView item elements. Unity adds this USS class to every item element of the TreeView. Any styling applied to this class affects every item located beside, or below the stylesheet in the visual tree.
`itemToggleUssClassName`	`.unity-tree-view__item-toggle`	The USS class name for TreeView item toggle elements. Unity adds this USS class to every item toggle element of the TreeView. Any styling applied to this class affects every item located beside, or below the stylesheet in the visual tree.
`itemIndentsContainerUssClassName`	`.unity-tree-view__item-indents`	The USS class name for TreeView indent container elements. Unity adds this USS class to every indent container element of the TreeView. Any styling applied to this class affects every item located beside, or below the stylesheet in the visual tree.
`itemIndentUssClassName`	`.unity-tree-view__item-indent`	The USS class name for TreeView indent element. Unity adds this USS class to every indent element of the TreeView. Any styling applied to this class affects every item located beside, or below the stylesheet in the visual tree.
`itemContentContainerUssClassName`	`.unity-tree-view__item-content`	The USS class name for TreeView item container elements. Unity adds this USS class to every item container element of the TreeView. Any styling applied to this class affects every item located beside, or below the stylesheet in the visual tree.
`ussClassName`	`.unity-collection-view`	The USS class name for BaseVerticalCollectionView elements. Unity adds this USS class to every instance of the BaseVerticalCollectionView element. Any styling applied to this class affects every BaseVerticalCollectionView located beside, or below the stylesheet in the visual tree.
`borderUssClassName`	`.unity-collection-view--with-border`	The USS class name for BaseVerticalCollectionView elements with a border. Unity adds this USS class to an instance of the BaseVerticalCollectionView element if the instance’s `BaseVerticalCollectionView.showBorder` property is set to true. Any styling applied to this class affects every such BaseVerticalCollectionView located beside, or below the stylesheet in the visual tree.
`itemUssClassName`	`.unity-collection-view__item`	The USS class name of item elements in BaseVerticalCollectionView elements. Unity adds this USS class to every item element the BaseVerticalCollectionView contains. Any styling applied to this class affects every item element located beside, or below the stylesheet in the visual tree.
`dragHoverBarUssClassName`	`.unity-collection-view__drag-hover-bar`	The USS class name of the drag hover bar. Unity adds this USS class to the bar that appears when the user drags an item in the list. Any styling applied to this class affects every BaseVerticalCollectionView located beside, or below the stylesheet in the visual tree.
`dragHoverMarkerUssClassName`	`.unity-collection-view__drag-hover-marker`	The USS class name of the drag hover circular marker used to indicate depth. Unity adds this USS class to the bar that appears when the user drags an item in the list. Any styling applied to this class affects every BaseVerticalCollectionView located beside, or below the stylesheet in the visual tree.
`itemDragHoverUssClassName`	`.unity-collection-view__item--drag-hover`	The USS class name applied to an item element on drag hover. Unity adds this USS class to the item element when it’s being dragged. Any styling applied to this class affects every BaseVerticalCollectionView item located beside, or below the stylesheet in the visual tree.
`itemSelectedVariantUssClassName`	`.unity-collection-view__item--selected`	The USS class name of selected item elements in the BaseVerticalCollectionView. Unity adds this USS class to every selected element in the BaseVerticalCollectionView. The `BaseVerticalCollectionView.selectionType` property decides if zero, one, or more elements can be selected. Any styling applied to this class affects every BaseVerticalCollectionView item located beside, or below the stylesheet in the visual tree.
`itemAlternativeBackgroundUssClassName`	`.unity-collection-view__item--alternative-background`	The USS class name for odd rows in the BaseVerticalCollectionView. Unity adds this USS class to every odd-numbered item in the BaseVerticalCollectionView when the `BaseVerticalCollectionView.showAlternatingRowBackgrounds` property is set to `ContentOnly` or `All`. When the `showAlternatingRowBackgrounds` property is set to either of those values, odd-numbered items are displayed with a different background color than even-numbered items. This USS class is used to differentiate odd-numbered items from even-numbered items. When the `showAlternatingRowBackgrounds` property is set to `None`, the USS class is not added, and any styling or behavior that relies on it’s invalidated.
`listScrollViewUssClassName`	`.unity-collection-view__scroll-view`	The USS class name of the scroll view in the BaseVerticalCollectionView. Unity adds this USS class to the BaseVerticalCollectionView’s scroll view. Any styling applied to this class affects every BaseVerticalCollectionView scroll view located beside, or below the stylesheet in the visual tree.
`disabledUssClassName`	`.unity-disabled`	USS class name of local disabled elements.

You can also use the Matching Selectors section in the Inspector or the UI Toolkit Debugger to see which USS selectors affect the components of the VisualElement at every level of its hierarchy.

Additional resources

MultiColumnTreeView
MultiColumnListView
ScrollViewA UI Control which displays a large set of Controls in a viewable area that you can see by using a scrollbar. More info
See in Glossary
ListView

UXML element ToolbarToggle

UXML element TwoPaneSplitView