Search Unity

[Wiki] Building a drop-down button

Discussion in 'UI Toolkit' started by aybeone, Jan 16, 2019.

  1. aybeone

    aybeone

    Joined:
    May 24, 2015
    Posts:
    107
    Sharing this with the world, I was looking for such control because I'm tight on UI space in my editor, but without having to dig deep in building a control just for that :D.

    (the values make it consistent VS Unity IMGUI controls, margin is a personal preference, though)

    Unity_2019-01-17_00-07-33.png

    Code (CSharp):
    1. <engine:Button name="be" text="Build Entity" class="command-button-mini-dropdown"/>
    Code (CSharp):
    1. tree.Q<Button>("be").clickable.clickedWithEventInfo += e =>
    2. {
    3.     var menu = new GenericMenu();
    4.     menu.AddItem(new GUIContent("Combined"), false , () => {});
    5.     menu.AddItem(new GUIContent("Separated"), false, () => {});
    6.     menu.DropDown(((VisualElement) e.target).worldBound);
    7. };
    Code (CSharp):
    1. .command-button-mini-dropdown {
    2.     margin-left: 2;
    3.     margin-right: 2;
    4.     -unity-text-align: middle-left;
    5.     font-size: 9;
    6.     padding-top: 2;
    7.     padding-bottom: 3;
    8.     -unity-slice-left: 6;
    9.     -unity-slice-top: 4;
    10.     -unity-slice-right: 14;
    11.     -unity-slice-bottom: 4;
    12.     background-image: resource("Builtin Skins/LightSkin/Images/mini popup.png");
    13. }
    14.  
    15. .command-button-mini-dropdown:active {
    16.     background-image: resource("Builtin Skins/LightSkin/Images/mini popup focus.png");
    17. }
    18.  
     
    aybeone, Jan 16, 2019
    #1
    Stardog and etienne_phil_unity like this.

  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Have you tried the PopupField or EnumField? :)
     
    uDamian, Jan 18, 2019
    #2

  3. aybeone

    aybeone

    Joined:
    May 24, 2015
    Posts:
    107
    As I said in the other thread, they're good but some infrastructure for more flexibility is not public (and it's just better it stays like that IMO). DropdownMenu is similar, it assumes a few things which makes it unpractical and in the end it just leverages GenericMenu so I prefer this way with more control.

    You can see that on my screenshot, the button's text is effectively one and doesn't represent the selected value. EDIT that popup style in fact was misleading and I just ended up removing it:

    Unity_2019-01-18_21-31-58.png

    (the intent of this button is to reduce total buttons on UI to perform different actions closely related)

    Think of it more of a drop-down button than a popup field ! And this example shows that styling in itself is very powerful, I really liked where in IMGUI you could dress a control with any other style that the one designated for it.

    A strong point of this approach is you don't need your own type specifically just for a type, as you said before, generics are not on their way from within UXML and I've heavily invested on it, nothing in my editor is declared from code. I have a huge method for initialization like WinForms designer.cs files but it's definitely better than IMGUI.

    After three weeks of use, this new approach is definitely an improvement to Unity!
     
    Last edited: Jan 18, 2019
    aybeone, Jan 18, 2019
    #3

  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    If you approach works for you by all means, continue using it. I was just suggesting possible alternative ways to do the same thing.

    One idea is to use an EnumField (which you can instantiate in UXML) and then call Init() on it with an Enum of "actions". You can then override (using public properties) the displayed text for all the options as well as the "active" selected option (which you can always set to the same value).

    And you can definitely assign any style to any element, just like in IMGUI. You can always remove the default style classes and add your own (or different built-in style classes). So you can make a button look like a popup field and visa-versa.
     
    uDamian, Jan 18, 2019
    #4