USS セレクターをバインドするカスタムバインディングの作成

バージョン: 2023.2 以降

この例では、USS セレクターをビジュアル要素にバインドするカスタムバインディングを作成する方法を示します。

例の概要

この例では、階層内の子要素の順序に基づいてビジュアル要素の各子要素に USS クラスセレクターを割り当てるカスタムバインディングを作成します。最初の要素は常に左側の丸い角の端を持ち、最後の要素は常に右側の丸い角の端を持ちます。

この例で作成する完成したファイルは、この GitHub リポジトリにあります。

必要な要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。

カスタムバインディングタイプの作成

兄弟インデックスに基づいて USS クラスを割り当てるカスタムバインディングタイプを作成します。バインディングは、兄弟インデックスが変更されたときにのみ更新されます。

Unity で任意のテンプレートを使用してプロジェクトを作成します。

プロジェクトの Assets フォルダーに以下の内容で AddMenuUSSClass.cs という C# スクリプトを作成します。

using UnityEngine.UIElements;
    
[UxmlObject]
public partial class AddMenuUssClass : CustomBinding
{
    protected override BindingResult Update(in BindingContext context)
    {
        // Assign USS classes based on the sibling index. The binding updates when the sibling index changes.
        var element = context.targetElement;
        var index = element.parent.IndexOf(element);
        element.EnableInClassList("menu-button--first", index == 0);
        element.EnableInClassList("menu-button--last", index == element.parent.childCount - 1);                
            
        return new BindingResult(BindingStatus.Success);
    }
}

UI とバインディングの作成

一般的には、要素の既存のプロパティにバインドするバインディングを作成します。この例では、デモ目的で、要素内に存在しないプロパティにバインドするカスタムバインディングを作成します。存在しないプロパティにバインドするバインディングを設定するには、UXML または C# を使用する必要があります。この例では、UXML を使用してバインディングを設定します。

プロジェクトの Assets フォルダーに以下の内容で CustomBinding.uss という USS ファイルを作成します。

.menu-button {
    flex-direction: row;
    height: 64px;
    align-items: center; 
    justify-content: center;
}
    
.menu-button--first {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-left-width: 2px;
}
    
.menu-button--last {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-right-width: 2px;
}
    
Button {
    margin: 0px;
    border-color: red;
}

プロジェクトの Assets フォルダーに以下の内容で CustomBinding.uxml という UXML ファイルを作成します。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="True">
    <ui:VisualElement class="menu-button">
        <ui:Button text="Bloub">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
        <ui:Button text="Bip">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
        <ui:Button text="Boop">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
    </ui:VisualElement>
</ui:UXML>

CustomBinding.uxml ファイルをダブルクリックして、UI Builder で開きます。
StyleSheet パネルで、+ > Add Existing USS を選択し、CustomBinding.uss ファイルを選択します。
変更内容を保存します。

バインディングのテスト

バインディングをテストするには、UI Builder でボタン要素の順序を変更し、UI Builder のビューポートで変更内容を確認します。

CustomBinding.uxml ファイルをダブルクリックして、UI Builder で開きます。
Hierarchy パネルで、ルートの VisualElement を展開し、子要素 (ボタン) を表示します。
順序を変更するには、ボタンをドラッグアンドドロップします。最初のボタンは常に左側の丸い角の端を持ち、最後のボタンは常に右側の丸い角の端を持ちます。

追加リソース

型コンバーターによるランタイムバインディングの作成

ランタイムバインディングによる ListView とリストのバインド