一、滚动条基本样式

本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。

style样式如下：

<!-- ScrollViewer 滚动条 -->

    <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}">

                    <Grid>

                        <!--滚动条颜色-->

                        <Border Background="#646465" CornerRadius="3"/>

                    </Grid>

                </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="Opacity" Value="0.2"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <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="Opacity" Value="0.2"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!--滚动条上下按钮-->

    <Style x:Key="VerticalScrollBarPageButton2" 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="Opacity"  Value="0"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Rectangle Fill="#90000000" Width="0" Height="0"/>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="for_scrollbar" TargetType="{x:Type ScrollBar}">

        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>

        <Setter Property="Background" Value="Transparent"/>

        <Setter Property="Margin" Value="0,1,1,6"/>

        <Setter Property="Width"  Value="10"/>

        <Setter Property="MinWidth"  Value="5"/>

        <Setter Property="Opacity"   Value="0.2"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ScrollBar}">

                    <Grid x:Name="Bg" SnapsToDevicePixels="true">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="auto"></RowDefinition>

                            <RowDefinition Height="*"></RowDefinition>

                            <RowDefinition Height="auto"></RowDefinition>

                        </Grid.RowDefinitions>

                        <RepeatButton  Grid.Row="0" Style="{StaticResource VerticalScrollBarPageButton2}" Command="{x:Static ScrollBar.PageUpCommand}"/>

                        <Track x:Name="PART_Track"   Grid.Row="1" IsEnabled="{TemplateBinding IsMouseOver}" IsDirectionReversed="true">

                            <Track.DecreaseRepeatButton>

                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>

                            </Track.DecreaseRepeatButton>

                            <Track.IncreaseRepeatButton>

                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>

                            </Track.IncreaseRepeatButton>

                            <Track.Thumb>

                                <Thumb Style="{StaticResource ScrollBarThumb}"/>

                            </Track.Thumb>

                        </Track>

                        <RepeatButton Grid.Row="2" Style="{StaticResource VerticalScrollBarPageButton2}" Command="{x:Static ScrollBar.PageDownCommand}"/>

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

        <Style.Triggers>

            <Trigger Property="Orientation" Value="Horizontal">

                <Setter Property="Background"  Value="Transparent"/>

                <Setter Property="Margin" Value="1,0,6,1"/>

                <Setter Property="Height"   Value="5"/>

                <Setter Property="MinHeight"  Value="5"/>

                <Setter Property="Width"    Value="Auto"/>

                <Setter Property="Opacity" Value="0.2"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type ScrollBar}">

                            <Grid x:Name="Bg" SnapsToDevicePixels="true">

                                <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">

                                    <Track.DecreaseRepeatButton>

                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  Command="{x:Static ScrollBar.PageLeftCommand}"/>

                                    </Track.DecreaseRepeatButton>

                                    <Track.IncreaseRepeatButton>

                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  Command="{x:Static ScrollBar.PageRightCommand}"/>

                                    </Track.IncreaseRepeatButton>

                                    <Track.Thumb>

                                        <Thumb Style="{StaticResource ScrollBarThumb}"/>

                                    </Track.Thumb>

                                </Track>

                            </Grid>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Trigger>

        </Style.Triggers>

    </Style>

    <Style x:Key="for_scrollviewer"

           TargetType="{x:Type ScrollViewer}">

        <Setter Property="BorderBrush" Value="LightGray"/>

        <Setter Property="BorderThickness" Value="0"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ScrollViewer}">

                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">

                        <Grid Background="{TemplateBinding Background}">

                            <ScrollContentPresenter  Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" ContentTemplate="{TemplateBinding ContentTemplate}"/>

                            <ScrollBar x:Name="PART_VerticalScrollBar"

                                       HorizontalAlignment="Right"

                                       Maximum="{TemplateBinding ScrollableHeight}"

                                       Orientation="Vertical"

                                       Style="{StaticResource for_scrollbar}"

                                       ViewportSize="{TemplateBinding ViewportHeight}"

                                       Value="{TemplateBinding VerticalOffset}"

                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

                            <ScrollBar x:Name="PART_HorizontalScrollBar"

                                       Maximum="{TemplateBinding ScrollableWidth}"

                                       Orientation="Horizontal"

                                       Style="{StaticResource for_scrollbar}"

                                       VerticalAlignment="Bottom"

                                       Value="{TemplateBinding HorizontalOffset}"

                                       ViewportSize="{TemplateBinding ViewportWidth}"

                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                        </Grid>

                    </Border>

                    <ControlTemplate.Triggers>

                        <EventTrigger RoutedEvent="ScrollChanged" >

                            <BeginStoryboard>

                                <Storyboard>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_VerticalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.8"

                                        Duration="0:0:1"/>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_VerticalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.2"

                                        Duration="0:0:1"

                                        BeginTime="0:0:1"/>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_HorizontalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.8"

                                        Duration="0:0:1"/>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_HorizontalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.2"

                                        Duration="0:0:1"

                                        BeginTime="0:0:1"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseEnter"

                                      SourceName="PART_VerticalScrollBar">

                            <BeginStoryboard>

                                <Storyboard>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_VerticalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.8"

                                        Duration="0:0:0.7"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseLeave"

                                      SourceName="PART_VerticalScrollBar">

                            <BeginStoryboard>

                                <Storyboard>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_VerticalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.2"

                                        Duration="0:0:0.7"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseEnter"

                                      SourceName="PART_HorizontalScrollBar">

                            <BeginStoryboard>

                                <Storyboard>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_HorizontalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.8"

                                        Duration="0:0:0.7"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseLeave"

                                      SourceName="PART_HorizontalScrollBar">

                            <BeginStoryboard>

                                <Storyboard>

                                    <DoubleAnimation

                                        Storyboard.TargetName="PART_HorizontalScrollBar"

                                        Storyboard.TargetProperty="Opacity"

                                        To="0.2"

                                        Duration="0:0:0.7"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!--默认ScrollBar-->

    <Style TargetType="ScrollBar" BasedOn="{StaticResource for_scrollbar}"/>

    <!--默认ScrollView-->

    <Style TargetType="ScrollViewer" BasedOn="{StaticResource for_scrollviewer}"/>

