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

【问题标题】：How to customize horizontal scroll thumb in UWP ScrollViewer如何在 UWP ScrollViewer 中自定义水平滚动拇指
【发布时间】：2021-04-24 19:45:26
【问题描述】：

在 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

但是，它似乎只适用于垂直拇指。

【问题讨论】：

标签： uwp xamarin.uwp windows-community-toolkit

【解决方案1】：

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

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

打开文档大纲窗格，右键单击您的 ScrollViewer 控件。
选择编辑模板>编辑副本选项。然后 ScrollViewer 控件的默认样式将应用于您的 ScrollViewer 控件。
找到名为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>

【讨论】：