패널은 UI 계층 구조의 가시적인 인스턴스를 나타내며, 시각적 트리의 계층 구조 내에서 요소 동작 이벤트 디스패치를 처리합니다. 또한 계층 구조의 루트 시각적 요소에 대한 레퍼런스를 보유합니다. 런타임 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입니다.
| 이벤트 | 설명 | 트리클다운 | 버블업 | 취소 가능 |
|---|---|---|---|---|
| AttachToPanelEvent | 요소(또는 그 부모 중 하나)가 패널에 연결된 직후에 전송됩니다. | |||
| DetachFromPanelEvent | 요소(또는 그 부모 중 하나)가 패널에서 분리된 직후에 전송됩니다. |
originPanel: originPanel에는 DetachFromPanelEvent와 관련된 데이터가 들어 있습니다. 여기에는 패널 변경 중에 시각적 요소가 분리되는 소스 패널이 포함됩니다.
destinationPanel: destinationPanel에는 AttachFromPanelEvent와 관련된 데이터가 들어 있습니다. 시각적 요소가 연결되는 패널을 제공합니다.
다음 리스트는 이벤트 패밀리에 있는 각 이벤트의 이름, 설명, 타겟을 제공합니다.
AttachToPanelEvent는 시각적 요소가 패널에 연결된 후에 실행됩니다. 또한 패널에 연결된 계층 구조에 시각적 요소를 추가할 때도 발생합니다.
target: 패널에 연결된 시각적 요소입니다.
패널에서 시각적 요소를 제거하기 전에 DetachFromPanelEvent가 트리거됩니다.패널에 연결된 계층 구조에서 시각적 요소를 제거할 때도 발생합니다.
target: 패널에서 분리되는 시각적 요소입니다.
다음 예제는 창에 레이블을 추가하는 버튼이 있는 에디터 창을 생성합니다. 레이블을 클릭하면 레이블이 다시 제거됩니다.
이 예제는 VisualElement의 인스턴스가 패널에서 연결되거나 분리될 때마다 콘솔에 메시지를 출력하는 커스텀 레이블 클래스를 구현합니다. 또한 AttachToPanelEvent 및 DetachFromPanelEvent 이벤트의 동작과 originPanel 및 destinationPanel 프로퍼티를 사용하는 방법을 강조합니다.
예제가 동작하는 방식을 확인하려면 다음 단계를 따르십시오.
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());
}
}