修改之后的滚动条是影响全局的。

样式应用之后的效果如下：

引用示例：

<ScrollViewer Margin="10" Height="200" Width="100" BorderBrush="Gray" BorderThickness="1">

        <StackPanel Orientation="Vertical">

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

              <TextBlock Text="测试一"/>

         </StackPanel>

 </ScrollViewer>

所有代码已经上传到github：https://github.com/cmfGit/WpfDemo.git

WPF 自定义滚动条（ScrollView、ScrollBar）样式的更多相关文章

  1. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  2. 自定义滚动条(Custom ScrollBar)

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  3. WPF自定义分页控件,样式自定义,简单易用

    WPF自定义分页控件 做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...

  4. WPF 自定义DataGrid控件样式

    内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html 一.DataGrid基本样式(一) 小刚已经把Dat ...

  5. wpf 自定义RadioButton控件样式

    实现的效果为: 我感觉来自定义RadioButton样式和定义button空间的样式差不多,只是类型不同而已. 接下来分析一下样式代码: <!--自定义单选按钮样式-->        & ...

  6. WPF 自定义TabControl控件样式

    一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabContr ...

  7. WPF自定义漂亮的按钮样式

    首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮: 然后给各个按钮设置不同的背景颜色: 设置好之后就是这样啦: 然后我们就开始在 App. ...

  8. WPF自定义滚动条

    我修改了一些地方,部分代码参考了博主 https://www.cnblogs.com/xiaomingg/ <!-- ScrollViewer 滚动条 --> <Style x:Ke ...

  9. WPF 自定义TreeView控件样式，仿QQ联系人列表

    一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...

随机推荐

  1. 为 Debian 8 或 Debian 9（64 位）安装 .NET Core

    在 Debian 8 或 Debian 9(64 位)上安装 .NET Core 的具体步骤: 备注:必须有用户控制目录,才能通过 tar.gz 在 Linux 系统上进行安装. 1.准备一台刚安装的 ...

  2. kali linux安装搜狗输入法的方法

    kali linux安装搜狗输入法比较麻烦,因为有很多依赖项,不过安装好就很好用,觉得麻烦的一般安装ibus,经典,也常更新. 下面就说说怎么安装搜狗输入法: 先去http://http.kali.o ...

  3. 【Unity3D与23种设计模式】建造者模式（Builder）

    GoF中定义: "将一个复杂的构建流程与它的对象表现分离出来,让相同的构建流程可以产生不同的对象行为表现." 建造者模式可以分为两个步骤来实施: 1.将复杂的构建流程独立出来,并将 ...

  4. Canvas 画布组件（官网翻译）

    Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object w ...

  5. Mac安装pycharm 的下载链接和破解方法

     PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制 ...

  6. 【redis源码阅读】redis对象

    结构定义 在redis中,对象的数据结构定义如下: ​typedef struct redisObject { ​unsigned type:4; ​unsgined encoding:4; ​uns ...

  7. C语言第五次博客作业--函数

    一.PTA实验作业 题目1:使用函数判断完全平方数 1. 本题PTA提交列表 2. 设计思路 3.本题调试过程碰到问题及PTA提交列表情况说明. 部分正确 :将else的情况放入for循环内,导致循环 ...

  8. echarts地图的引用

    最近是跟echarts杠上了 所在公司是搞数据的 所以身为前端的我 就必须使用echarts将数据展示出来 ,进公司一周 ,前前后后大概用了八九种echarts图,我举得最难的就是引用的地图,因为刚开 ...

  9. Linux下的进程与线程（一）—— 进程概览

    进程是操作系统分配资源的基本单位.线程是操作系统进行运行和调度的基本单位. 进程之间可以切换,以便轮流占用CPU,实现并发.一般进程运行在用户模式下,只能执行指令集中的部分指令. 当进程进行上下文切换 ...

  10. 面试常考---html篇

    1.html5新特性,语义化 HTML5为我们提供了一系列的语义标签. 1.<section></section> 定义文档中的主体部分的节.段. 2.<article& ...