カスタムコントロールのカスタムスタイルを作成する

Version: 2023.2+

この例では、カスタムコントロールのカスタム USS 変数の使用法を説明します。

例の概要

この例では、USS から 2 つの色を読み取り、それを使ってテクスチャを生成するカスタムコントロールを作成します。

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

要件

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

• UI Builder
• ビジュアルツリー
• UXML
• USS

Create the custom control

カスタムコントロールを定義する C# スクリプトと、カスタムスタイルを定義する USS ファイルを作成します。

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

[!code-cs]

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

Create a USS file named ExampleElementCustomStyle.uss and replace its contents with the following:

[!code-css]

UI ドキュメントでカスタムコントロールを使用する

カスタムコントロールを使用するための UI ドキュメントを作成し、カスタムスタイルをカスタムコントロールに適用します。

1. ExampleElementCustomStyle フォルダーに、ExampleElementCustomStyle.uxml という名前の UI ドキュメントを作成します。
2. ExampleElementCustomStyle.uxml をダブルクリックして、UI Builder で開きます。
3. Library > Project > UIToolkitExamples を選択し、ExampleElementCustomStyle を Hierarchy ウィンドウにドラッグしてください。ビューポートウィンドウにグレーの正方形が表示されます。
4. ExampleElementCustomStyle.uss ファイルを既存の USS として加えます。これで、カスタム USS の変数が正方形に適用されます。

その他の参考資料

• カスタムコントロールの作成
• BEM Standard