UXML にスタイルを加える

UI Toolkit では、USS を使用してビジュアル要素の見た目をカスタマイズできます。USS の推奨ワークフローは、UI Builder で視覚的に要素のスタイル設定を行い、そのスタイルを USS ファイルに抽出して UXML で参照することです。

UI Builder で要素にスタイルを設定すると、そのスタイルが UXML 要素の style 属性にインラインスタイルとして追加されます (以下参照)。

<ui:UXML ...>
    <ui:VisualElement style="width: 200px; height: 200px; background-color: red;" />
</ui:UXML>

スタイルシートファイルを参照するには、UXML ファイルのルート要素の下に <Style> 要素を追加します。

例えば、UXML ファイルと同じフォルダーに styles.uss という USS ファイルがあり、以下の内容になっているとします。

# root {
    width: 200px;
    height: 200px;
    background-color: red;
}

これは以下のように参照できます。

<ui:UXML ...>
    <Style src="styles.uss" />
    <ui:VisualElement name="root" />
</ui:UXML>

その他の参考資料

UXML の概要

UXML ファイルの再利用