Add child element as UXML

Unity Engine
,
1

Hi, I’m trying to add child element to UXML to allow user to modify child elements directly in UIBuilder.
I’m right now I’m using this:

[Preserve]
public new class UxmlFactory : UxmlFactory<TestParent, UxmlTraits>
{
    public override VisualElement Create(IUxmlAttributes bag, CreationContext cc)
    {
        var created = base.Create(bag, cc);
        if (created is TestParent target)
        {
         
            var testChild= target.Q<TestChild>();
            if(testChild == null)
            {
                var visualTree = Resources.Load<VisualTreeAsset>(nameof(TestChild));
                visualTree.CloneTree(target);
                testChild= target.Q<TestChild>();
                testChild.style.display = new StyleEnum<DisplayStyle>(DisplayStyle.Flex);
                testChild.style.position = new StyleEnum<Position>(Position.Absolute);
                testChild.style.height = new StyleLength(new Length(100, LengthUnit.Pixel));
                testChild.style.width = new StyleLength(new Length(100, LengthUnit.Pixel));
                testChild.image = new Texture2D(100, 100);
                target.SetTestChild(testChild);
                target.RegisterCallback<GeometryChangedEvent>(OnAttached);
            }
            return created;
        }

        return null;
    }


    private void OnAttached(GeometryChangedEvent geometryChangedEvent)
    {
        if (geometryChangedEvent.target is TestParent testParent)
        {
            testParent.UnregisterCallback<GeometryChangedEvent>(OnAttached);
            testParent.PlaceTestChildAtCenter();
        }
    }
}

But in my case TestChild adds to TestParent in heirarchy but it’s disabled and in uxml I have only:

<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">
    <TestParent/>
</ui:UXML>

But I want to add to be like this:

<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">
    <TestParent>
        <TestChild/>
    </TestParent>
</ui:UXML>

Here code on TestChild:

public class TestChild : Image
{
        [Preserve]
        public new class UxmlFactory : UxmlFactory<TestChild, UxmlTraits>
        {
        }

        public new class UxmlTraits : VisualElement.UxmlTraits
        {
        }
}

Do you have any suggestions about what I can to do?

2

I don’t believe you can edit the properties of dynamically instantiated child elements. It’s an inherit restriction based upon the fact these elements aren’t serialised at all.

If you want to style them in some way, expose attributes that can drive it, or use child selector syntax to style the child (which is good practice as its better performance). The selector would just be TestParent > TestChild.

3

Yes, selector is good, but I’m trying to make user friendly experience and possibility to set up things within UIBuilder. Lets wait for someone else to come, may be they will have any idea if it’s possible do)

4

They can set it up in the UI builder, it’s called USS selectors, which is what you should be using over inline styles for performance reasons. I don’t see how that’s less user friendly when it’s the correct way to be using UI Toolkit.

It’s not possible your way. The values aren’t being serialised. Don’t waste your time fretting over this.

5

Okay, thanks

6

Do you have performance comparation for inline style and uss?

7

It’s in the docs: https://docs.unity3d.com/Manual/UIE-USS-WritingStyleSheets.html

Inline styles have more memory over head. I find selectors cleaner as far as editing goes anyway. I seldom inline any styles.

1 Like