Customizing a scrollbar in ListView widget

Development Programming & Scripting UI
3

Hi
I had the same problem, we wanted to customize the design of the ScrollBar.
And because we’re not using a modified Engine version, I had to find a workaround. I created a child that hold a BarStyle value, and update the ScrollBar widget right after the construction of the widget.

#pragma once

#include "CoreMinimal.h"
#include "Components/ListView.h"
#include "CustomListView.generated.h"

/**
 * 
 */
UCLASS()
class TEST_API UCustomListView : public UListView
{
	GENERATED_BODY()

	UCustomListView(const FObjectInitializer& Initializer);

protected:
	virtual TSharedRef<STableViewBase> RebuildListWidget() override;

public:
	UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Style", meta = (DisplayName = "Bar Style"))
	FScrollBarStyle WidgetBarStyle;
};

#include "UI/CustomListView.h"

#include "UI/SCustomListView.h"

UCustomListView::UCustomListView(const FObjectInitializer& Initializer)
	:Super(Initializer)
{
	WidgetBarStyle = FCoreStyle::Get().GetWidgetStyle<FScrollBarStyle>("Scrollbar");
}

TSharedRef<STableViewBase> UCustomListView::RebuildListWidget()
{
	auto outRef = ConstructListView<SCustomListView>();
	auto customViewRef = StaticCastSharedRef<SCustomListView<UObject*>>(outRef);
	
	customViewRef->UpdateBarStyle(WidgetBarStyle);
	
	return outRef;
}

#pragma once

#include "Widgets/Views/SListView.h"

#include "CoreMinimal.h"
#include "Widgets/SCompoundWidget.h"

/**
 * 
 */
template <typename ItemType>
class TEST_API SCustomListView : public SListView<ItemType>
{
public:
	void UpdateBarStyle(const FScrollBarStyle& inBarStyle)
	{
		WidgetBarStyle = inBarStyle;
		if (ScrollBar.IsValid())
		{
			ScrollBar->SetStyle(&WidgetBarStyle);
		}
	}

private:
	FScrollBarStyle WidgetBarStyle;
};

Hope this helps anyone looking fo a solution

2 Likes