Customizing a scrollbar in UMG/Slate?

Development Programming & Scripting C++
1

Hi there! For a project I’m doing I require a scroll box with a thin scrollbar on the left side - I figured this should be easy enough to cook up in UMG, but it seems I was mistaken. I can’t for the life of me figure out how to properly customize scrollbars. Changing the thumb image and image size does not allow me to create a thumb the width of the bar itself, neither does the “scrollbar thickness” property, and changing the location of the bar seems to be unheard of.

So my question is, how would I go about achieving this? Will I have to create my own scroll box implementation using Slate (which I’ve yet to learn), or is there a less time consuming way after all? Thanks in advance!

Also, my apologies if this is in the wrong forum - there isn’t a dedicated UMG forum, and considering the possibility of Slate-relatedness I figured the C++ one would be the best place for it.

2

So, I’ve decided to bite the bullet, and started to do some digging into the engine source. I noticed that there’s an ExternalScrollbar property in SScrollBox, which would be excellent for placing your own scroll bar anywhere in the widget and linking it to the scroll box. However, it is not exposed through UScollBox - seems like a bit of an oversight on Epic’s part. I copied UScollBox and UScrollBar over into new classes (simply inheriting from them made them invisible in the UMG editor, would be nice if someone can tell me what I’m doing wrong there), gave my UExposedScrollbar a public accessor to its SScrollBar component, and gave my UTouchScrollbox class a UExposedScrollbar property. The UExposedScrollbar property is then used in the RebuildWidget() function, so I can call .ExternalScrollbar() with it.

Some code to make the above make sense:

Taken from SScrollBox - notice how an external scroll bar can be used instead of the one the scroll box always makes by default:



**if (InArgs._ExternalScrollbar.IsValid())
{
	// An external scroll bar was specified by the user
	ScrollBar = InArgs._ExternalScrollbar;
	ScrollBar->SetOnUserScrolled(FOnUserScrolled::CreateSP(this, &SScrollBox::ScrollBar_OnUserScrolled));
	bScrollBarIsExternal = true;
}**
else
{
	// Make a scroll bar 
	ScrollBar = ConstructScrollBar();
	ScrollBar->SetThickness(InArgs._ScrollBarThickness);
	ScrollBar->SetUserVisibility(InArgs._ScrollBarVisibility);
	ScrollBar->SetScrollBarAlwaysVisible(InArgs._ScrollBarAlwaysVisible);

	bScrollBarIsExternal = false;
}

Taken from my UTouchScrollbox - a straight copy of UScrollBox, except for the ExternalScrollbar property:



TSharedRef<SWidget> UTouchScrollbox::RebuildWidget()
{
	// Create a scroll box with an external scroll bar, if supplied.
	if (ExternalScrollbar)
	{
		MyScrollBox = SNew(SScrollBox)
			.Style(&WidgetStyle)
			.ScrollBarStyle(&WidgetBarStyle)
			.Orientation(Orientation)
			**// Apply the external scroll bar to the SScrollBox component.
			.ExternalScrollbar(ExternalScrollbar->GetSlateScrollBar())**
			.ConsumeMouseWheel(ConsumeMouseWheel);
	}
...
}

The problem with this is that I have no idea of how I can set the external scrollbar reference in UMG - if I add EditAnywhere, the engine crashes as soon as I open the widget containing the custom scroll box. Same applies to exposing the property to Blueprint. Do I somehow need to specify how this property needs to be drawn? I haven’t found any info on this yet - help is still greatly appreciated.

3

i realize this thread is several years old at this point, but ran across a situation where i needed a scoll bar on the left side as well, and couldn’t find any justification options to set this automatically. so to accomplish this, i just used the render transform scale. to shift the scroll bar to the left, setting the render transform scale to x = -1 worked. this means that the contents also had to be set to -1 so they would appear non-reflected.

2 Likes
4

For anyone running into these issues:

  • paradoc’s above workaround for flipping the position of the bar works well.
  • There are a bunch of thickness controls in the Scroll Bar widget, including “Bar Thickness” and “Thickness” controls in the Style section, in addition to the images sizes of the various brushes (background, thumb, and slot images). However, the only controls that seem to actually affect thickness are the sizes of the Slot images under Bar Style (track thickness):
    image
    And the Scrollbar Thickness in the Scroll section (thumb thickness):
    image
1 Like