Colour for ScrollBar in ScrollView #20992

ThanhHaiDang96 · 2024-03-04T12:19:04Z

ThanhHaiDang96
Mar 4, 2024

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 · 2024-03-05T14:30:03Z

davidortinau
Mar 5, 2024
Maintainer

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
		});
	}
}