单击滚动条的上方或下方不会滚动

问题描述

在默认的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>

解决方法

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

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

<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 按钮的工作方式相同，您可以在{{1 }}，在RepeatButton上方，在下面，但使用Grid和Track。