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>

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