You can create a UXML file as a template and reuse it in other UXML files.
When you design a large user interface, you can create template UXML files that define parts of the UI, and use the <Template>
and <Instance>
elements to import it into another UXML file.
For example, if you have a portrait UI element that has an image, a name, and a label, you can create a UXML template file as Assets/Portrait.uxml
with the following content:
<ui:UXML ...>
<ui:VisualElement class="portrait">
<ui:Image name="portaitImage" style="--unity-image: url(\"a.png\")"/>
<ui:Label name="nameLabel" text="Name"/>
<ui:Label name="levelLabel" text="42"/>
</ui:VisualElement>
</ui:UXML>
You can then reuse the Portrait template like this:
<ui:UXML ...>
<ui:Template src="/Assets/Portrait.uxml" name="Portrait"/>
<ui:VisualElement name="players">
<ui:Instance template="Portrait" name="player1"/>
<ui:Instance template="Portrait" name="player2"/>
</ui:VisualElement>
</ui:UXML>
When you create instances of a UXML template, you can override the default attribute values of its elements. Attribute overrides allow you to instantiate the same template many times with different values for each instance.
You can override attributes with the UXML
tag. To override an attribute, specify the following:
element-name
attribute of the element whose attributes you want to overrideFor example, if you want to display the same set of information for each player in your game, you can create a UXML template, and use attribute overrides to create player-specific instances.
First, create a template, such as MyTemplate.uxml
, with the following content:
<UXML xmlns="Unityui.UIElements">
<Label name="player-name-label" text="default name" />
<Label name="player-score-label" text="default score" />
</UXML>
Then, instance it from another UXML file and override its attributes to display each player’s name and score:
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
<Template src="MyTemplate.uxml" name="MyTemplate" />
<Instance name="player1" template="MyTemplate">
<!-- Alice is the new value of the text attribute for the player-name-label -->
<AttributeOverrides element-name="player-name-label" text="Alice" />
<!-- 2 is the new value of the text attribute for the player-score-label -->
<AttributeOverrides element-name="player-score-label" text="2" />
</Instance>
<Instance name="player2" template="MyTemplate">
<!-- Bob is the new value of the text attribute for the player-name-label -->
<AttributeOverrides element-name="player-name-label" text="Bob" />
<!-- 1 is the new value of the text attribute for the player-score-label -->
<AttributeOverrides element-name="player-score-label" text="1" />
</Instance>
</UXML>
各オーバーライドで複数の属性を指定できます。例えば、以下の構文は、player-name-label
という名前のインスタンスのすべての要素を検出します。
text
属性のデフォルト値を、新しい値 Alice
でオーバーライドします。tooltip
属性のデフォルト値を、新しい値 Tooltip 1
でオーバーライドします。<AttributeOverrides element-name="player-name-label" text="Alice" tooltip="Tooltip 1" />
属性のオーバーライドは、要素の階層のネスト状のテンプレートを通して伝播します。例えば、テンプレート A がテンプレート B をインスタンス化し、テンプレート B がテンプレート C をインスタンス化する場合、テンプレート A とテンプレート B の両方がテンプレート C の属性をオーバーライドできます。
When you override attributes in nested templates, the deepest override takes precedence. In the example above, if template A and template B both override the same attribute of template C, the override in template B determines what actually appears in the rendered UI.
Attribute overrides have the following limitations:
binding-path
attribute, data binding doesn’t work with attribute overrides.name
or style
attributes.