How do you use multiple UI documents in the same scene?

[khorozian2]

I’ve ran into this issue when I’ve been keeping different parts of my UI in different gameobjects. Previously with the old UI system, I’d have multiple canvases and they’d all work fine and there’d be no issue with mouse events. Currently, I am keeping different parts of the UI in different documents; however, only one UIDocument can be intereacted with at a time using Mouse events. It also disables interaction with the old UI (which I’d prefer if it didn’t as some stuff are just more convenient on the old UI). I couldn’t find any mention of this in the docs nor could I find anyone else who had this issue online. Am I misusing the UI Toolkit?

[dlorre]

I just have one UIDocument and I instantiate panels that I add and remove to and from the main UI as necessary. When I open settings I create a second scene in additive mode and a second UIDocument appears that covers the first one, I’m not sure if my practices are the best but it works.

As you pointed out most of my issues are with the input, I could solve most of them by using the new input system with appropriate Enable() and Disable() when necessary.

[magnetic_scho]

We have many different UIDocuments in our scene, one for each part of the UI. As long as they don’t overlap, you can interact with each of them. We position them with margin set to auto, so that you don’t need a parent element spanning the hole screen. Another solution would be to set picking mode to “Ignore” if you want to keep the parent element.

[khorozian2]

@magnetic_scho

We have many different UIDocuments in our scene, one for each part of the UI. As long as they don’t overlap, you can interact with each of them. We position them with margin set to auto, so that you don’t need a parent element spanning the hole screen. Another solution would be to set picking mode to “Ignore” if you want to keep the parent element.

Oh thanks. I realized the background visual element was blocking interactions. Silly mistake on my part.

[spiney199]

@""

How do you “position” them? I’m looking for some kind of positioning parameters on either the UXML document or the UI Document in the assets and seeing nothing to allow for positioning either of them. When I go into the UI builder, the root element (the .uxml element) has a “size” but no “position” so that doesn’t work either. Where am I supposed to be able to position multiple UXMLs around my window?

The root element itself can’t really be positioned/edited. You can make your own ‘root’ visual element for your Visual Trees (aka, just add in a visual element, set its Flex-grow to 1), and then you can use your flex-direction, alignment, spacing/margin settings to ‘position’ your important elements. Or you can use absolute positioning, though you’ll lose some of your flex layouting.