在C# WPF下自定义滚动条ScrollViewer样式的操作

一、实现对ScrollViewer样式的自定义主要包括：

1、滚动条宽度设置

2、滚动条颜色

3、滚动条圆角

4、滚动条拉动时的效果mouseover

二、实现效果：

三、实现方法

1、创建资源字典（ ResourceDictionary）文件

由于style代码比较多，之间在控件文件中加载style比较混乱，也不利于其它窗口复用，这里单独创建了ScrollViewDictionary.xaml文件代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <ControlTemplate x:Key="MyScrollViewer" TargetType="{x:Type ScrollViewer}">
   <!--View区域背景色-->
   <Grid x:Name="Grid" Background="{TemplateBinding Background}">
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
       <RowDefinition Height="*"/>
       <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/>
     <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
     <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
     <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource MyScrollBarStyle}"/>
   </Grid>
 </ControlTemplate>

<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>

<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
   <Setter Property="OverridesDefaultStyle" Value="true"/>
   <Setter Property="Background" Value="Transparent"/>
   <Setter Property="Focusable" Value="false"/>
   <Setter Property="IsTabStop" Value="false"/>
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type RepeatButton}">
         <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>
 <!--滚动条颜色、圆角等设置-->
 <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
   <Setter Property="OverridesDefaultStyle" Value="true"/>
   <Setter Property="IsTabStop" Value="false"/>
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type Thumb}">
         <!--滚动条颜色和圆角设置-->
         <Rectangle Name="thumbRect" Fill="#03ffea" RadiusX="3" RadiusY="3"/>
         <!--鼠标拉动滚动条时的颜色-->
         <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
             <Setter Property="Fill" Value="CornflowerBlue" TargetName="thumbRect" />
           </Trigger>
         </ControlTemplate.Triggers>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>
 <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
   <Setter Property="OverridesDefaultStyle" Value="true"/>
   <Setter Property="Background" Value="Transparent"/>
   <Setter Property="Focusable" Value="false"/>
   <Setter Property="IsTabStop" Value="false"/>
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type RepeatButton}">
         <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>
 <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
   <Setter Property="Background" Value="AliceBlue"/>
   <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
   <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<!--滚动条宽度-->
   <Setter Property="Width" Value="8"/>
   <Setter Property="MinWidth" Value="6"/>
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type ScrollBar}">
         <!--滚动条背景色-->
         <Grid x:Name="Bg" Background="#001f55" SnapsToDevicePixels="true" Width="8">
           <Grid.RowDefinitions>
             <RowDefinition />
           </Grid.RowDefinitions>
           <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
             <Track.DecreaseRepeatButton>
               <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
             </Track.DecreaseRepeatButton>
             <Track.IncreaseRepeatButton>
               <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
             </Track.IncreaseRepeatButton>
             <Track.Thumb>
               <Thumb Style="{StaticResource ScrollBarThumb}"/>
             </Track.Thumb>
           </Track>
         </Grid>
         <ControlTemplate.Triggers>
           <Trigger Property="IsEnabled" Value="false">
             <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
           </Trigger>
         </ControlTemplate.Triggers>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
   <Style.Triggers>
     <Trigger Property="Orientation" Value="Horizontal">
       <Setter Property="Width" Value="Auto"/>
       <Setter Property="MinWidth" Value="0"/>
       <Setter Property="Height" Value="6"/>
       <Setter Property="MinHeight" Value="6"/>
       <Setter Property="Background" Value="AliceBlue"/>
       <Setter Property="Template">
         <Setter.Value>
           <ControlTemplate TargetType="{x:Type ScrollBar}">
             <Grid x:Name="Bg" Background="Red" SnapsToDevicePixels="true">
               <Grid.ColumnDefinitions>
                 <ColumnDefinition />
               </Grid.ColumnDefinitions>
               <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
                 <Track.DecreaseRepeatButton>
                   <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                 </Track.DecreaseRepeatButton>
                 <Track.IncreaseRepeatButton>
                   <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                 </Track.IncreaseRepeatButton>
                 <Track.Thumb>
                   <Thumb Style="{StaticResource ScrollBarThumb}" />
                 </Track.Thumb>
               </Track>
             </Grid>
             <ControlTemplate.Triggers>
               <Trigger Property="IsEnabled" Value="false">
                 <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
               </Trigger>
             </ControlTemplate.Triggers>
           </ControlTemplate>
         </Setter.Value>
       </Setter>
     </Trigger>
   </Style.Triggers>
 </Style>
</ResourceDictionary>

2、在窗口中引用资源字典

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

3、scrollViewer中使用新样式

<ScrollViewer Template="{StaticResource MyScrollViewer}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="350" Width="250">
     <StackPanel Orientation="Vertical" Name="layerList" ScrollViewer.VerticalScrollBarVisibility="Visible" Width="250" >
     </StackPanel>
   </ScrollViewer>

自定义完成，以上是所有步骤和代码，可以根据自己程序的整体设计来更改颜色、宽度、圆角等效果。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。如有错误或未考虑完全的地方，望不吝赐教。

来源：https://blog.csdn.net/mpegfour/article/details/78877654