自定義風格的滾動查看器拖動時不滾動

Question

我不是WPF的專家，但我發現了一個OS X滾動條的在線樣式。它看起來很好，並且用鼠標滾輪以預期的方式滾動，但奇怪的是，如果用鼠標拖動滾動條，它實際上並不滾動內容，它只是移動屏幕上的條。這種風格有什麼問題？

我不會假裝我完全理解了這種風格發生的一切，但我一直在關注它的各個部分的文檔，到目前爲止，我還無法弄清楚什麼是錯誤的。

XAML：

<Style x:Key="ScrollBarTrackThumb" 
     TargetType="{x:Type Thumb}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type Thumb}"> 
          <Grid x:Name="Grid"> 
           <Rectangle HorizontalAlignment="Stretch" 
           VerticalAlignment="Stretch" 
           Width="Auto" 
           Height="Auto" 
           Fill="Transparent" /> 
           <Border x:Name="CornerScrollBarRectangle" 
          CornerRadius="5" 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Stretch" 
          Width="Auto" 
          Height="Auto" 
          Margin="0,1,0,1" 
          Background="{TemplateBinding Background}" /> 
          </Grid> 
          <ControlTemplate.Triggers> 
           <Trigger Property="Tag" 
           Value="Horizontal"> 
            <Setter TargetName="CornerScrollBarRectangle" 
           Property="Width" 
           Value="Auto" /> 
            <Setter TargetName="CornerScrollBarRectangle" 
           Property="Height" 
           Value="6" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
      <Style TargetType="{x:Type ScrollBar}" x:Key="BlackBGScrollBar"> 
       <Setter Property="Stylus.IsFlicksEnabled" 
      Value="false" /> 
       <Setter Property="Foreground" 
      Value="#ADABAB" /> 
       <Setter Property="Background" 
      Value="Transparent" /> 
       <Setter Property="Width" 
      Value="7" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type ScrollBar}"> 
          <Grid x:Name="GridRoot" 
         Width="7" 
         Background="{TemplateBinding Background}"> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="0.00001*" /> 
           </Grid.RowDefinitions> 
           <Track x:Name="PART_Track" 
          Grid.Row="0" 
          IsDirectionReversed="true" 
          Focusable="false"> 
            <Track.Thumb> 
             <Thumb x:Name="Thumb" 
            Background="{TemplateBinding Foreground}" 
            Style="{DynamicResource ScrollBarTrackThumb}" /> 
            </Track.Thumb> 
            <Track.IncreaseRepeatButton> 
             <RepeatButton x:Name="PageUp" 
              Command="ScrollBar.PageDownCommand" 
              Opacity="0" 
              Focusable="false" /> 
            </Track.IncreaseRepeatButton> 
            <Track.DecreaseRepeatButton> 
             <RepeatButton x:Name="PageDown" 
              Command="ScrollBar.PageUpCommand" 
              Opacity="0" 
              Focusable="false" /> 
            </Track.DecreaseRepeatButton> 
           </Track> 
          </Grid> 
          <ControlTemplate.Triggers> 
           <Trigger SourceName="Thumb" 
           Property="IsMouseOver" 
           Value="true"> 
            <Setter Value="{DynamicResource ButtonSelectBrush}" 
           TargetName="Thumb" 
           Property="Background" /> 
           </Trigger> 
           <Trigger SourceName="Thumb" 
           Property="IsDragging" 
           Value="true"> 
            <Setter Value="{DynamicResource DarkBrush}" 
           TargetName="Thumb" 
           Property="Background" /> 
           </Trigger> 

           <Trigger Property="IsEnabled" 
           Value="false"> 
            <Setter TargetName="Thumb" 
           Property="Visibility" 
           Value="Collapsed" /> 
           </Trigger> 
           <Trigger Property="Orientation" 
           Value="Horizontal"> 
            <Setter TargetName="GridRoot" 
           Property="LayoutTransform"> 
             <Setter.Value> 
              <RotateTransform Angle="-90" /> 
             </Setter.Value> 
            </Setter> 
            <Setter TargetName="PART_Track" 
           Property="LayoutTransform"> 
             <Setter.Value> 
              <RotateTransform Angle="-90" /> 
             </Setter.Value> 
            </Setter> 
            <Setter Property="Width" 
           Value="Auto" /> 
            <Setter Property="Height" 
           Value="8" /> 
            <Setter TargetName="Thumb" 
           Property="Tag" 
           Value="Horizontal" /> 
            <Setter TargetName="PageDown" 
           Property="Command" 
           Value="ScrollBar.PageLeftCommand" /> 
            <Setter TargetName="PageUp" 
           Property="Command" 
           Value="ScrollBar.PageRightCommand" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 

      <Style TargetType="ScrollViewer" x:Key="BlackBGScrollViewer"> 
       <Setter Property="HorizontalContentAlignment" Value="Left" /> 
       <Setter Property="VerticalContentAlignment" Value="Top" /> 
       <Setter Property="VerticalScrollBarVisibility" Value="Visible" /> 
       <Setter Property="Padding" Value="4"/> 
       <Setter Property="BorderThickness" Value="0"/> 
       <Setter Property="BorderBrush"> 
        <Setter.Value> 
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
          <GradientStop Color="#FFA3AEB9" Offset="0"/> 
          <GradientStop Color="#FF8399A9" Offset="0.375"/> 
          <GradientStop Color="#FF718597" Offset="0.375"/> 
          <GradientStop Color="#FF617584" Offset="1"/> 
         </LinearGradientBrush> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ScrollViewer"> 
          <Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
           <Grid Background="{TemplateBinding Background}"> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="*"/> 
             <RowDefinition Height="Auto"/> 
            </Grid.RowDefinitions> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="*"/> 
             <ColumnDefinition Width="Auto"/> 
            </Grid.ColumnDefinitions> 

            <ScrollContentPresenter x:Name="ScrollContentPresenter" 
                Cursor="{TemplateBinding Cursor}" 
                Margin="{TemplateBinding Padding}" 
                ContentTemplate="{TemplateBinding ContentTemplate}"/> 

            <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4"/> 

            <ScrollBar x:Name="VerticalScrollBar" Width="18" 
            IsTabStop="False" 
            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
            Grid.Column="1" Grid.Row="0" Orientation="Vertical" 
            ViewportSize="{TemplateBinding ViewportHeight}" 
            Maximum="{TemplateBinding ScrollableHeight}" 
            Minimum="0" 
            Value="{TemplateBinding VerticalOffset}" 
            Margin="0,-1,-1,-1" 
            Style="{StaticResource BlackBGScrollBar}"/> 

            <ScrollBar x:Name="HorizontalScrollBar" Height="18" 
            IsTabStop="False" 
            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
            Grid.Column="0" Grid.Row="1" Orientation="Horizontal" 
            ViewportSize="{TemplateBinding ViewportWidth}" 
            Maximum="{TemplateBinding ScrollableWidth}" 
            Minimum="0" 
            Value="{TemplateBinding HorizontalOffset}" 
            Margin="-1,0,-1,-1" 
            Style="{StaticResource BlackBGScrollBar}"/> 

           </Grid> 
          </Border> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 

Answer 1

想通了。

在ScrollViewer風格的底部，標籤需要名稱爲「PART_VerticalScrollBar」和「PART_Horizo​​ntalScrollBar」，而不僅僅是「VerticalScrollBar」和「Horizo​​ntalScrollBar」。