Inspector Like Foldout

Hello,

I wish to recreate the style of components that you find in the inspector.

5268294--527283--upload_2019-12-10_20-49-40.png

The features of which are:

  • Toggle button on the left (black when focused)

  • Bold title, but not content

  • Padding rather than margin

  • Buttons (specifically the cog) on the right

I am aware that there is a Foldout VisualElement, however this behaves differently to the inspector, and I am seeking here, to see if there are simpler answers before I write my own.

Minor Differences
One minor difference is the toggle of the Foldout visual element is blue when in focus, rather than black - This can be solved however by overwriting the pseudo state in the .uss - but worth mentioning

Another feature of the inspector is that the title is bold, but its content is not. Currently (using Foldout VE) I set the title’s style to bold, and set a class on all direct children which changes the text’s style back to non-bold. Just curious if there is a better way to do this?

Not So Minor Differences

Currently, the foldout adds a margin of 15, rather than padding. Why is this an issue?
5268294--527298--upload_2019-12-10_21-7-20.png
Because I want mimic the PrefabFieldChange indicator (the blue thing). I have so far successfully mimicking it by having a right margin of 2px, colored blue, when there is a change. It looks great!
Unfortunatly, because there is a 15 the line floats in dead space:
5268294--527304--upload_2019-12-10_21-16-14.png

Where this is what I would like:5268294--527310--upload_2019-12-10_21-19-16.png
This could be potentially fixed in uss? But seems like a big issue to fix in USS

The buttons on the right, I just don’t think this is possible with the current VE Foldout?

There there it is, I hope I have explained clearly. Does anybody know if Unity provide a Inspector-like foldout, or has written one? If not is the next logical step to write my own foldout using Unity’s foldout code as reference?

Thanks in advance

5268294--527307--upload_2019-12-10_21-19-1.png

Although the Foldout control is limited API wise, you can achieve what you want with a mix of uss specifications and element injection in your hierarchy. I really suggest using the UIElements Debugger to know what Foldout selectors you need to override to achieve the desired style.

1 Like

Thank you for your reply,

I have successfully created the uss to style the foldout like the inspector (phew, that was a pain :wink: )

.unity-foldout
{
    padding-left:0px;
    padding-right:0px;
    border-width: 1px 0px 1px 0px;
    border-color: rgb(127,127,127);
}

