Reuse UXML files

You can create a UXML file as a template and reuse it in other UXML files.

Import a UXML template

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>

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.

Override an attribute

You can override attributes with the UXML tag. To override an attribute, specify the following:

• The element-name attribute of the element whose attributes you want to override
• 오버라이드하려는 속성의 이름
• 새로운 속성 값

For 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:

• Attribute overrides find matching attributes according to the element name you specify. You can’t use USS Selectors or UQuery to match elements.
• Although you can override an element’s binding-path attribute, data binding doesn’t work with attribute overrides.
• You can’t override an element’s name or style attributes.

추가 리소스

• Templates