Change イベント

要素の値が変化すると、 ChangeEvent が送信されます。これは通常、コントロールのフィールドの値が変化したときに送信されます。たとえば、ユーザーがチェックボックスをクリックしたときなどです。

ChangeEvent は型付きのイベントで、ビジュアル要素の前の値と新しい値の両方を含んでいます。

このイベントは、変更によってビジュアル要素に新しい値が割り当てられた後に発生します。ビジュアル要素の値の変更を防ぐために変更イベントをキャンセルすることはできません。

ChangeEvent の基本クラスは、EventBase クラスです。

固有のプロパティ

previousValue : ターゲットコントロールの以前の値。

newValue ：ターゲットコントロールの新しい値。

イベントリスト

ChangeEvent

ChangeEvent は、ビジュアル要素の値の変化に反応することができる通知イベントです。例えば、ゲーム内の音楽をミュートするチェックボックスをクリックすると、ゲームはすべての音楽を停止します。

このイベントは、INotifyValueChanged<T> を実装するすべてのコントロールに適用されます。ここで <T> は、ChangeEvent の型です。このイベントは、バインディング を通して UI にリンクされたオブジェクト内のプロパティを更新するために内部的にも使用されます。

これは、コントロールの値がコードによって設定されている場合でも発生します。 INotifyValueChange<T> インターフェースの SetValueWithoutNotify を呼び出すことで、 ChangeEvent を発生せずにコントロールの値を変更することができます。

ChangeEvent を受信するコールバック関数は、2 つの方法で登録できます。

1. Call RegisterCallback<>() on a visual element
2. INotifyValueChange<T> から派生したビジュアル要素上で RegisterValueChangedCallback() を呼び出す。

RegisterCallback によるコールバックの登録は、内部値を格納しているかどうかにかかわらず、すべてのビジュアル要素で使用できます。親要素の子コントロールで発生した変更をリッスンしたい場合は、この方法を使用してください。

ChangeEvent は型付きのイベントなので、イベントの登録時に型を指定する必要があります。以下のコードは、bool 型の ChangeEvent の登録と受信を示しています。

// コールバックの登録
rootVisualElement.RegisterCallback<ChangeEvent<bool>>(OnBoolChangedEvent);

// Event callback
private void OnBoolChangedEvent(ChangeEvent<bool> evt) 
{ 
    // コードの処理
}

トグルボタンや整数フィールドなど、値を保持する要素は INotifyValueChange<T> インターフェースを実装しています。RegisterValueChangedCallback を呼び出すことで、これらの要素に直接コールバックを登録することができます。この方法は、型がすでにビルトインのため、より便利にコールバックを登録できます。 myElement.UnregisterValueChangedCallback を呼び出すことで、イベントハンドラーの登録を再び解除することができます。

var newToggle = new Toggle("Test Toggle");
newToggle.RegisterValueChangedCallback(OnTestToggleChanged);

private void OnTestToggleChanged(ChangeEvent<bool> evt)
{ 
    // コードの処理
}

target: 状態の変化が発生する要素です。

例

以下の例では、ChangeEvent の使い方と、コントロールの値を設定し取得する方法を示しています。

例を見るには以下のようにします。

1. Assets > Scripts > Editor で、ChangeEventTestWindow という C# スクリプトを作成します。
2. サンプルコードを C# スクリプトにコピーします。
3. エディターツールバーから、Window > UI Toolkit > Change Events Test Window の順に選択します。

例 1: Change イベント受領へのコールバックの登録

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ChangeEventTestWindow : EditorWindow
{
    private Toggle m_MyToggle;

    [MenuItem("Window/UI Toolkit/Change Event Test Window")]
    public static void ShowExample()
    {
        ChangeEventTestWindow wnd = GetWindow<ChangeEventTestWindow>();
        wnd.titleContent = new GUIContent("Change Event Test Window");
    }

    public void CreateGUI()
    {
        // トグルを作成
        m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
        rootVisualElement.Add(m_MyToggle);

        // トグルにコールバックを登録
        m_MyToggle.RegisterValueChangedCallback(OnTestToggleChanged);

        // 親にコールバックを登録
        rootVisualElement.RegisterCallback<ChangeEvent<bool>>(OnBoolChangedEvent);
    }

    private void OnBoolChangedEvent(ChangeEvent<bool> evt)
    {
        Debug.Log($"Toggle changed. Old value: {evt.previousValue}, new value: {evt.newValue}");
    }

    private void OnTestToggleChanged(ChangeEvent<bool> evt)
    {
        Debug.Log($"A bool value changed. Old value: {evt.previousValue}, new value: {evt.newValue}");
    }
}

例 2： コードによるコントロールの値の設定

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ChangeEventTestWindow : EditorWindow
{
    private Toggle m_MyToggle;

    [MenuItem("Window/UI Toolkit/Change Event Test Window")]
    public static void ShowExample()
    {
        GetWindow<ChangeEventTestWindow>().titleContent = new GUIContent("Change Event Test Window");
    }

    public void CreateGUI()
    {
        // トグルを作成し、コールバックを登録 
        m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
        m_MyToggle.RegisterValueChangedCallback((evt) => { Debug.Log("Change Event received"); });
        rootVisualElement.Add(m_MyToggle);

        // ボタンを作成し、トグルの値を切り替える
        Button button01 = new Button() { text = "Toggle" };
        button01.clicked += () => 
        {
            m_MyToggle.value = !m_MyToggle.value;
        };
        rootVisualElement.Add(button01);

        // ボタンを作成し、ChangeEvent を発生せずにトグルの値を切り替える
        Button button02 = new Button() { text = "Toggle without notification" };
        button02.clicked += () =>
        {
            m_MyToggle.SetValueWithoutNotify(!m_MyToggle.value);
        };
        rootVisualElement.Add(button02);
    }
}