先看一下效果：

先分析一下滚动条有哪儿几部分组成：

滚动条总共有五部分组成：

两端的箭头按钮，实际类型为RepeatButton

Thumb 两端的空白，实际也是RepeatButton

最后就是Thumb(滑块)

所以如果要修改滚动条的样式，就要修改这五部分的样式。具体代码如下：

<!--自定义滚动条样式-->
            <SolidColorBrush x:Key="StandardBorderBrush"
                             Color="#888" />
             
            <SolidColorBrush x:Key="StandardBackgroundBrush"
                             Color="#FFF" />
             
            <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="#888" />
             
            <SolidColorBrush x:Key="HorizontalNormalBorderBrush"
                             Color="#888" />

<SolidColorBrush x:Key="GlyphBrush"
                             Color="#444" />

<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>
             
           <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="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="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="Transparent" />
                        </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="1" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

<ControlTemplate x:Key="VerticalScrollBar"
                             TargetType="{x:Type ScrollBar}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition MaxHeight="18" />
                        <RowDefinition Height="0.00001*" />
                        <RowDefinition MaxHeight="18" />
                    </Grid.RowDefinitions>
                    <Border Grid.RowSpan="3"
                            CornerRadius="2"
                            Background="#F0F0F0" />
                    <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="30" />
                        <ColumnDefinition Width="0.00001*" />
                        <ColumnDefinition MaxWidth="30" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.ColumnSpan="3"
                            CornerRadius="5"
                            Background="#CCCCCC" />
                    <RepeatButton Grid.Column="0"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Width="18"
                                 
                                  Command="ScrollBar.LineLeftCommand"
                                  Content="M 4 0 L 4 8 L 0 4 Z"  Margin="10,0,2,0"/>
                               
                    <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"
                                  Margin="2,0,10,0"
                                  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>

XAML中代码为：

<ScrollViewer  Grid.Row="1"
                           RenderTransformOrigin="0.5,0.5"
                           HorizontalAlignment="Stretch"
                           Margin="0"
                           Width="Auto"
                           HorizontalScrollBarVisibility="Visible"
                           Style="{StaticResource FavsScrollViewer}"
                           Focusable="True"
                           VerticalScrollBarVisibility="Disabled"
                         >
                <WrapPanel x:Name="contentPanel"
                           Orientation="Vertical"
                           ></WrapPanel>
            </ScrollViewer>

因样式代码较多，建议先复制到项目中看一下效果，在根据滚动条的五部分内容分别研究相应的样式，本人也是知道一点总结一点，如果您有不同的简介，很高兴能和你讨论，能和大家共同进步。

WPF 自定义滚动条样式的更多相关文章

  1. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  2. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  3. WPF自定义Window样式（2）

    1. 引言 在上一篇中,介绍了如何建立自定义窗体.接下来,我们需要考虑将该自定义窗体基类放到类库中去,只有放到类库中,我们才能在其他地方去方便的引用该基类. 2. 创建类库 接上一篇的项目,先添加一个 ...

  4. WPF自定义Window样式（1）

    1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...

  5. 自定义滚动条样式-transition无效

    问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...

  6. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  7. WPF 自定义ComboBox样式，自定义多选控件

    原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...

  8. WPF 自定义MenuItem样式

    原文:WPF 自定义MenuItem样式 一.前言 默认的MenuItem样式比较普通,这次自定义MenuItem的样式也只是对MenuItem的颜色风格进行变化.需要其他功能的变化,大家可以根据样式 ...

  9. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

随机推荐

  1. android屏幕适配详解

    android屏幕适配详解 官方地址:http://developer.android.com/guide/practices/screens_support.html 一.关于布局适配建议 1.不要 ...

  2. java桌面项目打包_by icewee_写得太棒了，直接转载了

    前言: 我们都知道Java可以将二进制程序打包成可执行jar文件,双击这个jar和双击exe效果是一样一样的,但感觉还是不同.其实将java程序打包成exe也需要这个可执行jar文件. 准备: ecl ...

  3. 【转】[WCF REST] 帮助页面与自动消息格式(JSON/XML)选择

    可以说WebHttpBinding和WebHttpBehavior是整个Web HTTP编程模型最为核心的两个类型,前者主要解决消息编码问题,而余下的工作基本上落在了终结点行为WebHttpBehav ...

  4. 【狼】openGL 光照的学习

    小狼学习原创,欢迎批评指正 http://www.cnblogs.com/zhanlang96/p/3859439.html 先上代码 #include "stdafx.h" #i ...

  5. Hibernate（十）多对多单向关联映射

    上一篇文章Hibernate从入门到精通(九)一对多双向关联映射中我们讲解了一下关于一对多关联映射的 相关内容,这次我们继续多对多单向关联映射. 多对多单向关联映射 在讲解多对多单向关联映 射之前,首 ...

  6. Ado Recordset.open

    Recordset.open Recordset 对象的 Open 方法 允许用户向数据库发出请求,通过是运行一个 SQL命令.启动一个指定的数据表或调用一个指定的 Stored Procedure ...

  7. if form1.showmodal:=mrok then 什么意思

    if form1.showmodal:=mrok then 这句话什么意思? 最佳答案 这个问题说来话长,且听我慢慢道来... 首先,你仔细看一看,所有的命令按钮(不论是Button还是BitBtn) ...

  8. spring maven pom

    https://spring.io/blog/2009/12/02/obtaining-spring-3-artifacts-with-maven/

  9. codeforces 337D Book of Evil (树形dp)

    题目链接:http://codeforces.com/problemset/problem/337/D 参考博客:http://www.cnblogs.com/chanme/p/3265913 题目大 ...

  10. 细谈Java

    重载:相同函数名,不同参数. 重写(覆写):父类和子类之间的,子类重写了父类的方法. java的多态:重载+覆写 1.      Main方法: 是public的,也是static,也是void的,参 ...