WPF ScrollBar风格

Question

是否可以像这张图片一样创建滚动条？

这张照片摘自以下链接：http://codesdirectory.blogspot.be/2013/01/wpf-scrollviewer-control-style.html。 我尝试在帖子中的例子，但结果是这样的：

该职位是3岁，所以这可能是正常的。

是否可以像第一张图片一样创建滚动条？我一直在寻找几个小时来找到一个模板，这是我能得到的最接近的。 我正在将Windows窗体应用程序转换为WPF，其主要原因是滚动条！ 这是从上面图片的XAML：

<Window x:Class="iBlock.MainWindow" 

     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

     Title="WPF ScrollViewer" SizeToContent="WidthAndHeight"> 

    <Window.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <ResourceDictionary Source="ScrollBar.xaml"></ResourceDictionary> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Window.Resources> 

    <Grid> 

     <ScrollViewer Background="#F7F7F7" 

         BorderBrush="#C7C7C7" 

         Height="300" 

         HorizontalScrollBarVisibility="Auto" 

         Margin="10" 

         Style="{DynamicResource ResourceKey=styleScrollViewer}" 

         VerticalScrollBarVisibility="Auto" 

         Width="400"> 

      <StackPanel Background="Red" Height="400" Width="500"></StackPanel> 

     </ScrollViewer> 

    </Grid> 

</Window> 

Answer 1

明白了一些研究与一些帮助工作：

