How to customize horizontal scroll thumb in UWP ScrollViewer

Question

Suggestion required to customize the color and width horizontal scroll thumb in UWP ScrollViewer. I have tried to customize the scroll thumb as mentioned in the below forum,

https://social.msdn.microsoft.com/Forums/en-US/476b95de-896c-4117-96aa-6e7365e3defe/uwp-xaml-chanaging-the-thumb-color-of-scrollbarscrollviewer?forum=wpdevelop

However, it seems to work only for vertical thumb only.

dear_vv dear_vv · Accepted Answer · 2021-01-21T05:55:44

By testing, the way that setting SolidColorBrush of your mentioned link works well, which also works on horizontal scroll thumb.

For the width of thumb, you could change it through ViewportSize. Please check the following steps:

Open the Document Outline pane, right-click your ScrollViewer control.
Choose the option Edit Template > Edit a Copy. Then a default style of the ScrollViewer control will be applied to your ScrollViewer control.
Find the ScrollBar control named HorizontalScrollBar. Then change the ViewportSize.

Please refer to the following code:

<Page …>
<Page.Resources>       
  <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
    …….
      <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" ViewportSize="10" Value="{TemplateBinding HorizontalOffset}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
       …….
      </Style>
   </Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer Style="{StaticResource ScrollViewerStyle1}" 
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
            <ScrollViewer.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"/>
            </ScrollViewer.Resources>
            <Image Source="Assets/testP.jpg" Height="400" Width="400"/>
        </ScrollViewer>
    </Grid>
</Page>

How to customize horizontal scroll thumb in UWP ScrollViewer

1 Answers