Hello,
According to release notes there is a new component for UIToolkit that sound quite interesting and handy.
Unfortunately I could not find any documentation and/or example for it and it does not appear in UIBuilder either. Could you please point me to right page where we could find more info about it?
Thanks.
We are still working on the documentation, and it is not yet exposed in the builder.
At this moment, that component would be for really experienced user only.
The best thing you can do is to have a look here :
I was also interested in this. Is there any timeline when it will be exposed to the UIBuilder?
UI Builder can already support content that contains multi-column listviews and treeviews, however you cannot edit the definition of these controls nor can you add them from the builder’s library just yet. Basically the authoring workflow is coming in the next version, but as I mentioned you can already add it in the Uxml directly.
Here is a typical use in Uxml:
<MultiColumnListView>
<Columns>
<Column id="filename" title="Name" stretchable="true" max-width="250" cell-binding-path="fileName" />
<Column id="modified_date" title="Modified Date" cell-binding-path="modifiedDate"/>
<Column id="type" title="Type" max-width="100" cell-binding-path="type"/>
<Column id="size" title="Size" width="60" cell-binding-path="size" />
<TemplateColumn id="edit" title="Edit" stretchable="true" cell-template="EditButton" />
</Columns>
</MultiColumnListView>
Thanks for info.
Played with it a bit and managed to add it via code in runtime.
The only moment that’s not yet clear is how to use sorting, should I sort .itemsSource manually, is there a callback I can use for that (couldn’t find one) or should we use data binding some way (couldn’t find anything similar to cell-binding-path in code)
Here is a code snippet I use for testing (I’m using it in uitoolkit runtime).
...
void Start()
{
_list = new List<ListItem>()
{
new ListItem
{
f1 = "1_1",
f2 = "1_2",
f3 = "1_3",
},
new ListItem
{
f1 = "2_1",
f2 = "2_2",
f3 = "2_3",
},
new ListItem
{
f1 = "3_1",
f2 = "3_2",
f3 = "3_3",
}
};
uiDocument.rootVisualElement.Q<MultiColumnListView>().itemsSource = _list;
var columns = new Columns();
columns.Add(new Column
{
name = "column1",
title = "title1",
bindCell = (x, y) => { OnBindCell(x, y, 0); },
makeCell = OnMakeCell,
sortable = true,
});
columns.Add(new Column
{
name = "column2",
title = "title2",
bindCell = (x, y) => { OnBindCell(x, y, 1); },
makeCell = OnMakeCell,
});
columns.Add(new Column
{
name = "column3",
title = "title3",
bindCell = (x, y) => { OnBindCell(x, y, 2); },
makeCell = OnMakeCell,
});
var mc = new MultiColumnListView(columns);
mc.itemsSource = _list;
uiDocument.rootVisualElement.Add(mc);
}
private VisualElement OnMakeCell()
{
var ve = new VisualElement();
var label = new Label();
ve.Add(label);
return ve;
}
private void OnBindCell(VisualElement ve, int index, int columnIndex)
{
if (columnIndex == 0) ve.Q<Label>().text = _list[index].f1;
if (columnIndex == 1) ve.Q<Label>().text = _list[index].f2;
if (columnIndex == 2) ve.Q<Label>().text = _list[index].f3;
}
...
You can specify your own columnSortingChanged callback when sorting is triggered by the user. Then you have access to the sortedColumns description list so that you perform the sort yourself (like with IMGUI). We leave it to the dev as it would be very cumbersome and probably not performant at all if we decided to provide a default sort out of the box…
This is from the MultiColumnListView APIs:
/// If a column is clicked to change sorting, this event is raised to allow users to sort the tree view items.
public event Action columnSortingChanged;
/// Contains information about which columns are currently being sorted.
/// Note: Use along with the columnSortingChanged event
public IEnumerable<SortColumnDescription> sortedColumns;
/// The collection of sorted columns by default.
public SortColumnDescriptions sortColumnDescriptions;
/// Whether or not sorting is enabled in the multi-column header.
public bool sortingEnabled;
Thanks.
Few more questions:
PS: Happy Holidays
I would say it all depends on how many MCLV instances you have and if they have any sort definition in the Uxml…can you share yours?
I’m using an empty uxml for uidocument and adding MultiColumnListView by code in runtime. Here is the code I use for testing.
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
public class Test : MonoBehaviour
{
public class ListItem
{
public string f1;
public string f2;
public string f3;
}
public UIDocument uiDocument;
private List<ListItem> _list;
private MultiColumnListView _mclv;
void Start()
{
_list = new List<ListItem>()
{
new ListItem
{
f1 = "1_1",
f2 = "1_2",
f3 = "1_3",
},
new ListItem
{
f1 = "2_1",
f2 = "2_2",
f3 = "2_3",
},
new ListItem
{
f1 = "3_1",
f2 = "3_2",
f3 = "3_3",
}
};
var columns = new Columns();
columns.Add(new Column
{
name = "column1",
title = "title1",
bindCell = (x, y) => { OnBindCell(x, y, 0); },
makeCell = OnMakeCell,
sortable = true,
});
columns.Add(new Column
{
name = "column2",
title = "title2",
bindCell = (x, y) => { OnBindCell(x, y, 1); },
makeCell = OnMakeCell,
});
columns.Add(new Column
{
name = "column3",
title = "title3",
bindCell = (x, y) => { OnBindCell(x, y, 2); },
makeCell = OnMakeCell,
stretchable = true,
});
_mclv = new MultiColumnListView(columns);
_mclv.sortingEnabled = true;
_mclv.columnSortingChanged += OnColumnSortingChanged;
_mclv.itemsSource = _list;
uiDocument.rootVisualElement.Add(_mclv);
}
private void OnColumnSortingChanged()
{
UnityEngine.Debug.Log($"===> OnColumnSortingChanged");
foreach (var column in _mclv.sortedColumns)
{
UnityEngine.Debug.Log($"--- columnName: {column.columnName} direction: {column.direction} columnIndex: {column.columnIndex}");
}
}
private VisualElement OnMakeCell()
{
var ve = new VisualElement();
var label = new Label();
ve.Add(label);
return ve;
}
private void OnBindCell(VisualElement ve, int index, int columnIndex)
{
if (columnIndex == 0) ve.Q<Label>().text = _list[index].f1;
if (columnIndex == 1) ve.Q<Label>().text = _list[index].f2;
if (columnIndex == 2) ve.Q<Label>().text = _list[index].f3;
}
}
Same in Beta 4, @sebastiend-unity could you please elaborate?
Can these be displayed contextually? – i.e. Only show “filename” column when column “type” contains “file” as the type of data?
Filed a bug report, CASE 1401151. Hope this helps.
@sebastiend-unity , @SimonDufour
I’m in unity version 2022.1.17f1 and I still can’t configure MultiColumnListView from UIBuilder. Did this get missed or something?
““Basically the authoring workflow is coming in the next version”” hmmm
