Try the following simple runtime UI example to get started. The example adds a label, a button, a toggle, and a text field in a scene. When you click the button, the Console window shows a message. When you select the toggle and click the button, the Console window shows how many times the buttons have been clicked. When you enter a text message in the text field, the Console window shows the message.
This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:
You can find the completed files that this example creates in this GitHub repository.
Create a Panel Renderer GameObject in the SampleScene and a UXML Document to define the UI structure.
Create a project in Unity Editor with any template.
In the SampleScene, select GameObject > UI Toolkit > Panel Renderer. This creates the following:
Select the Panel Renderer GameObject in the hierarchy.
In the Source Asset field, select New. This creates an empty UXML Document.
Rename the UXML Document to SimpleRuntimeUI.uxml.
You can edit the UXML Document in either UI Builder or the Hierarchy window directly. This example demonstrates how to use the Hierarchy window to edit the UXML Document. By default, in-scene UI authoring is disabled. To enable it:
Add a visual element as the root of the UXML Document you created.
1 to make the VisualElement fill the entire screen.Add a Label, a Button, a Toggle, and a TextField as child elements of the VisualElement.
Right-click the VisualElement in the Hierarchy window, and select Standard Elements > Label to add a Label as a child element of the VisualElement.
Select the Label and in the Inspector window, expand the Attributes section and set the Text attribute to This is a Label.
Select Window > UI Toolkit > UI Library to open the UI Library window.
In the UI Library window, search for Button.
Drag the Button from the UI Library window to the Hierarchy window to add the Button as a child element of the VisualElement.
Select the Button and in the Inspector window:
button as the name of the Button element.This is a Button.Repeat the steps to add a Toggle and a TextField as child elements of the VisualElement:
toggle, and set the Text attribute to Display the counter?.input-message, and set the Label attribute to Enter a message.In the Hierarchy window, right-click the SimpleRuntimeUI.uxml, and select Save to save the UXML document.
The finished UXML file looks like the following:
<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd">
<ui:VisualElement style="flex-grow: 1;">
<ui:Label text="This is a Label" display-tooltip-when-elided="true" />
<ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button" />
<ui:Toggle label="Display the counter?" name="toggle" />
<ui:TextField picking-mode="Ignore" label="Text Field" name="input-message" value="filler text" />
</ui:VisualElement>
</ui:UXML>
To add logic, create a C# script that derives from MonoBehaviour to access the controls that the UXML Document component references.
Create a C# script named SimpleRuntimeUIWithUXML.cs with the following contents:
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleRuntimeUIWithUXML : MonoBehaviour
{
private Button button;
private Toggle toggle;
private int clickCount;
void Awake()
{
GetComponent<PanelRenderer>().RegisterUIReloadCallback(OnUIReload);
}
void OnDestroy()
{
GetComponent<PanelRenderer>().UnregisterUIReloadCallback(OnUIReload);
}
private void OnUIReload(PanelRenderer panelRenderer, VisualElement root, int version)
{
button = root.Q<Button>("button");
toggle = root.Q<Toggle>("toggle");
button.RegisterCallback<ClickEvent>(PrintClickMessage);
var inputFields = root.Q<TextField>("input-message");
inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage);
}
private void PrintClickMessage(ClickEvent evt)
{
++clickCount;
Debug.Log($"{"button"} was clicked!" +
(toggle.value ? " Count: " + clickCount : ""));
}
public static void InputMessage(ChangeEvent<string> evt)
{
Debug.Log($"{evt.newValue} -> {evt.target}");
}
}
Add SimpleRuntimeUIWithUXML.cs as a component of the Panel Renderer GameObject.