C# スクリプトでスタイルを適用する

style に書き込むことで、要素にスタイル値を設定できます。ただし、実際にレンダリングされた要素スタイルは、resolvedStyle から読み取ります。

スタイルの設定

C# スクリプトでは、ビジュアル要素の style プロパティにスタイルを直接設定できます。例えば、以下のコードではボタンの背景色を赤に設定します。

button.style.backgroundColor = Color.red

Unity スタイルシート (USS) をビジュアル要素に設定することもできます。Unity では、USS ファイルは C# スクリプトで StyleSheet オブジェクトとして表されます。

ビジュアル要素にスタイルシートを追加するには

AssetDatabase.Load() や Resources.Load() など、標準 Unity API を使用して StyleSheet オブジェクトをロードします。
ビジュアル要素の styleSheets プロパティを使用して、StyleSheet オブジェクトを追加します。

以下の例では、ローカル変数 styleSheet のスタイルシートをローカル変数 element の要素に追加します。

element.styleSheets.Add(styleSheet);

ノート: スタイルのルールはビジュアル要素とそのすべての子に適用されますが、要素の親や兄弟には適用されません。USS ファイルを変更すると、このスタイルシートを使用する UI が自動的に更新されます。

解決済みスタイルの取得

要素のスタイル値は、複数の適用クラス、先祖からの継承、UXML または C# コードからのインラインスタイルなど、さまざまなソースから計算されます。これらの値はフレームによって異なる場合があります。style は要素のインラインスタイルのみを保持し、他のソースは反映しません。resolvedStyle は、現在のフレームのすべてのソースを考慮した最終計算済みの値を持ちます。

例えば、インラインスタイルを使用して要素の高さを設定する場合、style と resolvedStyle は同じ値で開始します。要素を階層に追加すると、レイアウトが更新されるまで resolvedStyle.height は NaN になることがあります。クラスの高さをパーセンテージで定義すると、計算される幅は border-height や padding などの親プロパティに依存します。style.height は、値が変わる可能性がある遷移などの場合に、相対値を与える場合がありますが、resolvedStyle.height は実際にレンダリングされる高さを与えます。

ジオメトリの変更時に、解決済みスタイルを取得するには、GeometryChangedEvent イベントを使用できます。このイベントは、VisualElement のサイズや位置の変更を含むレイアウト変更時にトリガーされます。このイベントのコールバックを登録し、そのコールバックで VisualElement の resolvedStyle プロパティにアクセスして、最終計算済みのスタイルを取得できます。

以下の例では、カスタムの Editor ウィンドウを作成し、要素の解決済みの高さをログに記録します。ウィンドウのサイズを変更すると、要素の高さが変わります。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ResolvedStyles : EditorWindow
{
    [MenuItem("Window/UI Toolkit/ResolvedStyles")]
    public static void ShowExample()
    {
        GetWindow<ResolvedStyles>();
    }
    
    private void OnEnable()
    {
        titleContent = new GUIContent("Resolved Styles");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        
        // Element that is tracked.
        // When you resize the Editor window, the inner content is not necessarily updated
        // during the drag operation. The resolved height field is updated whenever the drag
        // operation is complete.
        var element = new VisualElement
        {
            style =
            {
                flexGrow = 1,
                backgroundColor = Color.red
            }
        };
        root.Add(element);

        // Register a callback for the GeometryChangedEvent
        element.RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);
    }

    // Callback for the GeometryChangedEvent
    public void OnGeometryChanged(GeometryChangedEvent evt)
    {
        // Get the VisualElement that triggered the event
        VisualElement element = evt.target as VisualElement;

        // Get the resolved style of the VisualElement
        float height = element.resolvedStyle.height;

        // Log the resolved of the VisualElement
        Debug.Log("Resolved height: " + height);
    }
}

要素のジオメトリが変わらない場合は、スケジューラーを追加して、要素の解決済みスタイルを定期的にチェックできます。

element.schedule.Execute(() =>
{
    Debug.Log(element.resolvedStyle.height);
}).Every(100);

追加リソース

C# スクリプトでスタイルを取得する

USS のベストプラクティス