Colour for ScrollBar in ScrollView

[ThanhHaiDang96]

Description

Hi,

How can I set color for scroll bar in a ScrollView?
I have a VerticalStackLayout inside a ScrollView. The StackLayout has background is Black, so I cannot show the ScrollBar with default color.

Do you have any recommends for this issue?

Public API Changes

public partial class ScrollView 
{
// ...
public static readonly BindableProperty ScrollBarColorProperty = BindableProperty.Create(nameof(ScrollBarColor), typeof(Color), typeof(ScrollView), default(Color));

public Color ScrollBarColor
{
get {return (Color) GetValue(ScrollBarColorProperty );}
set {SetValue(ScrollBarColorProperty , value};
}
//...
}

Intended Use-Case

In my app, I have a VerticalStackLayout inside a ScrollView. The StackLayout has background is Black, so I cannot show the ScrollBar with default color.

[davidortinau]

You can access the platform properties and views to account for this. For example on iOS / Mac Catalyst:

https://developer.apple.com/documentation/uikit/uiscrollviewindicatorstyle?language=objc

using Microsoft.Extensions.Logging;
using Microsoft.Maui.Platform;

#if IOS || MACCATALYST
using UIKit;
#endif

namespace ScrollBarColor;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureMauiHandlers(handlers =>
			{
				ThemeScrollBar();
			})
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

#if DEBUG
		builder.Logging.AddDebug();
#endif

		return builder.Build();
	}

	private static void ThemeScrollBar()
	{
		Microsoft.Maui.Handlers.ScrollViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
			
#if IOS
			handler.PlatformView.Scrolled += (s, e) =>
			{
				var scrollView = (UIScrollView)s;
				var verticalIndicator = scrollView.Subviews.Last();
    			verticalIndicator.BackgroundColor = UIColor.Red;
				
			};
#elif MACCATALYST
			handler.PlatformView.IndicatorStyle = UIScrollViewIndicatorStyle.White;
#elif ANDROID
			// Android customization
#elif WINDOWS	
			// Windows customization
#endif
		});
	}
}

scroll_indicator.mp4

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-03-05.at.08.26.25.mp4

[ThanhHaiDang96]

Hi davidortinau,

Thank for your suggestion. However, I just want to change the color in some special cases, and keep default in the others.

Regards,
TH

[HAdennishellen]

Hi @davidortinau,

You had solutions for IOS and Mac, but do you have a solution for android?

Regards Dennis H

[amortensen13]

Thanks for the code. This helped some. The scrollbar is now gray, so it shows in dark mode and light mode. Would prefer to be able to customize it for every ScrollView, since some screens in my app are dark and some are light, but at least now I can see the scroll bar (while I'm scrolling) on both screens.

[granevich]

Does anyone have the solution for Windows?