GradientField

GradientField は、グラデーションエディターから色の グラデーション を設定するための エディター専用 のコントロールです。

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

GradientField の作成

GradientField は UI Builder、UXML、または C# で作成できます。以下の C# の例では、デフォルト値で GradientField を作成します。

var gradient = new GradientField();
gradient.value = new Gradient();
gradient.value.colorKeys = new GradientColorKey[]
{
    new GradientColorKey(Color.red, 0),
    new GradientColorKey(Color.blue, 10),
    new GradientColorKey(Color.green, 20)
};

例

以下は GradientField を UXML で作成する例です。

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

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

/// <sample>
var initialValue = new Gradient();
initialValue.colorKeys = new GradientColorKey[]
{
    new GradientColorKey(Color.red, 0),
    new GradientColorKey(Color.blue, 10),
    new GradientColorKey(Color.green, 20)
};

// Get a reference to the field from UXML and assign a value to it.
var uxmlField = container.Q<GradientField>("the-uxml-field");
uxmlField.value = initialValue;

// Create a new field, disable it, and give it a style class.
var csharpField = new GradientField("C# Field");
csharpField.SetEnabled(false);
csharpField.AddToClassList("some-styled-field");
csharpField.value = uxmlField.value;
container.Add(csharpField);

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

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

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

C# クラス: GradientField
名前空間: UnityEditor.UIElements
基本クラス: BaseField_1

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

継承された UXML 属性

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

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

USS クラス

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

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

追加リソース

• Gradient
• ColorField
• GradientMode