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

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

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

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

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

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

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

• UI Builder
• Визуальное дерево
• UXML
• USS

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

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

1. Создайте проект в Unity с любым шаблоном.
2. В окне Project создайте папку bind-uxml-template для хранения всех ваших файлов.
3. Создайте скрипт 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, использующий этот шаблон.

1. Создайте документ 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>
   

2. Создать UI Документ с именем game_switches_editor.uxml.

3. Дважды щелкните game_switches_editor.uxml, чтобы открыть его в UI Builder.

4. Трижды перетащите game_switch.uxml на панели Hierarchy, чтобы создать три экземпляра.

5. В течение Inspector панели для первого экземпляра, введите useLocalServer в 2000 году Путь привязки редактора поле.

6. В панели Inspector для второго экземпляра введите showDebugMenu в поле Editor Binding Path.

7. В панели Inspector для третьего экземпляра введите showFPSCounter в поле Editor Binding Path.

8. Сохраните файл 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.

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

2. Создайте папку под названием Editor.

3. В течение Редактор папка, создать 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));
              
       }
   }
   

4. В окне Inspector GameSwitchesEditor.csвыполните следующие действия:

5. Установите Visual Tree Asset на game_switches_editor.uxml.

6. Установить Game Переключить на GameSwitchesAsset.asset.

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

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

Дополнительные ресурсы

• SerializedObject привязка данных
• Связываемые элементы
• Привязка преобразования типа данных
• Детали осуществления
• Примеры связки