How to use U.I.Elements/ U.I.Builder to access bools/toggles?

Questions & Answers
1

Hello, and thank you. I have 3 main questions regarding U.I. Elements/ U.I. Builder.

  1. Am I correct in thinking that the new U.I. Builder window can be used to expand the Editor/Inspector?
  2. If U.I. Builder cannot or shouldn’t be used to expand the Editor/Inspector, then I should use U.I. Elements?
  3. What does a simple C#,USS,UXML. setup look like when it just displays an group of named Toggles/bools.

My final goal is just to have a Class or Struct contain 64 bools(eventually in an array), that I would like to have displayed in the inspector in 8x8 rows.(eventually color coded rows). I am struggling to understand or find an example of Toggle/Bool U.I. Elements.

I have read and watched the following material on the topic.

although some of the C#, USS, and UXML script confuses me

2

Hello, @funcookergames

Yes, you can create custom windows/inspectors with UIElements. The UIBuilder is just a WYSIWYG editor for UXML files. Think about UIBuilder as similar software to Adobe Dreamweaver and about UXML files as HTML files.

To get values from toggles you need to query element by its name or get list of elements queried by class:

Dictionary<string, bool> togglesValues = treeViewElement
	.Query<Toggle>(null, "unity-toggle")  // Default ("unity-toggle") or custom class can be used.
	.Build()
	.ToList()
	.ToDictionary(toggle => toggle.name, toggle => toggle.value)

togglesValues["SomeToggleName"] // toggle can be accessed by this code

P.S. In case you haven’t already added or you want to add Editor/Runtime support for UIElements.

Editor UIElements Support

To add UIElements development tools and support you need do next steps:

  1. You must have Unity 2019.3+
  2. Install “UI Builder” package from Package Manager window (Windows > Package Manager), also don’t forget to change filter to “Package: All” to find the package.

Runtime UIElements Support

To add UIElements Runtime support you need do next steps:

  1. You must have Unity 2019.3+
  2. You must copy UIERuntime folder from example project

P.S. Be informed that UIERuntime not on release stage it is bulded for tests and can be unstable.

Examples

Sample project with UIElements runtime support can be found here or just import code samples from UI Builder package:

155895-ui-builder.png
155895-ui-builder.png934×867 131 KB

3

Hey @funcookergames,

My new blog Exploring Unity has some tutorials on how to use UIElements. In particular, the post Extending Unity with UIElements - Part 3 covers how to use the <Toggle> element. Take a look, and then let me know if you have any more specific questions.

If you just want a quick code sample, below is a very simple, but complete example of how to create a custom editor window with a toggle in UIElements and check its value when a button is clicked. First some preview screenshots:

Here’s the menu item and hotkey that you will have to launch the custom editor window after creating the 3 files below.
159800-screenshot-7.png

And here’s the custom editor window in action:
159801-screenshot-8.png

Assets/Editor/ToggleDemo.uxml

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
>
  <engine:VisualElement>
    <engine:Style src="ToggleDemo.uss" />
    <engine:Toggle name="myToggle" label="Toggle Label" text="Toggle Text" />
    <engine:Button name="myButton" text="Click here to log the toggle value" />
  </engine:VisualElement>
</engine:UXML>

Assets/Editor/ToggleDemo.uss

* { font-size: 16px; -unity-font-style: bold; }
 Toggle { border-width: 2px; border-color: black;
          margin: 8px; padding: 8px 0 8px 8px; }
 Button { margin: 8px 16px; padding: 8px 0; }

Assets/Editor/ToggleDemo.cs

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ToggleDemo : EditorWindow
{
    Toggle myToggle;

    [MenuItem("ExploringUnity.com/ToggleDemo %#t")]
    public static void ShowExample() { GetWindow<ToggleDemo>(); }

    public void OnEnable()
    {
        // Set up UI
        var uiTemplate = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/ToggleDemo.uxml");
        var ui = uiTemplate.Instantiate();
        rootVisualElement.Add(ui);
        // Find the toggle and store a reference so we can check its value later
        myToggle = ui.Q<Toggle>("myToggle");
        // Find the button and set up a click handler
        var myBtn = ui.Q<Button>("myButton");
        myBtn.clicked += LogToggleValue;
    }

    void LogToggleValue() { Debug.Log($"myToggle.value: {myToggle.value}"); }
}

Hope this helps!