패널 이벤트

패널은__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 계층 구조의 가시적인 인스턴스를 나타냅니다. 패널은 시각적 트리의 계층 구조 내에서 요소 동작 이벤트 디스패치를 처리합니다. 여기에는 계층 구조의 루트 시각적 요소에 대한 레퍼런스가 포함되어 있습니다. 런타임 UI의 경우 UGUI의 캔버스와 유사합니다.

이벤트를 렌더링하거나 수신하려면 시각적 요소의 인스턴스를 패널에 연결해야 합니다.

패널 이벤트는 패널과의 관계가 변경될 때 시각적 요소에서 실행됩니다. 예를 들어 패널에 시각적 요소를 추가(AttachToPanelEvent)하거나 패널에서 제거(DetachFromPanelEvent)하는 경우가 있습니다.

패널 이벤트는 패널 변경이 발생할 때 직접 영향을 받는 계층 구조 내 시각적 요소와 해당 요소의 자손에만 전송됩니다. 부모 요소는 자손 시각적 요소가 패널에 연결되거나 분리될 때 이벤트를 수신하지 않습니다.

예를 들어 아래의 UXML 코드에서 이미 패널에 연결된 계층 구조에 parent 시각적 요소를 추가하면 parent, child, grandchild 모두 동일한 이벤트를 수신합니다. 동일한 UXML 계층 구조에서 parent를 제거하면 모든 시각적 요소가 DetachFromPanel 이벤트를 수신합니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
   <ui:VisualElement name="parent">
       <ui:VisualElement name="child">
           <ui:VisualElement name="grandchild" />
       </ui:VisualElement>
   </ui:VisualElement>
</ui:UXML>

모든 패널 이벤트의 기본 클래스는 PanelChangedEventBase입니다.

고유한 프로퍼티

originPanel: originPanel에는 해당 DetachFromPanelEvent 전용 데이터가 포함되어 있습니다. 패널 변경 중에 시각적 요소가 분리되는 소스 패널이 포함되어 있습니다.

destinationPanel: destinationPanel에는 해당 AttachFromPanelEvent 전용 데이터가 포함되어 있습니다. 이제 시각적 요소가 연결된 패널을 제공합니다.

이벤트 목록

다음 목록은 이벤트 패밀리에 있는 각 이벤트의 이름, 설명, 타겟을 제공합니다.

AttachToPanelEvent

시각적 요소가 패널에 연결된 후에 AttachToPanelEvent가 작동합니다. 또한 패널에 연결된 계층 구조에 시각적 요소를 추가할 때 발생합니다.

target: 패널에 연결되는 시각적 요소입니다.

DetachFromPanelEvent

패널에서 시각적 요소를 제거하기 전에 DetachFromPanelEvent가 트리거됩니다. 패널에 연결된 계층 구조에서 시각적 요소를 제거할 때도 발생합니다.

target: 패널에서 분리되는 시각적 요소입니다.

예제

다음 예제는 창에 레이블을 추가하는 버튼이 있는 에디터 창을 생성합니다. 레이블을 클릭하면 레이블이 다시 제거됩니다.

이 예시에서는 VisualElement의 인스턴스가 패널에 연결되거나 분리될 때마다 콘솔에 메시지를 출력하는 커스텀 레이블 클래스를 구현합니다. AttachToPanelEvent 및 DetachFromPanelEvent 이벤트의 동작과 originPanel 및 destinationPanel 프로퍼티를 사용하는 방법을 강조합니다.

예제의 동작을 확인하려면 다음 단계를 따르십시오.

1. Assets > Scripts > Editor에서 PanelEventsTestWindow라는 C# 스크립트를 작성합니다.
2. 예시 코드를 C# 스크립트에 복사합니다.
3. 에디터 툴바에서 Window > UI Toolkit > Panel Events Test Window를 선택합니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PanelEventsTestWindow : EditorWindow
{
    [MenuItem("Window/UI Toolkit/Panel Events Test Window")]
    public static void ShowExample()
    {
        PanelEventsTestWindow wnd = GetWindow<PanelEventsTestWindow>();
        wnd.titleContent = new GUIContent("Panel Events Test Window");
    }

    public void CreateGUI()
    {
        // Set a name for the panel
        rootVisualElement.panel.visualTree.name = "Our Window Root Visual Element";

        // Add a button which will add new instances of our custom labels to the window
        rootVisualElement.Add(new Button(() => rootVisualElement.Add(new CustomLabel())) { text = "Add New Label" });
    }
}

/// <summary>
/// Custom label class which prints out a console message when it is attached or detached.
/// </summary>
public class CustomLabel : Label
{
    private static int m_InstanceCounter = 0;
    private int m_LabelNumber;

    public CustomLabel() : base()
    {
        m_LabelNumber = ++m_InstanceCounter;
        text = $"Label #{m_LabelNumber} - click me to detach";
        RegisterCallback<AttachToPanelEvent>(evt =>
        {
            Debug.Log($"I am label {m_LabelNumber} and I " +
                $"just got attached to panel '{evt.destinationPanel.visualTree.name}'");
        });
        RegisterCallback<DetachFromPanelEvent>(evt =>
        {
            Debug.Log($"I am label {m_LabelNumber} and I " +
                $"just got detached from panel '{evt.originPanel.visualTree.name}'");
        });
        // Register a pointer down callback that removes this element from the hierarchy
        RegisterCallback<PointerDownEvent>(evt => this.RemoveFromHierarchy());
    }
}