To build user interface from a UXML template, you must first load the template into a VisualTreeAsset
:
var template = EditorGUIUtility.Load("path/to/file.uxml") as VisualTreeAsset;
or more directly :
var template = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("path/to/file.uxml");
You can then build the visual treeAn object graph, made of lightweight nodes, that holds all the elements in a window or panel. It defines every UI you build with the UI Toolkit.
See in Glossary that this represents and attach it to a parent element:
template.CloneTree(parentElement, slots);
In the statement above, the <UXML>
element in the template isn’t translated to a VisualElement
. Instead, all of its children are attached to the element specified by parentElement
.
Once the template is instantiated, you can retrieve specific elements from the visual elementA node of a visual tree that instantiates or derives from the C# VisualElement
class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
See in Glossary tree with UQuery: Unity’s implementation of JQuery/Linq.
For example, the following code demonstrates how to create a new EditorWindow
and load a UXML file as its content:
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;
public class MyWindow : EditorWindow {
[MenuItem ("Window/My Window")]
public static void ShowWindow () {
EditorWindow w = EditorWindow.GetWindow(typeof(MyWindow));
VisualTreeAsset uiAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/MyWindow.uxml");
VisualElement ui = uiAsset.CloneTree();
w.rootVisualElement.Add(ui);
}
}