How to assign builtin toolbar style to visual element in the UI Builder?

Unity Engine
1

I’m experimenting with the new UI Builder and got stuck when I wanted to create an editor toolbar with buttons. The builder does not have any Toolbar control, but as far as I understand, I only need a VisualElement with the toolbar styling, so I added “unity-toolbar” to the style class list:

5231201--521789--upload_2019-11-30_23-17-34.png
5231201--521789--upload_2019-11-30_23-17-34.png712×322 18 KB

However, this doesn’t do anything by itself. Do I need to manually add the default Unity stylesheet?

2

You also need to add the StyleSheet for the Toolbar.
5232296--521930--Annotation 2019-12-01 022901.png
So what you can do is open up the UXML, an inside the VisualElement for your pseudo toolbar, you can add

(If you're not using dark theme, I'm assuming that you would need to take the "Dark" part out of those, but I'm not entirely sure.
2 Likes
3

So I added the style path to the UXML manually and it kind of worked, but only in my actual custom editor window, not in the builder. The builder simple did not apply the styles. In my custom window it showed the toolbar background and basic styling, but some of the margins were off. So now I’m thinking that there must be a way to add the style sheet via the builder or maybe it’s a bug. I also ran into issues after editing the UXML manually, the builder would simply ignore my manual changes until I restarted Unity (tried closing and re-opening the builder window multiple times and entering play mode, but it seems to keep a copy of the UXML in persistent cache).

Anyway, I had more success adding the prebuilt Toolbar and ToolbarButton controls manually via UXML like this:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <uie:Toolbar name="Toolbar" class="unity-toolbar" style="flex-direction: row;">
        <Style path="Assets/Tree Log/TreeLogWindow.uss" />
        <uie:ToolbarSpacer />
        <uie:ToolbarButton text="Clear" name="ClearButton" focusable="true" />
        <uie:ToolbarSpacer />
        <uie:ToolbarToggle text="Collapse" name="CollapseButton" />
    </uie:Toolbar>
    <ui:VisualElement name="PseudoToolbar" class="unity-toolbar" style="flex-direction: row;">
        <Style path="DefaultCommonDark.uss" />
        <Style path="ToolbarDark.uss" />
        <Style path="Assets/Tree Log/TreeLogWindow.uss" />
        <ui:Button text="Test A" class="unity-toolbar-button" />
        <ui:Button text="Test B" />
    </ui:VisualElement>
</ui:UXML>

The Toolbar and ToolbarButton etc. controls do not show up in the builder library, but apparently they are supported if added manually. They automatically show the correct style in the builder and the final window with correct margins etc. Also, I noticed, when using the Toolbar control, the style is automatically switched dark vs light depending on my editor theme, but of course it stays dark if I add the stylesheet manually like in the PseudoToolbar.

Not sure how this actually works, but maybe we’ll have more documentation as the builder develops.

4

Another option, I think, is to just use the Toolbar control as your base control, then add in your child controls rather than trying to recreate the Toolbar. I’m not sure how that would work, though. I did try it out with a regular button, and it seemed to work.

What exactly are you trying to achieve? Could you not just use a Toolbar with ToolbarButtons?

Also, I don’t even bother using the UI Builder. It seems kinda broken, and throws some errors, so I just edit the UXML directly.

5

The UI Builder does not yet support multiple StyleSheets being referenced by the UXML file. Only the first tag from your UXML file will be seen and editable by the Builder.

This is the recommended approach to recreate a Toolbar in UIElements. The Toolbar, like other controls, has its own internal StyleSheet it adds to itself on construction so a simple class cannot be used to recreate the look.

You can create Toolbar controls in the Builder, but for now you have to enable Developer Mode in Unity. Go to the Help > About window of Unity and just type “internal”. Now, in the Library pane of the UI Builder you should see a UnityEditor entry in the Project section which will contain the Toolbar controls.

Curious to know more about what errors you got. UXML editing is always an option but it should ideally not be because the UI Builder is broken for you.

2 Likes
6

I forget exactly what it was, but some sort of NullReference exception. I can’t recall how it happened, or how to repeat it, but it’s happened several times while using the builder, so if it happens again I’ll try to figure out how to repeat it.