UI: Scrollbars & Dropdowns

[Strdate 16]

For a while I am facing a problem with UI Dropdowns. Simply, if there are too many items many of them will be neither visible nor accessible. When I implemented the UI dropdown I copied it from other mods (Parallel road tool, originally probably from CimTools) so I looked for inspiration there. But the parallel road mod seems to be facing the exact same problem - many items are inaccessible. I even found there something called something like "TextFieldDropdown" suggesting that there would be a text field for searching thru the list, but it was not implemented.

When looking at the code of UIDropDown, I found this interesting field - 

public UIScrollbar listScrollbar
		{
			...
		}

Adding a scrollbar to the dropdown selection list would solve all my problems, but I didn't figure out how to do it. I looked in many places in the game, but didn't find a single dropdown which would have a scrollbar! So I can't copy it from anywhere.

This is +/- where I am at with my code:

public class UINetInfoDropDown : UIDropDown
    {
        private NetInfo[] m_netInfos;
        private SortedDictionary<string, NetInfo> m_dictionary;

        public UINetInfoDropDown()
        {
            atlas = ResourceLoader.GetAtlas("Ingame");
            size = new Vector2(90f, 30f);
            listBackground = "GenericPanelLight";
            itemHeight = 25;
            itemHover = "ListItemHover";
            itemHighlight = "ListItemHighlight";
            normalBgSprite = "ButtonMenu";
            disabledBgSprite = "ButtonMenuDisabled";
            hoveredBgSprite = "ButtonMenuHovered";
            focusedBgSprite = "ButtonMenu";
            listWidth = 90;
            listHeight = 1000;
            listPosition = UIDropDown.PopupListPosition.Below;
            clampListToScreen = true;
            foregroundSpriteMode = UIForegroundSpriteMode.Stretch;
            popupColor = new Color32(45, 52, 61, 255);
            popupTextColor = new Color32(170, 170, 170, 255);
            zOrder = 1;
            textScale = 0.8f;
            verticalAlignment = UIVerticalAlignment.Middle;
            horizontalAlignment = UIHorizontalAlignment.Left;
            selectedIndex = 0;
            textFieldPadding = new RectOffset(8, 0, 8, 0);
            itemPadding = new RectOffset(14, 0, 8, 0);
            
            UIButton button = AddUIComponent<UIButton>();
            triggerButton = button;
            button.atlas = ResourceLoader.GetAtlas("Ingame");
            button.text = "";
            button.size = size;
            button.relativePosition = new Vector3(0f, 0f);
            button.textVerticalAlignment = UIVerticalAlignment.Middle;
            button.textHorizontalAlignment = UIHorizontalAlignment.Left;
            button.normalFgSprite = "IconDownArrow";
            button.hoveredFgSprite = "IconDownArrowHovered";
            button.pressedFgSprite = "IconDownArrowPressed";
            button.focusedFgSprite = "IconDownArrowFocused";
            button.disabledFgSprite = "IconDownArrowDisabled";
            button.foregroundSpriteMode = UIForegroundSpriteMode.Fill;
            button.horizontalAlignment = UIHorizontalAlignment.Right;
            button.verticalAlignment = UIVerticalAlignment.Middle;
            button.zOrder = 0;
            button.textScale = 0.8f;
			
          	// Does not work -
            UIScrollbar sbar = AddUIComponent<UIScrollbar>();
            listScrollbar = sbar;
            sbar.width = 20;
            sbar.height = 1000;
            sbar.scrollSize = 40;
            sbar.relativePosition = new Vector2(0, height);

            eventSizeChanged += new PropertyChangedEventHandler<Vector2>((c, t) =>
            {
                button.size = t; listWidth = (int)t.x;
            });
            
            Populate();
        }
  
  		...
}

When I open the scene explorer there is some kind of item in the place where the scrollbar should be, but nothing is visible. Maybe the problem is with setting the sprites; I don't know. I would appreciate any help!

