Introduction to UXML

The UXML format is inspired by HTML, XAML, and XML. If you’ve worked with these formats before, you’ll find similarities in UXML. However, the UXML format includes small differences to provide an efficient way to work with Unity. This page introduces the format of UXML by an example.

The following is an example UXML file. It contains several built-in UI controls that prompts the user to make a choice:

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../UIElementsSchema/UnityEngine.UIElements.xsd">
    <Label text="Select something to remove from your suitcase:"/>
    <Box>
        <Toggle name="boots" label="Boots" value="false" />
        <Toggle name="helmet" label="Helmet" value="false" />
        <Toggle name="cloak" label="Cloak of invisibility" value="false"/>
    </Box>
    <Box>
        <Button name="cancel" text="Cancel" />
        <Button name="ok" text="OK" />
    </Box>
</UXML>

UXML declaration

The first line of code in the above UXML example is the UXML declaration. The declaration is optional. If you do include the UXML declaration, you must put it on the first line. A UXML declaration requires a version. The encoding attribute is optional in a UXML declaration. If you include the encoding attribute, you must declare the character encoding of the file.

Document root

The next line defines the document root, <UXML>. The <UXML> element includes attributes for the namespace prefix definitions and the location of schema definition files. You can specify these attributes in any order.

Namespace

UI Toolkit では、各要素は UnityEngine.UIElements か UnityEditor.UIElements 名前空間のいずれかで定義されます。

The UnityEngine.UIElements namespace contains elements that are defined as part of the Unity runtime.
UnityEditor.UIElements 名前空間には、Unity エディターで使用できる要素が含まれています。要素を完全に指定するには、要素の名前空間の前に宣言する必要があります。

例えば、UXML テンプレートで Button 要素を使いたい場合は、<UnityEngine.UIElements:Button /> と指定する必要があります。

To make specifying namespaces easier, you can define a namespace prefix. For example, xmlns:engine="UnityEngine.UIElements" defines the engine prefix as UnityEngine.UIElements. Once you define a namespace prefix, you can use it to specify namespaces. For example, <engine:Button /> is equivalent to <UnityEngine.UIElements:Button />

You can also define a default namespace by excluding a prefix. For example, xmlns="UnityEngine.UIElements" defines UnityEngine.UIElements as the default namespace. This means that specifying, for example, <Button /> is equivalent to <UnityEngine.UIElements:Button />

To create a UXML file with automatically defined namespaces, select Asset > Create > UI Toolkit > UI Document.

Note: If you define your own elements, don’t define the custom control class in the UnityEngine.UIElements or UnityEditor.UIElements namespace. Otherwise, UI Builder will hide your custom controls.

Schema definition

The schema definition validates your UXML files. It specifies which attributes and child elements each UXML element can contain.

In a UXML file, the xsi:noNamespaceSchemaLocation or the xsi:schemaLocation attributes of the <UXML> root element specify the location of the schema definition files.

To create a UXML file with the latest schema definition, select Assets > Create > UI Toolkit > UI Document. This creates a file with the xsi:noNamespaceSchemaLocation attribute for the root element.

Note: If your text editor doesn’t recognize the xsi:noNamespaceSchemaLocation attribute, use the xsi:schemaLocation attribute instead.

To force an update of the UXML schema definition, select Assets > Update UXML Schema.

UXML elements

The definition of the UI is within the <UXML> root. The UI definition is a series of nested UXML elements, each representing a visual element.

The element name corresponds to the C# class name of the element to instantiate. Most elements have attributes and their values are mapped to the corresponding class properties in C#. Each element has its own set of attributes in addition to the inherited attributes of its parent class. VisualElement is the base class for all elements and it provides the following attributes for all elements:

name: An identifier for the element. The name should be unique.
picking-mode: Set to either Position to respond to mouse events or Ignore to ignore mouse events.
focus-index: (古い機能) tabIndex と focusable を使用します。
tabindex: An integer that defines the tabbing position of the current element.
focusable: A Boolean that indicates whether the element is focusable.
class: A space-separated list of identifiers that characterize the element. Use classes to assign visual styles to elements. You can also use classes to select a set of elements in UQuery.
tooltip: A string that displays as a tooltip when the mouse hovers over the element.
view-data-key : A string that defines the key used for serialization of the element.

その他の参考資料

UXML による UI の構築

UXML にスタイルを加える