Interface overview

This is the main UI Builder Editor Window:

StyleSheets

StyleSheets and the USS Selectors within in UI Toolkit are used to share and apply styles across many elements and many UI Documents (UXML).

StyleSheets ペイン で以下を行うことができます。

1. Add, reorder, or remove StyleSheets (USS) to the current UI Document (UXML).
2. Create, reorder, copy, or remove USS Selectors within StyleSheets for sharing styles across many elements.

Hierarchy

The Hierarchy pane contains the tree view representing the element hierarchy of the current document. It’s a superset of the hierarchy you see in the UXML text representation of the UI Document (UXML). Besides the elements created directly from UXML, the Hierarchy pane also contains elements created dynamically and only exist in the runtime of the UI. For example, the Hierarchy pane includes elements that are part of a Template instance (a different document instanced inside the current document), where the UXML would just has a single <Instance> tag.

Hierarchy ペインを使用すると、以下が可能です。

1. Select elements for inspecting or editing.
2. Cut, copy, delete, or reorder elements.
3. Open instanced template documents as sub-documents for in-place (in context) editing.
4. See at once many elements’ style class lists, name attributes, and locally attached StyleSheets.

Elements appear in the tree according to their name attributes. If an element’s name attribute is not set, it appears according to its C# type. You can double-click an element to quickly rename it.

Hierarchy ペインのヘッダーの右上にある ⋮ のアイコンをクリックすると、表示オプションのメニューにアクセスできます。

• Type を選択すると、Hierarchy で、名前の有無にかかわらず、各要素の C# 型が強制的に表示されます。
• Class List を選択すると、各要素のスタイルクラスリストが Hierarchy の項目の横に表示されます。
• Attached StyleSheets を選択すると、ローカルに添付された StyleSheet がその要素の横に表示されます。

Library

Library ペイン は、Unity エディターの　Project ウィンドウ に似ています。利用可能な UI 要素が表示されます。

• Standard タブには、Unity が提供する標準的なビルトイン要素がリストアップされています。これらの要素には、サポートされているすべての Unity エディターとランタイムテーマで動作する標準的なスタイルが含まれています。

Library ウィンドウの右上にある ⋮ アイコンを使って Tree View を選択すると、この表示モードをタイル表示とツリー表示の間で変更することができ ます。

• Project タブには、プロジェクト内のカスタムの .uxml アセットが表示されます。また、VisualElement を継承し、UxmlFactory が UXML 通じてインスタンス化できるように設定されているすべてのカスタム C# 要素も表示されます。 Library の Project タブ内の任意の要素をプレビューするには、その要素にマウスオーバーします。プレビューは、Library ペインの右側に表示されます。

要素をインスタンス化するには、以下のいずれかの操作を行います。

• Hierarchy ペインにドラッグします。
• Drag it onto the Canvas in the Viewport.
• Double-click it. This adds the element as a sibling of the currently selected element. If nothing is selected, the element is added at the root of the UI Document (UXML).

Viewport /Viewport

The Viewport pane displays the output of a UI Document (UXML) on a floating resizable edit-time Canvas.

• The header of the Canvas displays the name of the currently loaded UI Document (UXML). An asterisk (*) next to the name indicates unsaved changes.
• The toolbar contains menus of UI Builder-specific commands, Viewport settings, Theme selector, and the Preview button.
• You can find additional UI Builder settings in the top-right corner of the Viewport under the ⋮ menu, including a shortcut to the UI Builder’s Settings in Unity’s Project Settings.
• The Canvas is where you edit, preview, and interact with the UI Document (UXML) you are authoring.
• You can change Canvas settings by clicking on the Canvas header and accessing the Inspector.

Navigating in the viewport

Pan and zoom to navigate in the viewport. The UI Builder saves each UI Document (UXML)’s current pan and zoom state, and restores them after the UI Builder window reloads, a domain reload, or when you close and re-open the same UI Document (UXML).

新しいドキュメントを作成し開くと、UI Builder はパンとズームの状態をリセットします。

パンするには、以下のいずれかの操作を行います。

1. Middle-click and drag in the Viewport.
2. Hold down Ctrl/Cmd + Alt/Option and click and drag in the Viewport.

ズームするには、Viewport にマウスポインターを置き、以下のいずれかを行います。

1. Position the mouse pointer in the viewport, and rotate the mouse wheel.
2. Hold down Alt/Option and right-mouse drag. Drag right to zoom in, and left to zoom out.

コードプレビュー

UI Builder は、UI を構築する際に、基礎となるUXML と USS テキストを自動的に生成し、 UXML Preview と USS Preview ペイン に表示します。

Inspector

The UI Builder Inspector pane is similar to the Unity Inspector window. The Inspector will display slightly different content, depending on the object you have selected inside the UI Builder:

1. Elements display an Attribute section for per-element (UXML) attributes, a StyleSheets section for assigning style classes and viewing applied styles from StyleSheets, and an Inlined Styles section that allows editing of inline per-element style properties.
2. USS Selectors display a Style Selector section for changing the selector query string and a Styles section for editing of style properties.
3. Canvas displays a Canvas Size section for changing the Canvas size, a Canvas Background section for changing the edit-time canvas background, and a Document Settings section for per-document edit-time settings.