Skip to content

[ScrollView] Add cross-platform APIs to customize scrollbar color and thickness #34128

@MuthukumarMadasamy

Description

@MuthukumarMadasamy

Description

In .NET MAUI, the ScrollView control does not currently provide any cross-platform API to customize the visual appearance of its scrollbars (vertical or horizontal), such as:

Thumb/track color
Thickness (width/height)
Visibility behavior

This limitation affects not only app-level ScrollView usage.
There are already community questions and discussions that highlight the lack of scrollbar styling support in .NET MAUI, such as:

GitHub issue: “[Windows] How to style the ScrollBar of the ScrollView #18101
GitHub discussion: “Colour for ScrollBar in ScrollView” (requesting the ability to set scrollbar color in a ScrollView)

However, at the moment there is no official, documented, cross-platform way to:

  • Increase scrollbar thickness to improve usability/accessibility.
  • Apply custom colors that match app theming (especially for dark/light backgrounds).
  • Differentiate vertical and horizontal scrollbar styles.

What this feature would do (end result)
The feature would add cross-platform properties on ScrollView (or a related style object) to control:

  • Vertical and horizontal scrollbar color
  • Vertical and horizontal scrollbar thickness

Public API Changes

Below is a sample / pseudo API design to illustrate the idea. Naming and exact types are flexible – this is just to convey the concept.

namespace Microsoft.Maui.Controls
{
    public partial class ScrollView
    {
        // Thickness of the scrollbar in device-independent units.
        public double VerticalScrollBarThickness { get; set; }   // BindableProperty
        public double HorizontalScrollBarThickness { get; set; } // BindableProperty

        // Color/brush of the scrollbar thumb.
        public Brush VerticalScrollBarBrush { get; set; }        // BindableProperty
        public Brush HorizontalScrollBarBrush { get; set; }      // BindableProperty

        // track color behind the thumb.
        public Brush VerticalScrollBarTrackBrush { get; set; }   // BindableProperty
        public Brush HorizontalScrollBarTrackBrush { get; set; } // BindableProperty
    }
}

Example usage (C#):

var scrollView = new ScrollView
{
    VerticalScrollBarThickness = 6,
    HorizontalScrollBarThickness = 6,
    VerticalScrollBarBrush = new SolidColorBrush(Colors.LightGray),
    HorizontalScrollBarBrush = new SolidColorBrush(Colors.LightGray),
};

Example usage (XAML):

<ScrollView
    VerticalScrollBarThickness="6"
    HorizontalScrollBarThickness="6"
    VerticalScrollBarBrush="LightGray"
    HorizontalScrollBarBrush="LightGray">
    <!-- Content -->
</ScrollView>

Intended Use-Case

This feature would be used in any scrollable page or control that relies on ScrollView, where developers need the scrollbar appearance to match their app’s theme and branding. By allowing customization of scrollbar color and thickness, apps can improve visual consistency, accessibility, and usability especially in dark-themed UIs and desktop scenarios where clear, thicker scrollbars are important for mouse and touch interaction.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions