UxmlElementAttribute

Description

Declares a custom control.

To create a custom control, you must add the UxmlElement attribute to the custom control class definition. You must declare the custom control class as a partial class and inherit it from VisualElement or one of its derived classes. When an element is marked with the UxmlElement attribute, a corresponding UxmlSerializedData class is generated in the partial class. This data class contains a SerializeField for each field or property that was marked with the UxmlAttributeAttribute attribute. This serialized data allows for the element to be serialized from UXML and supports editing in the Attributes field of the Inspector window in the UI Builder. By default, the custom control appears in the Library tab in UI Builder. To hide it from the Library tab, provide the HideInInspector attribute.

For an example of migrating a custom control from UxmlFactory and UxmlTraits to the UxmlElement and UxmlAttributes system, refer to Enhanced custom controls creation with UXML.

The following example creates a custom control with multiple attributes:

using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

[UxmlElement]
public partial class ExampleVisualElement : VisualElement
{
    [UxmlAttribute]
    public string myStringValue { get; set; }

    [UxmlAttribute]
    public int myIntValue { get; set; }

    [UxmlAttribute]
    public float myFloatValue { get; set; }

    [UxmlAttribute]
    public List<int> myListOfInts { get; set; }

    [UxmlAttribute, UxmlTypeReference(typeof(VisualElement))]
    public Type myType { get; set; }

    [UxmlAttribute]
    public Texture2D myTexture { get; set; }

    [UxmlAttribute]
    public Color myColor { get; set; }
}

The following UXML document uses the custom control:

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <ExampleElement my-string-value="Hello World" my-int-value="123" />
    <ExampleElement my-float-value="3.14" my-list-of-ints="1,2,3" />
    <ExampleElement my-string-value="Hello World" my-int-value="123" />
    <ExampleElement my-texture="project://database/Assets/MyTexture.png" />
    <ExampleElement my-color="#FF0000FF" />
    <ExampleElement my-type="UnityEngine.UIElements.Button, UnityEngine.UIElementsModule" />
</ui:UXML>

When you create a custom control, the default name used in UXML and UI Builder is the element type name (C# class name). However, you can customize the name to make it easier to refer to the element.

Note: You are still required to reference the classes' namespace in UXML. To create a custom name for an element, provide a value to the name property. For example, if you create the following custom button:

using UnityEngine.UIElements;

namespace MyNamespace
{
    [UxmlElement("MyButton")]
    public partial class CustomButtonElement : Button
    {
    }
}

You can then reference the custom button in UXML with the custom name or its type:

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <MyNamespace.MyButton />
    <MyNamespace.CustomButtonElement />
</ui:UXML>

Properties

Constructors