WPF 自定义滚动条（ScrollView、ScrollBar）样式

一、滚动条基本样式

本次修改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）样式的更多相关文章

WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
自定义滚动条(Custom ScrollBar)
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
WPF自定义分页控件,样式自定义,简单易用
WPF自定义分页控件做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...
WPF 自定义DataGrid控件样式
内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html 一.DataGrid基本样式(一) 小刚已经把Dat ...
wpf 自定义RadioButton控件样式
实现的效果为: 我感觉来自定义RadioButton样式和定义button空间的样式差不多,只是类型不同而已. 接下来分析一下样式代码:  & ...
WPF 自定义TabControl控件样式
一.前言程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabContr ...
WPF自定义漂亮的按钮样式
首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮: 然后给各个按钮设置不同的背景颜色: 设置好之后就是这样啦: 然后我们就开始在 App. ...
WPF自定义滚动条
我修改了一些地方,部分代码参考了博主 https://www.cnblogs.com/xiaomingg/  <Style x:Ke ...
WPF 自定义TreeView控件样式，仿QQ联系人列表
一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...

随机推荐

Error:Error converting bytecode to dex: Cause: com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/internal/adp;
Q:版本号不对,广告插件的版本号和项目中用的版本号不一致 A:adsplugins的build gradle里面用的版本号是10.0.1,修改app的build gradle 的google类都改成1 ...
Handsontable添加超链接
本文在上文的基础上,返回的数据中多了一个link超链接跳转的字段,,需要在Handsontable中显示超链接. <!DOCTYPE html> <html> <head ...
云计算---openstack实例共享80、443端口
前言因为openstack使用的是apache,所以不能共享80端口,但创建的许多云主机,虽然可以通过rinetd进行跳转,但有时需要直接访问80端口,所以这里我们选择包含了nginx的openre ...
VMware 滴滴声解决
去除虚拟机tab时的滴滴声 # cat /etc/inputrc Set bell-style none 重启生效
使用python和pygame绘制繁花曲线
前段时间看了一期<最强大脑>,里面展示了各种繁花曲线组合成的非常美丽的图形,一时心血来潮,想尝试自己用代码绘制繁花曲线,想怎么组合就怎么组合. 真实的繁花曲线使用一种称为繁花曲线规的小玩意 ...
笔记：Struts2 Action 非泛型集合元素类型转换
局部类型转换文件局部类型转换文件的文件名应为 ActionName-conversion.properties,其中 ActionName 是需要替换为 Action 的类名称,后面的 conver ...
maven compile启动报错
ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.3:compile (default-co ...
最小化安装CentOS7的网卡设置
实验环境:CentOS 7 Minimal Installation 64bit (1511) 最小化安装CentOS 7 后,查看网卡的信息让人很意外,因为网卡的命名规则变了,网卡的名字让人很难懂. ...
Redis相关命令
一.命令示例 1. KEYS/RENAME/DEL/EXISTS/MOVE/RENAMENX: #在Shell命令行下启动Redis客户端工具. /> redis-cli #清空当前选择的数据库 ...
hadoop2.6.5运行wordcount实例
运行wordcount实例在/tmp目录下生成两个文本文件,上面随便写两个单词. cd /tmp/ mkdir file cd file/ echo "Hello world" ...

WPF 自定义滚动条（ScrollView、ScrollBar）样式

一、滚动条基本样式

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

随机推荐

热门专题