先看一下效果：

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

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

两端的箭头按钮，实际类型为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. （转载）mysql中limit用法

    (转载)http://hi.baidu.com/sppeivan/item/e45179375d6778c62f8ec221   mysql中limit用法 使用查询语句的时候,经常要返回前几条或者中 ...

  2. 数据结构（分块）：[HZOI 2015]easy seq

    [题目描述] 给定一个序列,下标从0开始,分别为a0,a1,a2...an−1,有m个询问,每次给出l和r,求满足ai=aj且l<=i<=j<=r时j−i的最大值 本题强制在线,l和 ...

  3. HDU 5924 Mr. Frog’s Problem 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)

    Mr. Frog's Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  4. js弹框处理

    # -*- coding:utf-8 -*- """ js弹框处理 """ from selenium import webdriver d ...

  5. 关于将客户端移植到Lua的解决方案设想。

    现在发行商都需要cp们做热更新,而对于unity制作的游戏来讲,这个恐怕是个噩梦,而项目已经进行到中后期,确实很麻烦,有UniLua,但是如果全部手动解决恐怕上不了线了工作量太大,初步设想如果做一个基 ...

  6. poj 2068 Nim（博弈树）

    Nim Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 1501   Accepted: 845 Description Le ...

  7. cas 单点登录配置

    服务端配置 cas是个好东西,很灵活很好用,但是配置起来很麻烦 cas官方网站 http://downloads.jasig.org/ 下载服务端 CAS Server 3.3.3 Final 1.将 ...

  8. winform datagridview如何获取索引 分类： DataGridView 2014-04-11 13:42 216人阅读 评论(0) 收藏

    datagridview.CurrentCell.RowIndex;            是当前活动的单元格的行的索引 datagridview.SelectedRows  ;           ...

  9. POJ 1737 统计有n个顶点的连通图有多少个 （带标号）

    设f(n)为所求答案 g(n)为n个顶点的非联通图 则f(n) + g(n) = h(n) = 2^(n * (n - 1) / 2) 其中h(n)是n个顶点的联图的个数 这样计算 先考虑1所在的连通 ...

  10. 怎样在delphi中实现控件的拖拽

    下面这2种方法都能实现对控件和窗体的拖拽 方法1 procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift ...