The ScrollViewerExtensions type provides extension methods to improve your ScrollViewer implementation.

Platform APIs: ScrollViewerExtensions


The ScrollBarMargin property provides a way to assign a Thickness to the vertical/horizontal ScrollBar of your container.

Here is how this property can be used in XAML:

<Page xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">
    <ListView ui:ScrollViewerExtensions.HorizontalScrollBarMargin="2, 2, 2, 2">
        <!-- ListView Item -->

    <ListView ui:ScrollViewerExtensions.VerticalScrollBarMargin="2, 2, 2, 2">
        <!-- ListView Item -->

And here it is in action in a more complex example, where the margin is also bound:

    ui:ScrollViewerExtensions.VerticalScrollBarMargin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}">
        <controls:ScrollHeader Mode="Sticky">
                Background="{ThemeResource SystemControlAccentAcrylicElementAccentMediumHighBrush}">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        Foreground="{StaticResource Brush-White}"
                        Text="Scroll Header"
                        TextWrapping="WrapWholeWords" />

This converter is used to just bind to top margin, moving only the ScrollBar's top end.

public class DoubleTopThicknessConverter : IValueConverter
    public object Convert(object value, Type targetType, object parameter, string language)
        return new Thickness(0, (double)value, 0, 0);

    public object ConvertBack(object value, Type targetType, object parameter, string language)
        return ((Thickness)value).Top;


It would also be possible to use {x:Bind} and replace the converter with a static function, which would also result in the code being checked at build-time and also running faster and more efficiently.


MiddleClickScrolling allows you to scroll by click middle mouse button (scroll wheel button) and move the pointer of the direction to be scrolled. This extension method can be used directly in ScrollViewer or ancestor of ScrollViewer.

Here is how this property can be used in XAML:

<!-- Setting MiddleClickScrolling directely for ScrollViewer -->
    <!-- ScrollViewer items -->

<!-- Setting MiddleClickScrolling fot the ancestor of ScrollViewer -->
    <!-- ListView items -->

This code results in the following UI:

Middle click scrolling UI

Changing Cursor Type


Resource file must be manually added to change the cursor type when middle click scrolling. If you didn't add then the cursor won't change when middle click scrolling but functionality won't be affected.

Using Existing Resource File

  1. Download MiddleClickScrolling-CursorType.res file
  2. Move this file into your project's folder
  3. Open .csproj file of your project in Visual Studio Code or in any other code editor
  4. Add <Win32Resource>MiddleClickScrolling-CursorType.res</Win32Resource> in the first <PropertyGroup>

Edit Existing Resource File

You can easily edit the existing resource file to customize the cursor depending upon your needs.

  1. Follow the above steps to add the resource file
  2. Open MiddleClickScrolling-CursorType.res file in Visual Studio
  3. Open Cursor folder
  4. Now you can edit the cursor by opening 101, 102, ....., 109


You can find more examples in the unit tests.