koobas.hobune.stream
(UI Toolkit) How to create a ListView ?
I cannot display the VisualElements of the list, I succeed in displaying only Labels.
I failed to display a VisualElements which contains several elements, nothing works so far.
private ListView LoadDataTable()
{
//####################### if i change that with list<Label> its works ##################
List<VisualElement> items = new List<VisualElement>();
for (int i = 1; i <= 100; i++)
{
VisualElement box = new VisualElement();
box.tooltip = "NEED HELP";
box.style.width = 4000;
box.style.flexDirection = FlexDirection.Row;
for (int col = 0; col < 10; col++)
{
Label lbl = new Label();
lbl.text = "*****[" + (col * 1000000) + "]*****";
//lbl.style.width = 50;
box.Add(lbl);
}
items.Add(box);
}
//#############################################################################
Func<VisualElement> makeItem = () => new VisualElement();
//!!!!!!!!!!!!!!!!!!!!!!!!!! this doesn't works !!!!!!!!!!!!!!!!!!!
Action<VisualElement, int> bindItem = (e, i) => e = items[i];
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Provide the list view with an explict height for every row
// so it can calculate how many items to actually display
const int itemHeight = 30;
var listView = new ListView(items, itemHeight, makeItem, bindItem);
listView.showAlternatingRowBackgrounds = AlternatingRowBackground.All;
listView.showBorder = true;
listView.selectionType = SelectionType.Multiple;
listView.onItemsChosen += objects => Debug.Log(objects);
listView.style.flexGrow = 1.0f;
return listView;
}
You got some things all wrong here. This is how you do it properly:
void OnEnable ()
{
// lets (pretend to) load the high score data:
var highScoreData = new List<HighScoreEntry>();
for( int i=0 ; i<100 ; i++ )
{
var entry = new HighScoreEntry{
name = $"Turbo Lechita #{i}" ,
score = Random.Range( 0 , 1000000 )
};
highScoreData.Add( entry );
}
// lets bind ui:
var root = GetComponent<UIDocument>().rootVisualElement;
{
ListView highScoreView = LoadDataTable( highScoreData );
root.Add( highScoreView );
}
}
ListView LoadDataTable ( List<HighScoreEntry> data )
{
var listView = new ListView();
{
listView.itemsSource = data;
listView.itemHeight = 80;
listView.makeItem = onMakeItem;
listView.bindItem = onBindItem;
listView.onItemsChosen += onItemsChosen;
listView.selectionType = SelectionType.Multiple;
listView.style.flexGrow = 1.0f;
}
return listView;
VisualElement onMakeItem ()
{
var box = new VisualElement();
{
var label = new Label();
label.name = "name-field";
box.Add( label );
}
{
var label = new Label();
label.name = "score-field";
box.Add( label );
}
return box;
}
void onBindItem ( VisualElement root , int i )
{
var entry = data[i];
{
var nameField = root.Q<Label>("name-field");
nameField.text = entry.name;
}
{
var scoreField = root.Q<Label>("score-field");
scoreField.text = $"$$$ {entry.score} $$$";
}
}
void onItemsChosen ( IEnumerable<object> objects )
{
Debug.Log( $"{nameof(onItemsChosen)}()" );
foreach( HighScoreEntry entry in objects )
Debug.Log( $"\t ( {entry.name} : {entry.score} ) selected" );
}
}
public struct HighScoreEntry
{
public string name;
public int score;
}
