单击滚动条拇指上方或下方不会滚动

Question

在默认 ScrollBar 上，当单击 Thumb 上方或下方时，滚动条会向您单击的方向移动。

我有一个自定义滚动条模板，但此功能不再有效。我查看了 scrollbar reference source，但似乎没有找到可以执行此操作的任何内容。那么，这是如何工作的？

知道我的控制模板中可能缺少什么吗？

<ControlTemplate TargetType="{x:Type ScrollBar}">
   <Grid x:Name="Bg" SnapsToDevicePixels="true" Background="Transparent" Opacity="0.01">
      <Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
         <Track.Thumb>
            <Thumb Style="{StaticResource DefaultVerticalScrollBarThumbStyle}"/>
         </Track.Thumb>
      </Track>
   </Grid>
   <ControlTemplate.Triggers>
      <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}" Value="True">
         <DataTrigger.EnterActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0.01" To="0.9" Duration="0:0:0.5"/>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.EnterActions>
         <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0.9" To="0.01" Duration="0:0:0.5"/>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.ExitActions>
      </DataTrigger>
   </ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

如果您搜索有关控件模板的信息，最好查看 documentation 而不是参考源，它更易于阅读并提供一些示例。

ScrollBar 拇指上方和下方的区域是 RepeatButton。您必须使用 DecreaseRepeatButton 和 IncreaseRepeatButton 属性将它们添加到您的 Track：

<Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
   <Track.DecreaseRepeatButton>
      <RepeatButton Command="ScrollBar.PageUpCommand" />
   </Track.DecreaseRepeatButton>
   <Track.Thumb>
      <Thumb Style="{StaticResource DefaultVerticalScrollBarThumbStyle}"/>
   </Track.Thumb>
   <Track.IncreaseRepeatButton>
      <RepeatButton Command="ScrollBar.PageDownCommand" />
   </Track.IncreaseRepeatButton>
</Track>

当然，您应该设计这些按钮的样式以适合您的设计。顺便说一下，ScrollBar 上的 Up 和 Down 按钮的工作方式相同，您可以添加两个 RepeatButton s 到您的 Grid，一个在 Track 上方，一个在下方，但使用 ScrollBar.LineUpCommand 和 ScrollBar.LineDownCommand。

单击滚动条拇指上方或下方不会滚动

Clicking above or below thumb of scrollbar doesn't scroll

wpf

xaml

scrollbar

controltemplate