Questions tagged [ui-toolkit]

UI Toolkit is a technology that encompasses a collection of features, functionality, resources, and tools for developing user interfaces (UI) in Unity3D whether to develop custom UI for the Unity Editor or for Runtime UI.

Its development was heavily inspired by the technologies used in web development like Cascading Style Sheets to specify styling choices and markup file to denote the UI structure similar to how its done with HTML on web pages. This helps developers who are more accustomed with web development, transfer a lot of their knowledge to the design of UI in Unity3D.

This technology however is still on its early development stage lacking some of the features offered by uGUI and IMGUI

Questions or problems related to this tag should:

1. Not be related, in its greatest part, to other UI systems like uGUI, IMGUI or third party components like those found in the asset store.
2. Be previously checked for syntax problems or mismatch of variable/property names
3. In case of being related to specifically to the format or style, provide the appropriate markup excerpts from USS and UXML files.
4. Follow the general Stack Overflow guidelines for asking questions.

Structure

UI toolkit uses UXML(Unity Extensible Markup Language) to indicate the general structure of the UI. It also offers a way to create and modify the structure visually with a Editor GUI, which just writes changes in the UXML for the user.

Some frequently used structure components are Visual Element(a generic container), Label, Button and Slider

Example of a button with the style class "ButtonStyleClass" and a text reading "Click Me!"

<ui:Button name="Button1" class="ButtonStyleClass" text="Click Me!"/>

Style

For style, UI toolkit relies on USS (Unity Style Sheet) which is very similar to how CSS(Cascading Style Sheet) is structured

Heres an example on how to style a text that would align itself at the center, display itself as bold, with a big font size and the font color being blue

.HeaderTextBold{
    align-self: center;
    justify-self: center;
    font-size: 80px;
    -unity-font-style: bold;
    color: rgb(68, 138, 255);
}

To note that a lot of features are lacking from USS that are present in the a modern implementation of CSS. As in the example above(-unity-font-style), some attributes don't share the same nomenclature as standard CSS and some have a different behavior or even properties.

Behaviour

In place of javascript, UI toolkit relies on standard C# scripts to manipulate the UI behaviour. Unity Software provides some examples along with the documentation to help developers reach their objective

uGUI, IMGUI and UI Toolkit

Unity Software offers a comparison web page for developers to better choose which system to rely on when developing UI.

Some confusion is generated due to the nomenclature of these different tools, to note that usually when using UI Toolkit these namespaces are used.

using UnityEngine; 
using UnityEngine.UIElements; 
using UnityEditor;
using UnityEditor.UIElements;

While uGUI uses

using UnityEngine; 
using UnityEngine.UI; 
using UnityEditor;
using UnityEditor.UI;