一、滚动条基本样式

本次修改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. SQL Server将自己的查询结果作为待查询数据子列之二

    嵌套子查询是SQL语句中比较常用的一种查询方法,开发过程中遇到查询需要将自己的某列作为待查询的数据,在参考别人的SQL语句的写法终于实现了自己需要的功能. 不太和谐查询语句如下: SELECT DIS ...

  2. Angular4---认证---使用HttpClient拦截器，解决循环依赖引用的问题

    在angular4 项目中,每次请求服务端需要添加头部信息AccessToken作为认证的凭据.但如果在每次调用服务端就要写代码添加一个头部信息,会变得很麻烦.可以使用angular4的HttpCli ...

  3. IM-iOS退出后台接受消息，app退出后台能接收到推送

    App被失活状态的时候可以走苹果的APNS:但是在活跃的时候却接受不到推送! 那就用到本地推送:UILocalNotification 消息神器. 处理不好可能会有很多本地推送到来,那么问题来了要在什 ...

  4. Django数据模型——通用字段选项

    字段 一个模型最重要也是唯一必需的部分,是它定义的数据库字段 字段名称限制 1.字段名不能是python保留字,这样会导致python语法错误 2.字段不能包含连续一个以上的下划线,这样会和Djang ...

  5. 理解C语言中几个常见修饰符

    写在前面 今天下午一个同事问「register」关键字是什么作用?噢,你说的是「register」啊,它的作用是……脑袋突然断片儿,我擦,啥意思来着,这么熟悉的陌生感.做C语言开发时间也不短了,不过好 ...

  6. server.xml 解析

    server.xml的结构: 常用配置的参数注释: <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apach ...

  7. 基于 CDH 构建推荐系统

    我理解的推荐系统本质是一种排序方式.排序的规则是按照我们预测的用户喜好程度的一个排序的列表,而如何定义用户的喜好程度是推荐系统要解决的核心问题.机器学习的算法只是推荐系统的一部分.构建一个完整的推荐系 ...

  8. 51ak带你看MYSQL5.7源码3：修改代码实现你的第一个Mysql版本

    从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...

  9. windows下安装Virtualenvwrapper

    windows下安装Virtualenvwrapper 我们可以使用Virtualenvwrapper来方便地管理python虚拟环境,但是在windows上安装的时候.....直接 install  ...

  10. reinterpret_cast，static_cast, dynamic_cast，const_cast的运用分析

    reinterpret_cast(重新解释类型转换) reinterpret_cast 最famous的特性就是什么都可以,转换任意的类型,包括C++所有通用类型,所以也最不安全 应用 整形和指针之间 ...