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 Builder, UXML, and C#.

To create a TreeView with C#, create a new instance of a TreeView object. For example:

TreeView myElement = new TreeView();

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.

例

​ The best way to learn how to use ListView is to try examples:

• To see a simple ListView example, in Unity, select Window > UI Toolkit > Samples > Tree View.
• 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

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.

その他の参考資料

• MultiColumnTreeView
• MultiColumnListView
• ScrollView
• ListView