<Window.Resources> 
     <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" /> 
     <SolidColorBrush x:Key="StandardBackgroundBrush" Color="Black" /> 
     <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" /> 
     <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" /> 
     <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" /> 
     <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" /> 
     <SolidColorBrush x:Key="NormalBrush" Color="#888" /> 
     <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" /> 
     <SolidColorBrush x:Key="HorizontalNormalBrush" Color="Black" /> 
     <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" /> 
     <LinearGradientBrush x:Key="ListBoxBackgroundBrush" 

      StartPoint="0,0" EndPoint="1,0.001"> 
      <GradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="White" Offset="0.0" /> 
        <GradientStop Color="White" Offset="0.6" /> 
        <GradientStop Color="#DDDDDD" Offset="1.2"/> 
       </GradientStopCollection> 
      </GradientBrush.GradientStops> 
     </LinearGradientBrush> 
     <LinearGradientBrush x:Key="StandardBrush" 

      StartPoint="0,0" EndPoint="0,1"> 
      <GradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="#FFF" Offset="0.0"/> 
        <GradientStop Color="#CCC" Offset="1.0"/> 
       </GradientStopCollection> 
      </GradientBrush.GradientStops> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="GlyphBrush" Color="#444" /> 
     <LinearGradientBrush x:Key="PressedBrush" 

      StartPoint="0,0" EndPoint="0,1"> 
      <GradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="#BBB" Offset="0.0"/> 
        <GradientStop Color="#EEE" Offset="0.1"/> 
        <GradientStop Color="#EEE" Offset="0.9"/> 
        <GradientStop Color="#FFF" Offset="1.0"/> 
       </GradientStopCollection> 
      </GradientBrush.GradientStops> 
     </LinearGradientBrush> 

     <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}"> 
      <Setter Property="Visibility" Value="Hidden"/> 
      <Setter Property="SnapsToDevicePixels" Value="True"/> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="Focusable" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type RepeatButton}"> 
         <Border 
      Name="Border" 

      Margin="1" 

      CornerRadius="2" 

      Background="{StaticResource NormalBrush}" 
      BorderBrush="{StaticResource NormalBorderBrush}" 
      BorderThickness="1"> 
          <Path 
      HorizontalAlignment="Center" 

      VerticalAlignment="Center" 

      Fill="{StaticResource GlyphBrush}" 
      Data="{Binding Path=Content, 

       RelativeSource={RelativeSource TemplatedParent}}" /> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsPressed" Value="true"> 
           <Setter TargetName="Border" Property="Background" 

           Value="{StaticResource PressedBrush}" /> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Foreground" 

           Value="{StaticResource DisabledForegroundBrush}"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 
      <Setter Property="Visibility" Value="Hidden"/> 
      <Setter Property="SnapsToDevicePixels" Value="True"/> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="IsTabStop" Value="false"/> 
      <Setter Property="Focusable" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type RepeatButton}"> 
         <Border Background="Black" /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 
      <Setter Property="SnapsToDevicePixels" Value="True"/> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="IsTabStop" Value="false"/> 
      <Setter Property="Focusable" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Thumb}"> 
         <Border 
      CornerRadius="2" 

      Background="{TemplateBinding Background}" 
      BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="0" 
          Width="8" 
          Margin="8,0,-2,0"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <ControlTemplate x:Key="VerticalScrollBar" 

      TargetType="{x:Type ScrollBar}"> 
      <Grid > 
       <Grid.RowDefinitions> 
        <RowDefinition MaxHeight="0"/> 
        <RowDefinition Height="0.00001*"/> 
        <RowDefinition MaxHeight="0"/> 
       </Grid.RowDefinitions> 
       <Border 
     Grid.RowSpan="3" 

     CornerRadius="2" 

     Background="Transparent" /> 
       <RepeatButton 
     Grid.Row="0" 

     Style="{StaticResource ScrollBarLineButton}" 
     Height="18" 

     Command="ScrollBar.LineUpCommand" 

     Content="M 0 4 L 8 4 L 4 0 Z" /> 
       <Track 
     Name="PART_Track" 

     Grid.Row="1" 

     IsDirectionReversed="true"> 
        <Track.DecreaseRepeatButton> 
         <RepeatButton 
      Style="{StaticResource ScrollBarPageButton}" 
      Command="ScrollBar.PageUpCommand" /> 
        </Track.DecreaseRepeatButton> 
        <Track.Thumb> 
         <Thumb 
      Style="{StaticResource ScrollBarThumb}" 
      Margin="1,0,1,0" 

      Background="{StaticResource HorizontalNormalBrush}" 
      BorderBrush="{StaticResource HorizontalNormalBorderBrush}" /> 
        </Track.Thumb> 
        <Track.IncreaseRepeatButton> 
         <RepeatButton 
      Style="{StaticResource ScrollBarPageButton}" 
      Command="ScrollBar.PageDownCommand" /> 
        </Track.IncreaseRepeatButton> 
       </Track> 
       <RepeatButton 
     Grid.Row="3" 

     Style="{StaticResource ScrollBarLineButton}" 
     Height="18" 

     Command="ScrollBar.LineDownCommand" 

     Content="M 0 0 L 4 4 L 8 0 Z"/> 
      </Grid> 
     </ControlTemplate> 
     <ControlTemplate x:Key="HorizontalScrollBar" 

      TargetType="{x:Type ScrollBar}"> 
      <Grid > 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition MaxWidth="18"/> 
        <ColumnDefinition Width="0.00001*"/> 
        <ColumnDefinition MaxWidth="18"/> 
       </Grid.ColumnDefinitions> 
       <Border 
     Grid.ColumnSpan="3" 

     CornerRadius="2" 

     Background="#F0F0F0" /> 
       <RepeatButton 
     Grid.Column="0" 

     Style="{StaticResource ScrollBarLineButton}" 
     Width="18" 

     Command="ScrollBar.LineLeftCommand" 

     Content="M 4 0 L 4 8 L 0 4 Z" /> 
       <Track 
     Name="PART_Track" 

     Grid.Column="1" 

     IsDirectionReversed="False"> 
        <Track.DecreaseRepeatButton> 
         <RepeatButton 
      Style="{StaticResource ScrollBarPageButton}" 
      Command="ScrollBar.PageLeftCommand" /> 
        </Track.DecreaseRepeatButton> 
        <Track.Thumb> 
         <Thumb 
      Style="{StaticResource ScrollBarThumb}" 
      Margin="0,1,0,1" 

      Background="{StaticResource NormalBrush}" 
      BorderBrush="{StaticResource NormalBorderBrush}" /> 
        </Track.Thumb> 
        <Track.IncreaseRepeatButton> 
         <RepeatButton 
      Style="{StaticResource ScrollBarPageButton}" 
      Command="ScrollBar.PageRightCommand" /> 
        </Track.IncreaseRepeatButton> 
       </Track> 
       <RepeatButton 
     Grid.Column="3" 

     Style="{StaticResource ScrollBarLineButton}" 
     Width="18" 

     Command="ScrollBar.LineRightCommand" 

     Content="M 0 0 L 4 4 L 0 8 Z"/> 
      </Grid> 
     </ControlTemplate> 
     <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}"> 
      <Setter Property="SnapsToDevicePixels" Value="True"/> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Style.Triggers> 
       <Trigger Property="Orientation" Value="Horizontal"> 
        <Setter Property="Width" Value="Auto"/> 
        <Setter Property="Height" Value="18" /> 
        <Setter Property="Template" 

         Value="{StaticResource HorizontalScrollBar}" /> 
       </Trigger> 
       <Trigger Property="Orientation" Value="Vertical"> 
        <Setter Property="Width" Value="18"/> 
        <Setter Property="Height" Value="Auto" /> 
        <Setter Property="Template" 

         Value="{StaticResource VerticalScrollBar}" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 

     <Style x:Key="FavsScrollViewer" TargetType="{x:Type ScrollViewer}"> 
      <Setter Property="OverridesDefaultStyle" Value="True"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ScrollViewer}"> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 

          <ScrollContentPresenter Grid.Column="1"/> 

          <ScrollBar Name="PART_VerticalScrollBar" 

      Value="{TemplateBinding VerticalOffset}" 
      Maximum="{TemplateBinding ScrollableHeight}" 
      ViewportSize="{TemplateBinding ViewportHeight}" 
      Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/> 
          <ScrollBar Name="PART_HorizontalScrollBar" 

      Orientation="Horizontal" 

      Grid.Row="1" 

      Grid.Column="1" 

      Value="{TemplateBinding HorizontalOffset}" 
      Maximum="{TemplateBinding ScrollableWidth}" 
      ViewportSize="{TemplateBinding ViewportWidth}" 
      Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/> 

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

    </Window.Resources>