Show Reorderable List with UIElements

I'm trying to add a reorderable list (the one that shows when you create a list without custom inspector) in my custom inspector using UIElements. I couldn't find any information on this. The property field just displays an array and doen't show anything if you have a list inside a list

Trying to show this in custom inspector:

 

Tried that myself and couldn't make it work. Even tried to add a IMGUIContainer to render just the list and in that case, I got the old array drawer.

Also take into account that if you have CustomPropertyDrawers created with Visual Elements, they won't show when using the Reorderable List, as that list was made with IMGUI.

IMHO the Unity devs should have created a new kind of array drawer with VisualElements instead of using the old one that is pretty much incompatible with all the new things that they are creating.

 

@sebastiend-unity could you elaborate on "make a custom drawer that uses a ListView" a bit more?

I tried that, and it seems that while that gives "something", it's lacking a number of features, notably

• the ability to expand the list to full height (what ReorderableList does by default) - I understand this is kind of against the ListView design goals but forcibly setting the height to itemHeight * itemCount still feels wrong
• no way to specify height per item (unless you're on 2021.2+)
• very different UI and UX (e.g. no visual drag behaviour, no drag attachment area, ...)
• no out-of-the-box behaviour that gives +, -, delete, context menu etc. as expected from such a list

So I don't think it's as simple as that, and not being able to convert Lists while keeping usable UX has been a blocker for us for UI Toolkit adoption. Are there plans to improve this?

Just as usecase explanation, imagine the following scenario:
- someone wants to make a PropertyDrawer that leverages UI Toolkit
- they learn that for this to happen, the entire Editor chain needs to be on UI Toolkit (that's ok, by design)
- they start to move editors over to that
- turns out the thing that has the new PropertyDrawer is used inside a List (it's a List<Thing>, very common)
- turning that into a UI Toolkit editor turns out to have no solution / no good solution / just hacky workarounds that all are worse in terms of UX to the original.

I can speak from experience in saying that this has often been the point where grudgingly all those UI Toolkit changes had to be rolled back because the benefits of moving don't counter bad UX.

 

Thanks – I was aware of the dynamicHeight change, but not of the others, that's welcome

 

Hello. Is there any chance of these features getting backported to 2020.3?

 

That's too bad. Thanks for the reply.

 

Should I create separate topic?
I'm trying to create reorderable list inside node. I cannot find what is wrong. I have newest editor version.
1. My node has infinite vertical size, when list is expanded:


2. When I use button add I get null exception and I cannot find out why:

Code (CSharp):

1. ArgumentNullException: Value cannot be null.
2. Parameter name: item
3. System.Collections.Generic.List`1[T].System.Collections.IList.Add (System.Object item) (at <feaaa6313e32495d9f259b175aa6b597>:0)
4. UnityEngine.UIElements.ListViewController.AddItems (System.Int32 itemCount) (at <13f9cfbfcaea4d30a66e97eb510cfa62>:0)
5. UnityEngine.UIElements.ListView.AddItems (System.Int32 itemCount) (at <13f9cfbfcaea4d30a66e97eb510cfa62>:0)
6. UnityEngine.UIElements.ListView.OnAddClicked () (at <13f9cfbfcaea4d30a66e97eb510cfa62>:0)
7. UnityEngine.UIElements.Clickable.Invoke (UnityEngine.UIElements.EventBase evt) (at <13f9cfbfcaea4d30a66e97eb510cfa62>:0)
8. UnityEngine.UIElements.Clickable.ProcessUpEvent (UnityEngine.UIElements.EventBase evt, UnityEngine.Vector2 localPosition, System.Int32 pointerId) (at <13f9cfbfcaea4d30a66e97eb510cfa62>:0)
9. UnityEngine.UIElements.Clickable.OnMouseUp (UnityEngine.UIElements.MouseUpEvent evt) (at <13f9cfbfcaea4d30a66e97eb510cfa62>:0)

Relevant code:

Code (CSharp):

1. List<float> data;//setup somewhere else
2. int itemHeight;//setup somewhere else
3.  
4. var listView = new ListView(data, itemHeight, () => new FloatField(), (e, i) => BindItem(e as FloatField, i, data));
5.  
6. listView.reorderMode = ListViewReorderMode.Animated;
7. listView.showAddRemoveFooter = true;
8. listView.showFoldoutHeader = true;
9. listView.virtualizationMethod = CollectionVirtualizationMethod.DynamicHeight;
10.  
11. extensionContainer.Add(listView);
12.  
13. //bind item function def
14. private void BindItem(FloatField field, int index, List<float> list)
15. {
16.     //for some reason I get call for index 0 when list.Count == 0
17.     if (list.Count <= index)
18.     {
19.         list.Add(0f);
20.     }
21.     field.value = list[index];
22. }
23.  

 

So what's the solution / recommended workaround for 2020 LTS?

Is it simply: "UIToolkit can't do lists in inspectors"?

Or is it: "UIToolkit is absolutely not supported or ready for use in 2020 LTS, no-one should be using it, it's not production ready (it's only supported in 2021 LTS upwards)"?

(seems there's a lot of UIT that is not only broken in LTS but keeps hitting walls of old forum threads 'we're not going to fix this').