How do I drop a new element into a custom VisualElements child element in UIBuilder?

Unity Engine
,
1

7271392--878116--draganddrop.PNG

The built-in scroll view component automatically stores child elements in the appropriate container when they are registered.

How can I do the same thing for my own custom VisualElements?

I tried to use some events (AttachToPanelEvent, CustomStyleResolvedEvent, etc… in UxmlTraits.Init()
) to change the storage location, but failed because it required rewriting the UXML itself.

Thanks.

2

You override the “contentContainer” property. In the example below all new content will go in “mainPanel” when added to this PopupPanel element. If this was a scroll view I would use hierarchy.Add(), rather than this.Add() to add the scrollbars so they do not end up in the mainPanel.

You should check out the source for the package. I learned a lot by just doing that, You could for example view how the scroll view works. In the Unity preferences window you can set that it include the packages in the generated VS solution so you can easily navigate to the sources in Visual Studio.

public class PopupPanel : VisualElement
{
    [UnityEngine.Scripting.Preserve]
    public new class UxmlFactory : UxmlFactory<PopupPanel, UxmlTraits> { }

    public override VisualElement contentContainer => mainPanel;

    protected VisualElement mainPanel;

    // ------------------------------------------------------------------------------------------------------------

    public PopupPanel()
    {
        mainPanel = new VisualElement();
        hierarchy.Add(mainPanel);
    }
}
3

It was the information I really needed. It was really helpful. Thank you!
I’ve been looking through the UIElements source every day too, but I missed this one.

public class MyScrollView : VisualElement{

        protected VisualElement ItemContainer {get;set;}

        public override VisualElement contentContainer {
            get => ItemContainer;
        }
        public MyScrollView(){
            ItemContainer = new VisualElement();
            hierarchy.Add(ItemContainer);
        }
        [Preserve]
        public new class UxmlFactory : UxmlFactory<MyScrollView, UxmlTraits> {}

        [Preserve]
        public new class UxmlTraits : VisualElement.UxmlTraits {
            public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc) {
                base.Init(ve, bag, cc);
            }
        }
}

One more question, the blur effect in the screenshot you shared in another thread, was rendered using RenderTexture?
I’ve heard that currently UIToolkit’s shaders are not customizable.

4

I am using a RenderTexture and Image elements to draw sections from that texture.

I’ve updated a repo with the shaders and code and an attempt at an explanation on how to use it.