先看一下效果:

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

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

两端的箭头按钮,实际类型为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. 大数A-B

    还没写过大数减法,今天比赛还WA了两次... #include<iostream> #include<string> using namespace std; void sub ...

  2. STM32F072B-DISCO 深入研究 USB系统

    调试USB例题需要用到2个上位机程序: PC端HID交互程序,提供了VC源程序. 图形方式的按钮输入.LED输出操作: 总线扑捉器: main程序初始化部分很简单: /* Initialize USB ...

  3. ubuntu 桌面

    u盘虚拟光驱打开.ios,读写到u盘 goagent:wine goagent.exe的路径:右键在终端中运行proxy.py. 终端中wine exe文件 ubuntu安装镜像文件: 下载压缩包解压 ...

  4. 排序之直接插入排序(Straight Insertion Sort)

    一.直接插入排序(Straight Insertion Sort) 排序的过程如下:给定无需序列:(3,6,9,7,1,8,2,4) ① 3,6,9,7,1,8,2,4 (将6插入到有序序列3中) ② ...

  5. openStack opts

  6. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  7. 用函数生成select选择框

    // 生成 html select option 标签 function build_options($options, $opt='',$k='') { $frags = array(); if ( ...

  8. 【Android - 框架】之XBanner的使用

    一.XBanner简介 XBanner是一个非常优秀的无限自动轮播框架,也是一个控件.这里是XBanner的GitHub地址 XBanner的主要功能如下: 根据传入的数据条数自动调整广告页数 当图片 ...

  9. WCF服务部署到IIS上,然后通过web服务引用方式出现错误的解决办法

    本文转载:http://www.cnblogs.com/shenba/archive/2012/01/06/2313932.html 昨天在用IIS部署一个WCF服务时,碰到了如下错误: 理解了文档内 ...

  10. All About JAVA Maven的安装

    一转眼几个月过去了..真是忙碌的几个月,最近在弄CAS 身份认证系统,新版本的CAS需要使用Maven进行构建,所以还要研究下Maven相关的资料.第一步就是下载安装Maven.根据官方网站的文档很容 ...