如何在 UWP ScrollViewer 中自定义水平滚动拇指

问题描述

在 UWP ScrollViewer 中自定义颜色和宽度水平滚动滑块所需的建议。我已经尝试自定义以下论坛中提到的滚动拇指，

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

然而，它似乎只适用于垂直拇指。

解决方法

通过测试，您提到的链接设置 SolidColorBrush 的方式效果很好，也适用于水平滚动拇指。

对于拇指的宽度，您可以通过 ViewportSize 更改它。 请检查以下步骤：

1. 打开文档大纲窗格，右键单击您的 ScrollViewer 控件。
2. 选择选项编辑模板 > 编辑副本。然后 ScrollViewer 控件的默认样式将应用于您的 ScrollViewer 控件。
3. 找到名为 HorizontalScrollBar 的 ScrollBar 控件。然后更改 ViewportSize。

请参考以下代码：

<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>