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

Posted 2023-03-25

【中文标题】如何在 UWP ScrollViewer 中自定义水平滚动拇指

【英文标题】：How to customize horizontal scroll thumb in 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

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

【参考方案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>