Customize the scrollbar in UWP PDF Viewer

12 Aug 20211 minute to read

Customize the color of the scrollbar thumb

The PDF viewer uses the [ScrollViewer] (https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-19041) control to scroll the pages of a PDF. The color of the vertical and horizontal scrollbar thumbs can be customized using the following code.

XAML

<sf:SfPdfViewerControl x:Name = “pdfViewer”>
<sf:SfPdfViewerControl.Resources>
        <SolidColorBrush x:Key="ScrollBarThumbFill" Color="Gold"/>
        <SolidColorBrush x:Key="ScrollBarThumbFillPointerOver" Color="Orange"/>
        <SolidColorBrush x:Key="ScrollBarThumbFillPressed" Color="Red"/>
        <SolidColorBrush x:Key="ScrollBarThumbFillDisabled" Color="Pink"/>
</sf:SfPdfViewerControl.Resources>
</sf:SfPdfViewerControl>

Customize the width of the vertical scrollbar

The width of the vertical scrollbar of the ScrollViewer can be modified by using the VerticalScrollBarWidth property. The default value of the API is as same as the default width of the vertical scrollbar of the ScrollViewer control.

C#

//Sets the width of the vertical scrollbar in the PDF Viewer. 
pdfViewerControl.VerticalScrollBarWidth = 100; 
//Gets the width of the vertical scrollbar in the PDF Viewer. 
double verticalScrollBarWidth = pdfViewerControl.VerticalScrollBarWidth;