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.

Answer 1

Hi,

Welcome to Microsoft Q&A!

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:

1. Open the Document Outline pane, right-click your ScrollViewer control.
2. Choose the option Edit Template > Edit a Copy. Then a default style of the ScrollViewer control will be applied to your ScrollViewer control.
3. 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>  

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.