DropdownField

DropdownField により、リストから値を選択できます。コントロールをクリックすると、複数のオプションを表示するドロワーが開き、いずれか 1 つを選択できます。常にすべての選択肢を表示する場合は、RadioButtonGroup を使用します。

ノート: 要素を Inspector ウィンドウの他のフィールドと揃えるには、.unity-base-field__aligned USS クラスを適用します。詳細については、BaseField を参照してください。

DropdownField の作成

DropdownField は、UI Builder、UXML、または C# で作成できます。

UI Builder

UI Builder で DropdownField のオプションを追加するには、DropdownField の Inspector ペインで、オプションをカンマ区切りで Choices に入力します。

デフォルト値を設定するには、DropdownField の Inspector で、Index 内のオプションに 0 から始まる連続する番号を入力します。

C#

以下の C# の例では、3 つのオプションがある DropdownField を作成します。DropdownField では、デフォルトで最初のオプションが選択されます。

var dropdown = new DropdownField("Options", new List<string> { "Option 1", "Option 2", "Option 3" }, 0);

//Add another option
dropdown.choices.Add("Option 4");

// To return int value instead of string
dropdown.index = 1; // Option 2
dropdown.value = "Option3";
Assert.IsTrue(myDropdown.index == 2);

// Register to the value changed callback
dropdown.RegisterValueChangedCallback(evt => Debug.Log(evt.newValue));

DropdownField のスタイルの変更

USS ファイルのデフォルトの Panel Settings フィールドをオーバーライドして、DropdownField のスタイルを変更できます。

1. Hierarchy ウィンドウで、UI Document (.uxml) を選択します。
2. Panel Settings を自身の Panel Settings アセットとして設定します。既存の Panel Settings アセットがない場合は、ダイアログの指示に従って作成してください。
3. Panel Settings アセットで、テーマスタイルシート (TSS) を割り当てます。
4. Project ウィンドウで TSS ファイルを選択します。
5. Style Sheets (スタイルシート) に移動し、Add (+) ボタンを選択します。
6. スタイルシートを USS ファイルとして設定します。

例

以下の例では、UXML で DropdownField を作成します。

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <DropdownField label="UXML Field" name="the-uxml-field" />
</UXML>

以下の C# の例は、DropdownField のカスタマイズ可能な機能の一部を示しています。

/// <sample>
// You can provide the list of choices by code, or by comma separated values in UXML
// <DropdownField .... choices="Option 1,Option 2,Option 3" .... />
var choices = new List<string> { "Option 1", "Option 2", "Option 3" };

// Get a reference to the dropdown field from UXML and assign a value to it.
var uxmlField = container.Q<DropdownField>("the-uxml-field");
uxmlField.choices = choices;
uxmlField.value = choices[0];

// Create a new dropdown with the same choices, disable it, and give it a style class.
var csharpField = new DropdownField("C# Field", choices, 0);
csharpField.SetEnabled(false);
csharpField.AddToClassList("some-styled-field");
container.Add(csharpField);

// Mirror the value of the UXML field into the C# field.
uxmlField.RegisterCallback<ChangeEvent<string>>((evt) =>
{
    csharpField.value = evt.newValue;
});
/// </sample>

この例を Unity でライブ体験するには、Window > UI Toolkit > Samples の順に移動します。

C# の基本クラスと名前空間

C# クラス: DropdownField
名前空間: UnityEngine.UIElements
基本クラス: PopupField_1

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

この要素は VisualElement から以下の属性も継承します。

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

Inspector または UI Toolkit Debugger の Matching Selectors セクション を使用して、階層のすべてのレベルで VisualElement のコンポーネントに影響する USS セレクターを確認することもできます。

追加リソース

• RadioButtonGroup