UXML element ListView

A ListView is a vertically scrollable area that links to and displays a list of items.

Note: The horizontal and vertical Scroller elements are standard UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary Toolkit Scrollers.

Create a ListView

You can create a ListView with UI Builder, UXML, and C#. The following C# example creates a ListView:

var listView = new ListView();

ListView versus ScrollView

You can use a 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 control to create the same functionalities as using a ListView. However, a ListView is more efficient than a ScrollView when you do the following:

• Populate list items
• Manage item height
• Bind and unbind to objects
• Instantiate the number of visual elementsA node of a visual tree that instantiates or derives from the C# VisualElement class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
  See in Glossary required to fill a page
• Recycle visual elements to optimize memory handling

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.

Set item height

To change how item height is used to drive content, use the VirtualizationMethod:

• VirtualizationMethod.FixedHeight sets all items to the same height.
• VirtualizationMethod.DynamicHeight allows items to have varying heights.

Control the scroll speed

The ListView has a built-in child ScrollView element that lets users scroll through the list. You can control the speed of the scroll by overriding the mouseWheelScrollSize, horizontalPageSize, and verticalPageSize properties of the ScrollView with C#.

Implement drag-and-drop operations for ListView

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 ListView:

<UXML xmlns="UnityEngine.UIElements">
    <ListView class="the-uxml-listview" fixed-item-height="20" />
</UXML>

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

/// <sample>
// Create some list of data, here simply numbers in interval [1, 1000]
const int itemCount = 1000;
var items = new List<string>(itemCount);
for (int i = 1; i <= itemCount; i++)
    items.Add(i.ToString());

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

// As the user scrolls through the list, the ListView 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) => (e as Label).text = items[i];

var listView = container.Q<ListView>();
listView.makeItem = makeItem;
listView.bindItem = bindItem;
listView.itemsSource = items;
listView.selectionType = SelectionType.Multiple;

// Callback invoked when the user double clicks an item
listView.itemsChosen += (selectedItems) =>
{
    Debug.Log("Items chosen: " + string.Join(", ", selectedItems));
};

// Callback invoked when the user changes the selection inside the ListView
listView.selectionChanged += (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 complex list view: Use ListView to create a custom Editor window with a list of characters.
• Bind to a list with ListView: Create a list of toggles and bind the list to an underlying list of GameSwitch objects.
• 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: ListView
Namespace: UnityEngine.UIElements
Base class: BaseListView

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

• MultiColumnListView
• MultiColumnTreeView
• ScrollView
• TreeView