パネルイベント

マウスイベント

ポインターイベント

パネルは、UI 階層の可視インスタンスを表します。パネルは、ビジュアルツリーの階層の中で、要素の動作イベントのディスパッチを処理します。階層のルートのビジュアル要素への参照を維持します。ランタイム UIでは、UGUI の Canvas に相当します。

パネルがレンダリングやイベントを受け取るためには、ビジュアル要素のインスタンスをパネルにアタッチする必要があります。

パネルイベントは、パネルとの関係が変化するときにビジュアル要素で発生します。例えば、ビジュアル要素をパネルに加えるとき (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 特有のデータが含まれています。データは、ビジュアル要素が現在接続しているパネルを示します。

イベントリスト

The following list provides the name, description, and target of each event in the event family.

AttachToPanelEvent

AttachToPanelEvent は、ビジュアル要素がパネルにアタッチされた後に発生します。また、パネルに接続されている階層にビジュアル要素を加える場合にも発生します。

target: パネルに接続しているビジュアル要素。

DetachFromPanelEvent

The DetachFromPanelEvent triggers before you remove a visual element from a panel. It also occurs when you remove a visual element from a hierarchy that’s attached to a panel.

target: パネルから切り離されるビジュアル要素。

例

以下の例では、ウィンドウにラベルを追加するボタンを備えたエディターウィンドウを作成します。ラベルをクリックすると、それらは削除されます。

この例ではカスタムラベルクラスを実装し、VisualElement のインスタンスをパネルに接続したり、パネルから切り離したりすると、コンソールにメッセージを表示します。この例では、AttachToPanelEvent と DetachFromPanelEvent イベントの動作、および originPanel と destinationPanel プロパティの使用方法を紹介します。

この例を実際に行うには、以下を行います。

Assets > Scripts > Editor で、PanelEventsTestWindow という C# スクリプトを作成します。
サンプルコードを C# スクリプトにコピーします。
エディターツールバーから、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()
    {
        // パネルの名前を設定
        rootVisualElement.panel.visualTree.name = "Our Window Root Visual Element";

        // カスタムラベルの新しいインスタンスをウィンドウに加えるボタンを加えます
        rootVisualElement.Add(new Button(() => rootVisualElement.Add(new CustomLabel())) { text = "Add New Label" });
    }
}

/// <summary>
/// 接続またはデタッチ時にコンソールメッセージを出力するカスタムラベルクラス
/// </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}'");
        });
        // この要素を階層から削除するポインターダウンコールバックを登録します
        RegisterCallback<PointerDownEvent>(evt => this.RemoveFromHierarchy());
    }
}

マウスイベント

ポインターイベント