UI Toolkit template containers in UIs reset when inside a container component

Unity Engine
, , ,
1

Hi,

I am having issues with ui-toolkit for some more complex UIs, with elements being erronously removed from the document when they are editted.

I am currently running 6000.0.01f

I am currently not aware of any workarounds apart from not using components inside content containers or rebuilding the document UIs every time the compoent changes.

Workaround

Creating a UxmlElement class that wraps around the component causes the issue to not occur.

[UxmlElement]
public partial class TestComponent : VisualElement
{

	public TestComponent()
	{
		// Make sure test_component is in the Resources folder
		var visualTree = Resources.Load<VisualTreeAsset>("test_component");
		visualTree.CloneTree(this);
	}

}

Reproduction

To reproduce:

  • Create a new document named test_container
  • Give it a panel with a panel as a child.
  • Edit the .UXML file and add the content-container="true" property to the child panel. A sample uxml file has been provided below.
<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:VisualElement style="flex-grow: 1; background-color: rgb(214, 114, 114);">
        <engine:VisualElement content-container="true" style="flex-grow: 1; position: absolute; bottom: 54px; right: 0; top: 240px; left: 0; background-color: rgb(181, 107, 204);" />
    </engine:VisualElement>
</engine:UXML>
  • Create a new document named test_component
  • Give it a label (sample provided below)
<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:Label text="Test text" style="background-color: rgb(47, 255, 0);" />
</engine:UXML>
  • Create a new document named test_document
  • Add a test_container at the top level.
  • Add a test_component inside the container.
<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:Template name="test_container" src="project://database/Assets/UI%20Toolkit/Documents/debug/test_container.uxml?fileID=9197481963319205126&amp;guid=38da6e67636e6ba4e9cb0313c8b7010a&amp;type=3#test_container" />
    <engine:Template name="test_component" src="project://database/Assets/UI%20Toolkit/Documents/debug/test_component.uxml?fileID=9197481963319205126&amp;guid=ba07604848dd1004394eb628e71853bc&amp;type=3#test_component" />
    <engine:Instance template="test_container" style="bottom: 0; position: absolute; top: 0; left: 0; right: 0;">
        <UnityEngine.UIElements.Instance template="test_component" />
    </engine:Instance>
</engine:UXML>

Observe extremely strange properties with the UI. It will render fine when you add the test_component at first, but if you make any modifications to test_component, then it will disappear.

(see image 1)

Modified text to blue background:

(see image 2)

Test document has now lost its test_component, which has no content and doesn’t render at all (it will show as 0 height, but expanding it still has no content):

(see image 3)

(Image contained a picture of the test_document shown above but with the label missing despite still being inside the draw tree. The template container still shows as having the correct component inside the Template field, but it no longer works.)

Removing and re-adding the test_component causes it to render again, however this is incredibly annoying since editing components to adjust style is a pretty common process.

Images:

image
image252×680 11.9 KB

2

Could you please file a bug report?

1 Like