.unity-foldout__toggle:hover
{
    background-color:rgb(214,214,214)
}
.unity-foldout__toggle
{
    padding-left:10px;
    padding-bottom:3px;
    border-left-width:2px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.unity-foldout__toggle:focus>.unity-toggle__input>Label
{
    color:rgb(0,60,136);
    -unity-font-style: bold;
}
.unity-foldout__toggle>.unity-toggle__input>Label
{
    -unity-font-style: bold;
}

.unity-foldout__toggle>.unity-toggle__input>#unity-checkmark
{
    background-image: resource("IN foldout.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle>.unity-toggle__input:checked>#unity-checkmark
{
    background-image: resource("IN foldout on.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}

.unity-foldout__toggle:focus>.unity-toggle__input>#unity-checkmark
{
    background-image: resource("IN foldout.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:focus>.unity-toggle__input:checked>#unity-checkmark
{
    background-image: resource("IN foldout on.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}

.unity-foldout__toggle:active>.unity-toggle__input>#unity-checkmark
{
    background-image: resource("IN foldout act.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:active>.unity-toggle__input:checked>#unity-checkmark
{
    background-image: resource("IN foldout act on.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}

.unity-foldout__content
{
    -unity-font-style: normal;
    background-color: rgb(194,194,194);
    margin-left: 0px;
        padding-right:7px;
}

#TextArea, #MyOtherFields
{
    padding-left: 22px;
    border-width: 0px 0px 0px 2px;
}

5285274--530049--delete.gif

The background tint for the checkmark caught me out for a bit, as when i loaded the foldout images, they would be transparent. When I inspected the normal image, it didnt seem to have a background color tint, so i’m unsure why it (the default checkmark) shows as fully opaque?

I managed to add the burger to the foldout with, unfortunately I had to do this though c#.

Luckly my Foldout is it’s own VE, so was only a few hours of tweaking (most of that was looking for the correct resource!)

.options
{
    background-image:  resource("pane options.png");
    border-width: 0px 0px 0px 0px;
    background-color: rgba(0,0,0,0);
    -unity-background-image-tint-color: rgba(0,0,0,127);
    width:16px;
    height:16px;
    border-radius: 0px 0px 0px 0px;
}
.options:hover
{
    background-color:rgb(239,239,239);
}

.titleBar:hover
{
background-color:rgb(214,214,214)
}

#unity-checkmark
{
align-self:center;
}
            var tog = this.Q<Toggle>();
            var ve = new VisualElement();
            ve.AddToClassList("titleBar");
            var root = tog;
            root.Add(ve);
            var butt = new Button();
            butt.AddToClassList("options");
            ve.Add(butt);
            ve.BringToFront();

5285496--530076--upload_2019-12-15_21-32-30.png

The whole code (minus my own Visual element code) is in the post below

c#

 public class CustomElement : VisualElement
{
public CustomElement (){
            var tog = this.Q<Toggle>();
            var ve = new VisualElement();
            ve.AddToClassList("titleBar");
            var root = tog;
            root.Add(ve);
            var butt = new Button();
            butt.AddToClassList("options");
            ve.Add(butt);
            ve.BringToFront();


            TextArea = this.Q(name: "TextArea");
            TextField = TextArea.Q<TextField>(name: "Text");
            TextField.RegisterCallback<ChangeEvent<string>>(TextChanged);
            EnableChangedIndicator(TextArea, false);
}
  void EnableChangedIndicator(VisualElement visualElement, bool enable)
        {
            visualElement.EnableInClassList("content-changed", enable);
        }
        private void TextChanged(ChangeEvent<string> evt)
        {
            EnableChangedIndicator(TextArea, true);
}
}

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"
xsi:schemaLocation="
                        UnityEngine.UIElements ../../../UIElementsSchema/UnityEngine.UIElements.xsd
                        UnityEditor.UIElements ../../../UIElementsSchema/UnityEditor.UIElements.xsd
                        UnityEditor.PackageManager.UI ../../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd
"
>
  <engine:Foldout name="Title">
      <engine:VisualElement name ="TextElement">
        <engine:VisualElement class ="content-changed" name="TextArea">
          <engine:Label text="Text"/>
          <engine:TextField multiline="true" class ="TextArea" name="Text"/>
        </engine:VisualElement>

    
    </engine:VisualElement>
</engine:Foldout>

</engine:UXML>

uss:

.unity-foldout
{
    padding-left:0px;
    padding-right:0px;
    border-width: 1px 0px 1px 0px;
    border-color: rgb(127,127,127);
}

.unity-foldout__toggle:hover
{
  
}
.unity-foldout__toggle
{
    padding-left:10px;
    padding-bottom:3px;
    border-left-width:2px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.unity-foldout__toggle:focus>.unity-toggle__input>Label
{
    color:rgb(0,60,136);
    -unity-font-style: bold;
}
.unity-foldout__toggle>.unity-toggle__input>Label
{
    -unity-font-style: bold;
}

.unity-foldout__toggle>.unity-toggle__input>#unity-checkmark
{
    background-image: resource("IN foldout.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle>.unity-toggle__input:checked>#unity-checkmark
{
    background-image: resource("IN foldout on.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}

.unity-foldout__toggle:focus>.unity-toggle__input>#unity-checkmark
{
    background-image: resource("IN foldout.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:focus>.unity-toggle__input:checked>#unity-checkmark
{
    background-image: resource("IN foldout on.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}

.unity-foldout__toggle:active>.unity-toggle__input>#unity-checkmark
{
    background-image: resource("IN foldout act.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}
.unity-foldout__toggle:active>.unity-toggle__input:checked>#unity-checkmark
{
    background-image: resource("IN foldout act on.png");
    -unity-background-image-tint-color: rgba(0,0,0,255);
}

.unity-foldout__content
{
    -unity-font-style: normal;
    background-color: rgb(194,194,194);
    margin-left: 0px;
    padding-right:7px;
}

#TextArea
{
    padding-left: 22px;
    border-width: 0px 0px 0px 2px;
}

.options
{
    background-image:  resource("pane options.png");
    border-width: 0px 0px 0px 0px;
    background-color: rgba(0,0,0,0);
    -unity-background-image-tint-color: rgba(0,0,0,127);
    width:16px;
    height:16px;
    border-radius: 0px 0px 0px 0px;
}
.options:hover
{
    background-color:rgb(239,239,239);
}

.titleBar:hover
{
background-color:rgb(214,214,214)
}

#unity-checkmark
{
align-self:center;
}

.content-changed
{
 border-color:rgb(53,166,228);
 -unity-font-style: Bold;
}
4 Likes

https://github.com/PixeyeHQ/InspectorFoldoutGroup

Thank you for your reply, however the objective of this thread is to create a inspector like foldout using UIToolkit(the sub forum it is in), not imgui

1 Like