先看一下效果：

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

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

两端的箭头按钮，实际类型为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入门-Service-start,end,bind,unbind之间的区别

    写贴一段别人关于service中start与bind,end与unbind的分析了: Service创建有两种方法:  startService或者bindService 服务不能自己运行,需要通过调 ...

  2. MSbuild 教程

    在.Net framework中,一个不太被大家熟知的工具就是MSBuild.这个命令行工具通过执行XML脚本可以自动生成软件工程文件. 但问题来了,“我为什么想要我的生成过程自动化?”. 其实,大部 ...

  3. Selenium 脚本稳定性问题

    运行一个星期前升至更久前的脚本,,,出现如下错误提示 elementNotVisibleException was unhandled by user code. 经过询问大侠,说我的脚本不够健全,也 ...

  4. Bzoj 2186: [Sdoi2008]沙拉公主的困惑 乘法逆元,线性筛,欧拉函数,数论

    2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2560  Solved: 857[Submit][St ...

  5. git submodule的操作

    对于有submodule的库,检出的方法是: git clone https://github.com/BelledonneCommunications/linphone-android.git -- ...

  6. 爬虫技术浅析 | z7y Blog

    爬虫技术浅析 | z7y Blog 爬虫技术浅析

  7. Oracle 监控索引使用

    Oracle提供一个监控索引的方法,来确定索引是否被使用.如果索引没有被使用,就可以删除它们以减少不必要的语句的开销.因为表上的大量不必要的索引可能会降低DML语句的性能,给数据库性能产生压力.所以生 ...

  8. [置顶] Java启动命令大观

    Java启动命令是所有java应用程序的入口,通过它来启动Java运行时环境,并加载相关的class.不过由于IDE的盛行,我们Java程序员中的大多数的并不是非常的了解Java启动命令.本文希望做一 ...

  9. java实现链表结构

    1. 定义节点node public class Node<T> { private Node<T> pre; private Node<T> next; priv ...

  10. winform 窗体关闭按钮禁用、不显示最大化、最小化、关闭按钮 分类： WinForm 2014-12-22 16:09 82人阅读 评论(0) 收藏

    关闭按钮禁用: (1) FormClosing事件 private void Main_FormClosing(object sender, FormClosingEventArgs e) {     ...