[boformer 3,169]

In NetworkSkins I'm also using dropdowns. I let the dropdowns appear above the dropdown field. I also limited the size of the expanded list to 300 pixels. There is no scrollbar, but the list is scrollable and as long as there are 300px above the dropdown, everything is fine:

 dropDown.listHeight = 300;

https://github.com/boformer/NetworkSkins/blob/master/NetworkSkins/UI/UIUtil.cs#L91-L141

Can you see the scrollbar in CTRL + R mode?

 

[Strdate 16]

Up to the small changes I use the exact source code as you, I just created a dedicated class for it. Do you think that the size of the popup matters? The popup does fit to the screen thanks to the clampListToScreen parameter. (However people with resolution smaller than 1000px might have problem)

What keys do you use to scroll the list? Do you use the mouse wheel? (My mouse wheel is not working and I am used to do without it)

I do see the scrollbar in CTRL+R, but that's all. I tried pushing it to front as well but didn't work. Moreover, if you try to inspect it with CTRL+F, the popup hides and the scrollbar is destroyed, so then I see NullPointerExceptions everywhere.

When I was looking thru the UIDropDown class I found this -

GameObject gameObject = UnityEngine.Object.Instantiate<GameObject>(this.listScrollbar.gameObject);
				this.m_ActiveScrollbar = gameObject.GetComponent<UIScrollbar>();
				float d = base.PixelsToUnits();
				Vector3 a = this.m_Popup.transform.TransformDirection(Vector3.right);
				Vector3 position = this.m_Popup.transform.position + a * (size2.x - this.m_ActiveScrollbar.width) * d;
				this.m_ActiveScrollbar.transform.parent = this.m_Popup.transform;
				this.m_ActiveScrollbar.transform.position = position;
				this.m_ActiveScrollbar.anchor = (UIAnchorStyle.Top | UIAnchorStyle.Bottom);
				this.m_ActiveScrollbar.height = this.m_Popup.height;
				this.m_Popup.width -= this.m_ActiveScrollbar.width;
				this.m_Popup.scrollbar = this.m_ActiveScrollbar;
				this.m_Popup.eventSizeChanged += delegate(UIComponent component, Vector2 size)
				{
					this.m_ActiveScrollbar.height = component.height;
				};

This code is executed every time the popup is shown. The scrollbar is copied every time and the height is set to to the one of the popup. But it does not seem to happen in my case.

Edit: I put a breakpoint with dnSpy in the code above and it indeed gets executed. So hopefully the problem is still only with visibility/setup...

[boformer 3,169]

7 hours ago, Strdate said:

What keys do you use to scroll the list? Do you use the mouse wheel? (My mouse wheel is not working and I am used to do without it)

Yes I'm using my scroll wheel. Also got complaints from users without scroll wheels

For BuildingThemes, SamsamTS created a self-made dropdown with scroll bar for a large number of items. Maybe that will help you:

https://github.com/boformer/BuildingThemes/blob/master/BuildingThemes/GUI/ThemeManager/UIBuildingOptions.cs#L271-L312

https://github.com/boformer/BuildingThemes/blob/master/BuildingThemes/GUI/UIFastList.cs

[Strdate 16]

Thank you! That explains everything. Well, people would be probably complaining to me in the comments as well if it was not possible. It seems that people without mouse wheels are endangered species today (silent cry). I shamelessly released the mod with what I thought was a broken dropdown and decided to wait to see what would happen. Nothing happened, so I concluded people probably weren't using it at all  

Besides, I was mildly annoyed that you can't at least use arrow keys to navigate it. Now I realized that this crucial line of code was missing...

builtinKeyNavigation = true;

It is not in the original code from SamsamTS and the "copy-paste modders" like me of course didn't add it to the code afterwards. I think there is no reason why this should not be always enabled...

I think that I will mothball the textfields and scrollbars for now as this is much simpler solution. Thanks for the links, at least there is someone who tackled this problem. I will take a look at it.