カスタムコントロールをバインドする

バージョン: 2021.3 以降

この例では、カスタムコントロールをネイティブの Unity の型にバインドする方法を説明します。

例の概要

この例では、2D 画像を表示するカスタムコントロールを作成します。新しいアセット型のカスタムエディターでカスタムコントロールを使用し、カスタムコントロールを新しい型のアセットのフィールドにバインドします。

You can find the completed files that this example creates in this GitHub repository.

要件

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

• Visual Tree
• UXML
• USS
• BindableElement
• INotifyValueChanged

シリアル化されたオブジェクトを作成する

Texture2D を含むシリアル化されたオブジェクトを作成します。

1. 任意のテンプレートで Unity プロジェクトを作成します。
2. Project ウィンドウで bind-custom-control という名前のフォルダーを作成し、ファイルを保存します。
3. TextureAsset.cs という名前の C# スクリプトを作成し、そのコンテンツを以下のように置き換えます。`

[!code-cs]

カスタムコントロールの作成とスタイル設定

2D テクスチャアセットへの参照を表すカスタムコントロールを C# で作成し、USS でスタイルを設定します。

1. フォルダーに Editor という名前のフォルダーを作成します。
2. Editor フォルダーに、TexturePreviewElement.cs という C# スクリプトを作成します。
3. TexturePreviewElement.cs の内容を以下に置き換えます。

[!code-cs]

1. Editor フォルダーに、Resources という名前のフォルダーを作成します。
2. Resources フォルダーに texture_preview_element.uss という名の StyleSheet を作成し、そのコンテンツを以下に置き換えます。

[!code-css]

Inspector UI の作成

Inspector UI を作成し、カスタムコントロールを Texture2D オブジェクトにバインドします。

1. Editor フォルダーに TextureAssetEditor.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

[!code-cs]

UXML でバインディングを設定する

TexturePreviewElement を含む UXML ファイルを作成し、binding-path プロパティを texture に設定します。これにより、TexturePreviewElement は TextureAsset.texture にバインドされます。

1. Editor フォルダーに texture_asset_editor.uxml という名の UI ドキュメントを作成し、そのコンテンツを以下に置き換えます。

[!code-xml]

1. Project ウィンドウで TextureAssetEditor.cs を選択します。
2. Inspector で texture_asset_editor.uxml を ビジュアルツリー にドラッグします。

バインディングのテスト

1. メニューから、Assets > Create > UIToolkitExamples > TextureAsset を選択します。これにより、TextureAsset という名前のインスタンスが作成されます。
2. 新しい TextureAsset オブジェクトを選択します。Inspector で、テクスチャプレビュー要素を見ることができます。フィールドにテクスチャアセットリファレンスを置くと、フィールドの上にプレビューが表示されます。UI のテクスチャプレビュー要素でアセット参照を変更すると、TextureAsset.texture が変更されます。

その他の参考資料

• SerializedObject のデータバインディング
• バインド可能な要素
• バインディングデータ型変換
• 実装の詳細
• バインディングの例