Get started with UI Builder

The following is the general approach to create UI in the UI Builder:

1. Open an existing or create a new UI Document (UXML).
2. Drag elements from the Library into the Hierarchy to create your UI hierarchy.
3. Select elements in the Hierarchy or Canvas to access their attributes and style properties in the Inspector.
4. Set per-element attributes like Label Text or Button Tooltip via the Inspector’s Attributes section.
5. Set per-element style properties, including layout and position properties, via the Inspector’s Inline Styles section.
6. When more than one element starts to need the same style properties, add or create a StyleSheet to the UI Document (UXML) using the StyleSheets pane.
7. With an element selected, extract its inline style properties to a StyleSheet via the Inspector’s StyleSheet > Style Class List section by giving it a new style class name and clicking Extract Inlined Styles to New Class.
8. Create additional USS Selectors via the Add new selector… at the top of the StyleSheets pane that override a subset of style properties on a specific set of elements, like a .my-button:hover { color: blue; } selector that sets the color blue on any element that has the class .my-button and the mouse is on top of it.
9. Test your UI by clicking the Preview button in the Viewport’s toolbar to disable Canvas authoring and allow the UI to become interactable (ie. test the :hover styles).
10. Go back to step (2) and save the UI Document (UXML).

其他资源

• Create and manage UI Documents (UXML)
• Set up the edit-time Canvas
• Runtime UI vs Editor Extension Authoring
• Inline styles vs style sheets