一、滚动条基本样式

本次修改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. Android学习之AutoCompleteTextView和MultiAutoCompleteTextView

    转自:http://blog.csdn.net/qq_28468727/article/details/52258409 AutoCompleteTextView.MultiAutoCompleteT ...

  2. C# Redis实战(七)

    七.修改数据 在上一篇 C# Redis实战(六)中介绍了如何查询Redis中数据,本篇将介绍如何修改Redis中相关数据.大家都知道Redis是key-value型存储系统,所以应该可以修改key, ...

  3. Mac上使用jenkins+ant执行第一个程序

    本文旨在让同学们明白如何让jenkis在mac笔记本上运行,以模拟实际工作中在linux上搭建jenkins服务平台首先按照笔者的习惯先说一下如何安装jenkis和tomcat,先安装tomcat,在 ...

  4. 【Unity与23种设计模式】适配器模式（Adapter）

    GoF中定义: "将一个类的接口转换成为客户端期待的类接口.适配器模式让原本接口不兼容的类能一起合作." 适配器模式与装饰模式有一定的相似之处 两者都是在着手解决C#不能多继承的问 ...

  5. 10个技巧优化PHP程序Laravel 5框架

    10个技巧优化PHP程序Laravel 5框架 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践www.itxdl.c ...

  6. Win32 API之绘图函数

    AbortPath 抛弃选入指定设备场景中的所有路径.也取消目前正在进行的任何路径的创建工作 AngleArc 用一个连接弧画一条线 Arc 画一个圆弧 BeginPath 启动一个路径分支 Canc ...

  7. angularJS前台传list数组，后台springMVC接收数组

    有时候需要在前台自定义对象,然后把对象封装在list中,在传送到后台,这样的思想也比较合理 1. 前台代码 $scope.saveScore = function () { $scope.userSc ...

  8. Java使用对象流读取文件的问题

    把对象进行持久化(把对象存到本地)要用到对象流进行处理,在用对象流处理过程中,在写对象和读对象时候遇到了很多问题,分享一下. 我们处理对象数据的时候不可能只处理一个对象,在系统运行的时候,可能产生的对 ...

  9. java创建运行以及项目结构

    一 创建java project 再src下添加class,选择一个class添加main方法作为程序的入口 二.项目结构: src下添加不同的包,命名方法为com.jikexueyuan.hello ...

  10. Dockerfile 指令 VOLUME 介绍

    在介绍VOLUME指令之前,我们来看下如下场景需求: 1)容器是基于镜像创建的,最后的容器文件系统包括镜像的只读层+可写层,容器中的进程操作的数据持久化都是保存在容器的可写层上.一旦容器删除后,这些数 ...