一、滚动条基本样式

本次修改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. java设计模式-----14、桥接模式

    Bridge 模式又叫做桥接模式,是构造型的设计模式之一.Bridge模式基于类的最小设计原则,通过使用封装,聚合以及继承等行为来让不同的类承担不同的责任.它的主要特点是把抽象(abstraction ...

  2. 属性动画 ValueAnimator 运行原理全解析

    最近下班时间都用来健身还有看书了,博客被晾了一段时间了,原谅我~~~~ 提问环节 好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行 ...

  3. 腾讯企业邮箱又一次隐藏了qq邮件列表的入口

    今天登陆腾讯企业邮箱,发现腾讯企业邮箱又一次隐藏了qq邮件列表的入口,很不方便操作, 我们切换到工具箱选项,然后随便点击里面的一个工具,比如:企业网盘,然后看浏览器地址栏的地址如下:http://ex ...

  4. 自定义MVC框架---第一章

    MVC基本介绍 介绍:  mvc是一种编程思想,用来解决开发项目的时候,代码如何编写,项目如何架构的问题,更具体一点就是解决多人协同开发时,如何分工协作的问题,从而提升开发效率 举一个例子:有一个人想 ...

  5. 可能是最好的SQL入门教程

    个人博客:这可能是最好的SQL入门教程

  6. Docker + webpack 打包前端项目

    码云代码地址: https://gitee.com/caonimashi/docker_deployment_front_end    构建基础镜像: 1.下载一个 Apline Linux 操作系统 ...

  7. jQuery中ajax方法无法执行回调函数问题

    最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...

  8. Myeclipse快速补充返回值快捷键

    比如 image.getGraphics(); 按ALT+Shift+L键,弹出一个确认变量名称框,确认之后会补全语句Graphics graphics = image.getGraphics();

  9. PO BO VO DTO POJO DAO DO

    PO BO DTO VO 归在一起叫是POJO,简单java对象:DAO 是进行数据库增删改查的类,DO不确定有没有. 重点说下POJO PO 持久对象,数据: BO 业务对象,封装对象.复杂对象 , ...

  10. python替换残缺的多域名图片网址

    在获取网站真是图片的时候,经常遇到图片链接残缺问题. 例如下图所示的情况: img标签中的图片链接是残缺的,如果这个网站域名又是多种情况的话,比如 http://sports.online.sh.cn ...