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>.

Implement drag-and-drop operations for TreeView

Drag-and-drop is a common feature in UI design. To implement the drag-and-drop operations, override the following methods:

• To enable dragging items, override canStartDrag.
• To set which items are dragged, override setupDragAndDrop.
• To get item status changes, override dragAndDropUpdate. You can perform certain actions based on the drag position or other conditions.
• To control the drag-and-drop behavior, override handleDrop.

During the drag-and-drop operation, you can enable the reordering of items by dragging. To enable, set the reorderable attribute to true in UI Builder, UXML, and C#.

Refer to Create a drag-and-drop list and tree views between windows for an example.

Examples

The following UXML example creates a TreeView:

<UXML xmlns="UnityEngine.UIElements">
    <TreeView class="the-uxml-treeview" fixed-item-height="20" />
</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>>(10);
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 += (selectedItems) =>
{
    Debug.Log("Items chosen: " + string.Join(", ", selectedItems));
};

// Callback invoked when the user changes the selection inside the TreeView
treeView.selectedIndicesChanged += (selectedItems) =>
{
    Debug.Log("Items selected: " + string.Join(", ", selectedItems));
};
/// </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.
• 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.

C# base class and namespace

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

Member UXML attributes

This element has the following member attributes:

Inherited UXML attributes

This element inherits the following attributes from its base class:

This element also inherits the following attributes from VisualElement:

USS classes

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

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