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 prompt the user to make a choice:

<?xml version="1.0" encoding="utf-8"?>
<UXML ...>
    <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 툴킷에서 각 요소는 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.

추가 리소스

• Add styles to UXML
• Reuse UXML files
• Reference other files from UXML
• UXML elements Reference