Version: 2022.2
Structure UI with UXML
Add styles to UXML

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.UIElementsUnityEditor.UIElements 命名空间中定义:

  • The UnityEngine.UIElements namespace contains elements that are defined as part of the Unity runtime.
  • UnityEditor.UIElements 命名空间包含 Unity Editor 中可用的元素。要完整指定一个元素,必须在其前面添加其命名空间。

例如,如果要在 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:(已弃用)使用 tabIndexfocusable
  • 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.

其他资源

Structure UI with UXML
Add styles to UXML