UXML 템플릿에 바인딩

버전:2021.3+

이 예는 UXML 템플릿으로 바인딩 경로를 설정하는 방법을 보여줍니다.

개요 예시

이 예제에서는 에셋 메뉴 항목을 생성합니다.이 메뉴는 GameSwitch 오브젝트의 프로퍼티에 바인딩하는 템플릿 인스턴스 세 개가 포함된 GameSwitch 에셋을 생성합니다.

이 예제에서 생성한 완성된 파일은 다음 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

GameSwitch 에셋 생성

GameSwitch 구조체를 정의하는 스크립트와 GameSwitch 구조체의 프로퍼티를 보유하는 커스텀 에셋을 생성합니다.

템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
프로젝트(Project) 창에서 모든 파일을 저장할 폴더를 ’bind-uxml-template’이라는 이름으로 만듭니다.

GameSwitch.cs라는 이름의 C# 스크립트를 생성하고 콘텐츠를 다음으로 바꿉니다.

using System;

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

GameSwitchesAsset.cs라는 이름의 C# 스크립트를 만들고 해당 콘텐츠를 다음과 같이 바꿉니다.

using UnityEngine;

[CreateAssetMenu(menuName = "UIToolkitExamples/GameSwitches")]
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 };
    }
}

UXML 템플릿 및 파일 만들기

각 GameSwitch 구조체 인스턴스에 사용할 수 있는 UXML 템플릿과 이 템플릿을 사용하는 UXML 파일을 생성합니다.

Game_switch.uxml이라는 이름의 UI 문서를 생성하고 콘텐츠를 다음으로 바꿉니다.

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Box style="flex-direction: row;">
        <Toggle binding-path="enabled" />
        <TextField binding-path="name" readonly="true" style="flex-grow:1;"/>
    </Box>
</UXML>

bind-uxml-template 폴더에 ’Editor’라는 이름의 폴더를 만듭니다.
Editor 폴더에 game_switches_editor.uxml이라는 이름의 UI 문서를 생성하고 해당 콘텐츠를 다음과 같이 바꿉니다.
```
<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <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 파일입니다.각 프로퍼티는 ’Instance’의 ‘binding-path’ 속성을 통해 ’game_switch.uxml’의 인스턴스에 바인딩됩니다.

에셋 메뉴 및 에셋 만들기

스크립트를 생성하여 GameSwitchesAsset에 대한 커스텀 에디터를 등록합니다.

GameSwitchesEditor.cs라는 이름의 C# 스크립트를 생성하고 해당 콘텐츠를 다음과 같이 바꿉니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(GameSwitchesAsset))]
    public class GameSwitchesEditor :Editor
    {
        [SerializeField]
        VisualTreeAsset visualTreeAsset;

        public override VisualElement CreateInspectorGUI()
        {
            return visualTreeAsset.CloneTree();
        }
    }
}

바인딩 테스트

Unity에서 Assets > Create > UIToolkitExamples > GameSwitches를 선택하여 프로젝트의 Assets 폴더에 새 에셋을 생성합니다.
새로 생성한 에셋을 선택합니다.인스펙터에는 GameSwitchesAsset.useLocalServer, GameSwitchesAsset.showDebugMenu, GameSwitchesAsset.showFPSCounter 프로퍼티에 바인딩되는 토글과 텍스트 필드가 표시됩니다.

추가 리소스

중첩된 프로퍼티에 바인딩

바인딩된 프로퍼티가 변경될 때 콜백 수신