UI Toolkit Editor Window - How do I call an event when the window is docked/undocked?

Unity Engine
,
1

I’m currently looking into UI Toolkit for editor development. The tool I’m working on has a panel that I want to extend all the way to the bottom of the window when the banner at the top of the editor is set to a specific pixel height and the window itself is of undetermined height, and I have that all working through a GeometryChangedEvent function.

However, this event is not called when the window is docked or undocked. Is there a separate event for when a window is docked/undocked, and if not is there a good enough workaround?

2

You should get a GeometryChangeEvent when docking/undocking a window (according its size changed), but only the elements that have a new layout will receive the event. It would be a safe bet to register the GeometryChangeEvent on the root VisualElement of the window.

One thing to keep in mind when undocking a window, it will try to keep the same size as when it was docked, so you wouldn’t receive a GeometryChangeEvent in that situation.

3

In my code, I’ve actually already registered a GeometryChangedEvent callback, which allows the window to update the sizing of the window when I drag it by its corners and sides.

I’ve had another look at the code today though, and I suspect that it’s not so much a callback issue as it is that my sizing function might not work as I had originally intended. Here’s how my script looks right now

    GroupBox panel;

    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object
        VisualElement root = rootVisualElement;

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UITEditor.uxml");
        visualTree.CloneTree(root);

        // A stylesheet can be added to a VisualElement.
        // The style will be applied to the VisualElement and all of its children.
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/UITEditor.uss");
        root.styleSheets.Add(styleSheet);

        root.RegisterCallback<GeometryChangedEvent>(OnWindowSizeChanged);

        panel = root.Q<GroupBox>("Panel");
    }

    private void OnWindowSizeChanged(GeometryChangedEvent evt)
    {
        var window = rootVisualElement.Q<VisualElement>("Content");

        minSize = new Vector2(window.resolvedStyle.minWidth.value, window.resolvedStyle.minHeight.value);

        UpdatePanelSize();
    }

    private void UpdatePanelSize()
    {
        var panelSize = rootVisualElement.Q<VisualElement>("Content").resolvedStyle.height;

        rootVisualElement.Q<VisualElement>("PanelParent").style.height = panelSize;
        panel.style.height = panelSize;
    }

Reason why I think the sizing code might be wrong is as I noticed when resizing the window, the sizing isn’t set to be its final size immediately. I’ll do some experimentation myself, but if there’s any glaring issues, I’d be happy to hear from you!

4

Ah, this is embarrassing, I found a fix immediately. For anyone using the thread as a reference, I just changed var panelSize = rootVisualElement.Q<VisualElement>("Content").resolvedStyle.height; to var panelSize = rootVisualElement.resolvedStyle.height; and that seemed to fix things.

1 Like