How to bind properties to custom UI objects and create a collection of them at run time

Unity Engine
1

I’m new to the UI Toolkit so a bit of a 2 part question here.

Firstly, if i’ve got a script with a simple List players and Player has string Name and int Health, i want to display this in a custom UI element. I can Create a custom UI element with a couple of labels & a button, how do i bind the properties of these labels to Name and Health?

Secondly, how do i add a collection of those custom UI elements to something like a ScrollView control?

This is all simple enough to do in the old GUI using prefabs etc but thought i’d have a go with the new one. I’m liking the style sheets and the designer, i’ve been able to achieve most of what i wanted to do so far but kind of came unstuck at this point.

Cheers, Kev

1 Like
2

Greetings!

If I understood correctly, you need to create SerializedObject of your class Player. After you should use binding to your fields. You can binding in C# or use BuilderUI or uxml file.

This is your class Player.

public class Player : MonoBehaviour
{
    public string Name = "Geralt";
    public float Health = 100f;
}

This is your class for UI.

public class PlayerUI : MonoBehaviour
{
    private Label healthLabel;
    private Label nameLabel;

    private void OnEnable()
    {
        var rootVisualElement = GetComponent<UIDocument>().rootVisualElement; // Get UIDocument component.

        nameLabel = rootVisualElement.Q<Label>("name-label"); // Get control of UIDocument. name-label is name of Label.
        healthLabel = rootVisualElement.Q<Label>("health-label"); // Get control of UIDocument. health-label is name of Label.

        SerializedObject so = new SerializedObject(Camera.main.GetComponent<Player>()); //  Create serialization object
        rootVisualElement.Bind(so); // Binding to Player class

        nameLabel.bindingPath = "Name"; // Binding to Name field.
        healthLabel.bindingPath = "Health"; // Binding to Health field.
    }
}

This is your PlayerUI.uxml.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement>
        <ui:Label display-tooltip-when-elided="true" name="name-label" style="font-size: 100px;" />
        <ui:Label display-tooltip-when-elided="true" name="health-label" style="font-size: 100px;" />
    </ui:VisualElement>
</ui:UXML>

7054408--837313--1.png 7054408--837316--2.png

More information: https://docs.unity3d.com/Manual/UIE-Binding.html

3

Hello! Binding is only available in the Editor right now and it sounds like you’re doing Runtime UI so you’ll have to manually set values in the mean time. We have Runtime bindings on our roadmap but it’s not in the making right now.

2 Likes
4

Thanks for the replies both, do you have an example of how to do the binding in the UI?

If i’ve got a GameObject “GameController” and it has on it a List how do i bind that list of players to a scroll view UI control?