ListView with runtime visual element?

Hi,

I'm trying to dynamically populate a list at runtime using ListView but nothing appears and MakeItem/BindItem aren't being called. I'm creating/populating it in the constructor of a custom VisualElement and adding that to a .uxml file with a label above it.

Code (CSharp):

1. public class RoomList : VisualElement
2. {
3.     public new class UxmlFactory : UxmlFactory<RoomList, UxmlTraits> { }
4.     public new class UxmlTraits : VisualElement.UxmlTraits { }
5.  
6.     private ListView listView;
7.  
8.     public RoomList()
9.     {
10.         IList items = Resources.LoadAll<RoomAsset>("Rooms");
11.         listView = new ListView(items, 20, MakeItem, BindItem)
12.         {
13.             selectionType = SelectionType.Single,
14.             horizontalScrollingEnabled = true
15.         };
16.         listView.style.flexGrow = 1f;
17.         listView.style.flexShrink = 0f;
18.         listView.style.flexBasis = 0f;
19.         listView.onSelectionChange += Debug.Log;
20.         Add(listView);
21.         Debug.Log("RoomList constructor" + items.Count);
22.     }
23.  
24.     private void BindItem(VisualElement element, int index)
25.     {
26.         Debug.Log("RoomList BindItem");
27.         var item = listView.itemsSource[index];
28.         (element as TextElement).text = (item as RoomAsset).Name;
29.     }
30.  
31.     private VisualElement MakeItem()
32.     {
33.         Debug.Log("RoomList MakeItem");
34.         //return new Label();
35.         var ele = new TextElement();
36.         ele.style.unityTextAlign = TextAnchor.MiddleLeft;
37.         ele.style.paddingLeft = 5;
38.         ele.style.flexGrow = 1f;
39.         ele.style.flexShrink = 0f;
40.         ele.style.flexBasis = 0f;
41.         return ele;
42.     }
43. }
44.  

Code (CSharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
2.     <Style src="Room.uss" />
3.     <ui:Label text="Rooms" display-tooltip-when-elided="true" style="font-size: 24px;" />
4.     <RoomList name="RoomList" style="flex-direction: column;" />
5. </ui:UXML>
6.  

If put this in an editor window it does work:

Code (CSharp):

1. void OnEnable()
2.     {
3.         IList items = Resources.LoadAll<RoomAsset>("Rooms");
4.         listView = new ListView(items, 20, MakeItem, BindItem)
5.         {
6.             selectionType = SelectionType.Single,
7.             horizontalScrollingEnabled = true
8.         };
9.         listView.style.flexGrow = 1f;
10.         listView.style.flexShrink = 0f;
11.         listView.style.flexBasis = 0f;
12.         listView.onSelectionChange += Debug.Log;
13.         rootVisualElement.Add(listView);
14.     }

Is not possible to use this at runtime? Is there an alternative?

Cheers

Versions:
Unity 2021.1.0b12.2144.20
UI Toolkit 1.0.0-preview.14
UI Builder 1.0.0-preview.13

 

Ah thank you, that does seem to work.
I'd like to load another element defined a .uxml file instead of just a label and bind some data to it.
Is there any code samples for that? I've only seen uxml files loaded in code via AssetDatabase which is editor only I believe.

Thanks

 

Lovely, thanks for the info.

 

I don't see UI Toolkit package in Package Manager, only UI Builder.

 

Think it depends on version / whether you have experimental packages enabled in project settings.

You can add "com.unity.ui": "1.0.0-preview.14" to your manifest.json.