UI Toolkit Plus - Code Gen, New Elements and Other

Hi, I want to share with you one of my libraries:

UI Toolkit Plus
at GitHub

Description
Bunch of UI Toolkit generic features that can be resused across multiple projects.

Features
UXML C# Script generation
You can generate a partial C# class from the UXML file.

Given the following UXML file “MainMenuView.uxml”:

<ui:VisualElement>
   <ui:Label name="title" />
</ui:VisualElement>
<ui:VisualElement name="menu">
   <ui:Button name="confirm-button" />
</ui:VisualElement>

The tool will generate C# script “MainMenuView.gen.cs”:

  • this script will be regenerated automatically each time corresponding uxml file changes.
  • this is an opt-in feature by design, C# files will be generated only for for files that you chose.
  • tool picks up relevant assembly and generates appropriate namespace for generated cs file.
  • more documentation here
partial class MainMenuView
{
   private Label title;
   private VisualElement menu;
   private Button confirmButton;

   private void AssignQueryResults(VisualElement root)
   {
       title = root.Q<Label>("title");
       menu = root.Q<VisualElement>("menu");
       confirmButton = root.Q<Button>("confirm-button");
   }
}

QAttribute
This is alternative way to retrieve references from Visutal Tree Asset,

Where standard VisualElement query looks like this:

public class ExampleEditorWindow
{
   ObjectField objField;
   ListView listView;
   Label label;
 
   void OnEnable()
   {
     objField = rootVisualElement.Q<ObjectField>("objField");
     listView = rootVisualElement.Q<ListView>("listView");
     label = rootVisualElement.Q<Label>("label");
   }
}

With QAttribute it looks like this:

public class ExampleEditorWindow
{
   [Q("objField")] ObjectField objField;
   [Q("listView")] ListView listView;
   [Q("label")] Label label;
 
   void OnEnable()
   {
     rootVisualElement.AssignQueryResults(this);
   }
}

QAttribute marks the class member as a query target, and the AssignQueryResults extension method assigns appropriate UQuery results to those members.

Copy Field Declarations (UI builder extension)
Select visual element in your UI Builder hierarchy and use UI Builder/Copy Field Declarations shortcut (Alt + C). This will copy C# field declarations for the selected visual element and its children.


Copied C# field declarations:

   [Q("root")]

   private VisualElement root;
   [Q("child")]
   private VisualElement child;

ReorderableManipulator

Manipulator class that allows you to drag and drop visual elements to reorder them.

TabGroup and Tab

TabGroup, Tab, and TabDropdown are new elements for any tab-related functionality.

Installation
Get GitHub repo URL and follow these instructions.
Feedback
Let me know if you found anything useful in here or if you wish something was more polished. :slight_smile:

4 Likes

1.7.0 - Style Sheet Exporter

I added a new Editor window available for Unity 2022.1 and newer.
Style Sheet Exporter Window allows you to export built-in style sheets into your project.
I often found myself asking the question “How did Unity do it” when I was writing USS selectors. Now I know and so can you :slight_smile:

1 Like

3.0.0 - Code Generation QoL

Added

  • UXML Code Generation:
  • Option to override namespace for generated C# files from UXML importer header.
  • Option to generate a second file of a generated partial class.
  • Project-wide settings for code generation.
  • support for pascal case and camel case styles
  • support for prefix and suffix for code identifiers
  • Custom icon for .gen.cs files.

Changed

  • generate c# script context action moved to dropdown menu in UXML Importer header.
  • UXML attribute rename: code-gen-prefixgen-cs-private-field-prefix