Привязка к шаблону UXML

В этом примере показано, как установить пути привязки с шаблонами UXML.

Примерный обзор

В примере используются шаблоны UXML для создания трех переключателей и привязки их к свойствам объекта GameSwitchesAsset.

Предварительный просмотр GameSwitch Inspector

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание ассета GameSwitch

Создание скриптов для определения GameSwitch структура и собственный ассет для хранения свойств GameSwitch struct.

Создайте проект в Unity с любым шаблоном.
В окне Project создайте папку bind-uxml-template для хранения всех ваших файлов.
Создайте скрипт C# с именем GameSwitchesAsset.cs со следующим содержанием:

using System;
using UnityEngine;

[CreateAssetMenu(fileName = "GameSwitchAsset.asset", menuName = "GameSwitchAsset")]
public class GameSwitchesAsset : ScriptableObject
{
    public GameSwitch useLocalServer;
    public GameSwitch showDebugMenu;
    public GameSwitch showFPSCounter;

    // Use the Reset function to provide default values
    public void Reset()
    {
        useLocalServer = new GameSwitch() { name = "Use Local Server", enabled = false };
        showDebugMenu = new GameSwitch() { name = "Show Debug Menu", enabled = false };
        showFPSCounter = new GameSwitch() { name = "Show FPS Counter", enabled = true };
    }

    [Serializable]
    public struct GameSwitch
    {
        public string name;
        public bool enabled;
    }
}

Создание шаблона и файлов UXML

Создайте шаблон UXML, который вы можете использовать для каждого GameSwitch экземпляр структуры и файл UXML, использующий этот шаблон.

Создайте документ UI с именем game_switch.uxml со следующим содержанием:

<ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
    <ui:Box style="flex-direction: row;">
        <ui:Toggle binding-path="enabled"/>
        <ui:TextField binding-path="name" readonly="false" style="flex-grow: 1;"/>
    </ui:Box>
</ui:UXML>

Создать UI Документ с именем game_switches_editor.uxml.
Дважды щелкните game_switches_editor.uxml, чтобы открыть его в UI Builder.
Трижды перетащите game_switch.uxml на панели Hierarchy, чтобы создать три экземпляра.
В течение Inspector панели для первого экземпляра, введите useLocalServer в 2000 году Путь привязки редактора поле.
В панели Inspector для второго экземпляра введите showDebugMenu в поле Editor Binding Path.
В панели Inspector для третьего экземпляра введите showFPSCounter в поле Editor Binding Path.
Сохраните файл UXML. Готовый файл UXML выглядит следующим образом:

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements" editor-extension-mode="False">
    <Template name="switch" src="game_switch.uxml?"/>
    <Instance template="switch" binding-path="useLocalServer"/>
    <Instance template="switch" binding-path="showDebugMenu"/>
    <Instance template="switch" binding-path="showFPSCounter"/>
</UXML>

Создание настраиваемого окна редактора

Создайте настраиваемое окно редактора, которое использует файл UXML и привязывает его к ассету GameSwitchesAsset.

В меню выберите Ассеты > Создать > UIToolkitExamples > GameSwitches для создания нового ассета с именем GameSwitchesAsset.asset.
Создайте папку под названием Editor.

В течение Редактор папка, создать C# скрипт назван GameSwitchesEditor.cs со следующим содержанием:

using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;
    
public class UXMLTemplateBindingExample : EditorWindow
{
    [SerializeField]
    private VisualTreeAsset m_VisualTreeAsset = default;
    
    [SerializeField]
    private GameSwitchesAsset gameSwitch;
    
    [MenuItem("UI Toolkit Examples/UXML Template Binding Example")]
    public static void ShowExample()
    {
        UXMLTemplateBindingExample wnd = GetWindow<UXMLTemplateBindingExample>();
        wnd.titleContent = new GUIContent("UXML Template Binding Example");
    }
    
    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        m_VisualTreeAsset.CloneTree(root);
    
        root.Bind(new SerializedObject(gameSwitch));
           
    }
}

В окне Inspector GameSwitchesEditor.csвыполните следующие действия:
Установите Visual Tree Asset на game_switches_editor.uxml.
Установить Game Переключить на GameSwitchesAsset.asset.

Проверка привязки

В меню выберите UI Toolkit Примеры > UXML Пример привязки шаблона, чтобы открыть окно пользовательского редактора.
Обновление переключателей и текстовых полей в окнах Inspector и Редактора. Изменения в одном месте обновляют другое.