[C#] How can I make filterless small ComboBox ? (Done)

[14mhz]

When defining CreatePopup rather than CreateFilterablePopup, I would like to add a scroll function to the combo box.

In the picture above, the left side is implemented with CreateFilterablePopup, and the right side is implemented with CreatePopup.
The problem is that the combobox exceeds the UI size with CreatePopup.
I want to use only CreatePopup, not CreateFilterablePopup, CreateScrollablePopup.
The code I used is below.

    public static JSONStorableStringChooser initComboBox(MVRScript unity, String name, float height, bool isLeft, System.Action<String, String>func1, System.Func<List<string>>func2)
    {
        var j = new JSONStorableStringChooser(name, new List<string>(), "None", name, func1 == null ? null : new JSONStorableStringChooser.SetStringCallback((String v) => func1(name, v)));
        unity.RegisterStringChooser(j);  j.storeType = JSONStorableParam.StoreType.Full;
        UIDynamicPopup u = unity.CreatePopup(j, !isLeft);
        if (func2 != null) u.popup.onOpenPopupHandlers += () => { j.choices = func2(); };
        /* Scrollable ComboBox Pseudo Code Here !!!

        u.popup.blahblah~.setScrollablePopup(true);

        */
        LayoutElement l = u.GetComponent<LayoutElement>();
        l.preferredHeight = l.minHeight = u.height = height;
 
        return j;
    }

Thank you, all!

 

[zqwvc1419]

~return j.
~JSONStorableStringChooser. What is this class used for?

 

[everlaster]

Use CreateScollablePopup, not CreatePopup or CreateFilterablePopup.

This will result in a popup that has the scrollbar in the options panel, but also a horizontal scrollbar above the selected option:

If you want to get rid of the horizontal scrollbar, just disable that game object:

var uiDynamic = CreateScrollablePopup...
var sliderTransform = uiDynamic.transform.Find("Slider");
sliderTransform.gameObject.SetActive(false);
// OR destroy it: UnityEngine.Object.Destroy(sliderTransform.gameObject);

You can further resize things a bit to make it look similar to the standard popup created with CreatePopup:

var layoutElement = uiDynamic.GetComponent<LayoutElement>();
layoutElement.minHeight = 60;
layoutElement.preferredHeight = 60;

var buttonRectTransform = (RectTransform) uiDynamic.transform.Find("Button");
buttonRectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, 0, 60);

var popupPanelRectTransform = (RectTransform) uiDynamic.transform.Find("PopupPanel");
var pos = popupPanelRectTransform.anchoredPosition;
popupPanelRectTransform.anchoredPosition = new Vector2(pos.x, pos.y + 15);

Hope that helps.

 

[14mhz]

To @everlaster,
Thank you so much for your explanation/answer with specific examples.
It really helped me a lot.

 

[MacGruber]

Just as a note, in some situations it can help to just add a Spacer element to the bottom of your UI.

public static UIDynamic SetupSpacer(MVRScript script, float height, bool rightSide)
{
    UIDynamic spacer = script.CreateSpacer(rightSide);
    spacer.height = height;
    return spacer;
}

 

[14mhz]

Just as a note, in some situations it can help to just add a Spacer element to the bottom of your UI.

public static UIDynamic SetupSpacer(MVRScript script, float height, bool rightSide)
{
    UIDynamic spacer = script.CreateSpacer(rightSide);
    spacer.height = height;
    return spacer;
}

To @MacGruber,
it's an honor to get advice from a Guru (Developer for Developers) like you. ^^
I think, might need upside/downside options for popup as arguments ...

 

[MacGruber]

I think, might need upside/downside options for popup as arguments ...

Well, lets say your Popup is placed right at the bottom, maybe the last element. In that case even with scrollbar there might not be enough space. Hence adding a spacer as the last UI element just allows you to scroll the plugin UI further down. Just a simple workaround for VaM's UI limitations.

 

[14mhz]

● I followed @everlaster, @MacGruber's advice and implemented it as follows.

static JSONStorableStringChooser initSmallComboBox(MVRScript script, String name, float height, Color color, bool isLeft, bool popupUpper,
                                                  System.Action<String, String>func1,
                                                  System.Func<List<string>>func2)
    {// https://hub.virtamate.com/threads/c-how-to-make-filterless-small-combobox.60976/
        var chooser = new JSONStorableStringChooser(name, new List<string>(), "None", name, func1 == null ? null : new JSONStorableStringChooser.SetStringCallback((String v) => func1(name, v)));
        chooser.storeType = JSONStorableParam.StoreType.Full;
        script.RegisterStringChooser(chooser); 
      
        var u = script.CreateScrollablePopup(chooser, !isLeft);
        u.labelWidth = 240f;
        u.popup.topButton.image.color = color;
        u.popup.selectColor = color;    
        if (func2 != null) u.popup.onOpenPopupHandlers += () => { chooser.choices = func2(); };

        var s = u.transform.Find("Slider");
        s.gameObject.SetActive(false);
  
        var b = (RectTransform) u.transform.Find("Button");
        b.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, 3, 40);
  
        var p = (RectTransform) u.transform.Find("PopupPanel");
        p.anchoredPosition = new Vector2(p.anchoredPosition.x, p.anchoredPosition.y + (popupUpper ? +380: +5));
  
        var l = u.GetComponent<LayoutElement>();
        l.preferredHeight = l.minHeight = u.height = height; //45f;
   
        return chooser;
    }

● popupLower & popupUpper

Thank you, @everlaster, @MacGruber.