← Руководство

Настройка атрибутов UXML

Вы можете настроить имена атрибутов UXML, поведение атрибутов и добавить декораторы и пользовательские ящики свойств в UI Builder.

Переименовать атрибуты UXML

Вы можете переименовать атрибуты пользовательского контроля через аргумент name атрибута UxmlAttribute.

Ниже приведен пример настраиваемого контроля с переименованными атрибутами:

using UnityEngine.UIElements;

[UxmlElement]
public partial class CustomAttributeNameExample : VisualElement
{
    [UxmlAttribute("character-name")]
    public string myStringValue { get; set; }

    [UxmlAttribute("credits")]
    public float myFloatValue { get; set; }

    [UxmlAttribute("level")]
    public int myIntValue { get; set; }

    [UxmlAttribute("usage")]
    public UsageHints myEnumValue { get; set; }
}

Ниже показан пример документа UXML с переименованными атрибутами:

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <CustomAttributeNameExample character-name="Karl" credits="1.23" level="1" usage="DynamicColor" />
</ui:UXML>

Если вы переименовываете атрибут и хотите, чтобы файлы UXML со старым именем оставались совместимыми, добавьте аргументы obsoleteNames к атрибуту UxmlAttribute.

В следующем примере показано, как использовать аргумент obsoleteNames:

using UnityEngine.UIElements;

[UxmlElement]
public partial class CharacterDetails : VisualElement
{
    [UxmlAttribute("character-name", "npc-name")]
    public string npcName { get; set; }

    [UxmlAttribute("character-health", "health")]
    public float health { get; set; }
}

Ниже приведен пример использования в UXML:

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <CharacterDetails npc-name="Haydee" health="100" />
</ui:UXML>

Включить привязку данных во время выполнения в UI Builder

Для упрощения привязка данных во время выполнения для свойств управления, вы можете включить Добавить привязку меню в UI Builder для атрибутов пользовательского элемента управления, добавив UxmlAttribute (или UxmlObjectReferenceAttribute для a комплексный тип данных) и CreateProperty атрибуты. Например:

using UnityEngine.UIElements;
using Unity.Properties;

[UxmlElement]
public partial class ExampleCustomControl : VisualElement
{
    [UxmlAttribute, CreateProperty]
    public string description { get; set; }
}

Примечание: Убедитесь, что вы включили using Unity.Properties; директива в вашем скрипте. Для получения дополнительной информации см. документация о Unity Properties.

В UI Builder, когда вы выбираете ExampleCustomControl в области Hierarchy, а затем щелкнете правой кнопкой мыши Описание в области Inspector, отображается меню Add Binding. Затем вы можете связать свойства контроля с источниками данных.

Переопределение поведения атрибутов UXML

Вы переопределяете поведение get и set для UXML-атрибута пользовательского элемента управления. В представлении атрибутов UI Builder исходный атрибут заменяется вашей переопределённой версией. Чтобы переопределить атрибут, объявите новый и сошлитесь на исходный через [UxmlAttribute("original-attribute-name"), new-attribute].

С помощью такого переопределения атрибута можно настроить атрибуты, унаследованные от дочерних классов. Например, чтобы задать ограничения значений в IntegerField, переопределите атрибут value и примените Range атрибут такой:

using UnityEngine;
using UnityEngine.UIElements;

[UxmlElement]
public partial class MyCustomIntField : IntegerField
{
    [UxmlAttribute("value"), Range(0, 100)]
    private int valueOverride
    {
        get => this.value;
        set => this.value = value;
    }
}

В этом примере MyCustomIntField класс наследуется от IntegerField и отменяет значение атрибут. Диапазон атрибут ограничивает значение диапазоном между 0 и 100.

Когда вы добавляете MyCustomIntField в UI Builder, переопределенная версия заменяет значение атрибутом. Это позволяет вам установить значение в пределах указанного диапазона.

Добавить декораторы атрибутов в UI Builder

Вы можете добавить следующие атрибуты декоратора на UXML При добавлении атрибута декоратора, соответствующий атрибут декоратора UI управления, например, ползунок для Range, отображаются в UI Builder’s Inspector панель:

В следующем примере создается пользовательский контроллер с декораторами в полях атрибутов:

using UnityEngine.UIElements;
using UnityEngine;

[UxmlElement]
public partial class ExampleText : VisualElement
{
    [TextArea, UxmlAttribute]
    public string myText;

    [Header("My Header")]
    [Range(0, 100)]
    [UxmlAttribute]
    public int rangedInt;

    [Tooltip("My custom tooltip")]
    [Min(10)]
    [UxmlAttribute]
    public int minValue = 100;
}

UI Builder отображает атрибуты с декораторами:

Добавить пользовательский ящик свойств в UI Builder

Вы можете добавить пользовательские ящики свойств на поля в UI Builder.

В следующем примере создается пользовательский контроллер с пользовательским ящиком свойств:

using UnityEngine;
using UnityEngine.UIElements;

public class MyDrawerAttribute : PropertyAttribute { }

[UxmlElement]
public partial class MyDrawerExample : Button
{
    [UxmlAttribute]
    public Color myColor;

    [MyDrawer, UxmlAttribute]
    public string myText;
}

Чтобы получить доступ к другим серийным свойствам, добавьте перед именем serializedData. В следующем примере кода используется serializedData.myColor для поиска атрибута myColor:

using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine.UIElements;

[CustomPropertyDrawer(typeof(MyDrawerAttribute))]
public class MyDrawerAttributePropertyDrawer : PropertyDrawer
{
    public override VisualElement CreatePropertyGUI(SerializedProperty property)
    {
        var row = new VisualElement { style = { flexDirection = FlexDirection.Row } };
        var textField = new TextField("My Text") { style = { flexGrow = 1 } };
        var button = new Button { text = ":" };
        button.clicked += () => textField.value = "RESET";

        // Get the parent property
        var parentPropertyPath = property.propertyPath.Substring(0, property.propertyPath.LastIndexOf('.'));
        var parent = property.serializedObject.FindProperty(parentPropertyPath);

        var colorProp = parent.FindPropertyRelative("myColor");
        textField.TrackPropertyValue(colorProp, p =>
        {
            row.style.backgroundColor = p.colorValue;
        });

        row.style.backgroundColor = colorProp.colorValue;
        row.Add(textField);
        row.Add(button);
        textField.BindProperty(property);

        return row;
    }
}

Ящик настраиваемых свойств выглядит следующим образом:

Настраиваемый ящик свойств с выбором цвета