自定义滚动条(Custom ScrollBar)
时间如流水，只能流去不流回！
点赞再看，养成习惯，这是您给我创作的动力！
本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。
阅读导航：
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
设计师给的效果图中，滚动条的样式好好看呀，但是手上现有的控件库不好改呀，那我自己重新实现样式吧。
三、代码实现
小编使用.Net Core 3.1创建的WPF工程，创建名称为“ScrollBar”的解决方案后，不添加任何用户控件，直接在MainWindow.xaml文件中开干。
下面是上图显示的窗体标题及滚动视图代码：
<Grid Background="#FF222222">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Margin="10" Text="Custom ScrollBar" Foreground="#FFEEEEEE" FontSize="33" FontFamily="Script MT Bold" VerticalAlignment="Center"/>
</Grid>
<ScrollViewer Grid.Row="1">
<Grid Height="1000"/>
</ScrollViewer>
</Grid>
下面是上面未添加样式时代码的效果：
除了标题还看得过去，滚动条丑到爆有木有？下面开始添加样式，即覆盖滚动条默认的样式：
<Window.Resources>
<ResourceDictionary>
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
Height="Auto" Fill="Transparent"/>
<Border x:Name="Rectangle1" CornerRadius="10 0 0 10" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="Auto" Height="Auto"
Background="{TemplateBinding Background}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
<Setter TargetName="Rectangle1" Property="Height" Value="7"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--SCROLLBARS-->
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Foreground" Value="#AAA8341A"/>
<Setter Property="Background" Value="DarkGray"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="12" Background="{x:Null}">
<Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
<Track.Thumb>
<Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollThumbs}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="True"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="True"/>
</Track.DecreaseRepeatButton>
</Track>
</Grid> <ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb" Property="Background"/>
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="True">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb" Property="Background"/>
</Trigger> <Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter TargetName="GridRoot" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="12"/>
<Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
<Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
<Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
下面是整个MainWindow.xaml的代码，您直接copy到您的测试工程中就可以用了：
<Window x:Class="ScrollBar.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ScrollBar"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="300" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
<Window.Resources>
<ResourceDictionary>
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
Height="Auto" Fill="Transparent"/>
<Border x:Name="Rectangle1" CornerRadius="10 0 0 10" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="Auto" Height="Auto"
Background="{TemplateBinding Background}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
<Setter TargetName="Rectangle1" Property="Height" Value="7"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--SCROLLBARS-->
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Foreground" Value="#AAA8341A"/>
<Setter Property="Background" Value="DarkGray"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="12" Background="{x:Null}">
<Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
<Track.Thumb>
<Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollThumbs}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="True"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="True"/>
</Track.DecreaseRepeatButton>
</Track>
</Grid> <ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb" Property="Background"/>
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="True">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb" Property="Background"/>
</Trigger> <Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter TargetName="GridRoot" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="12"/>
<Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
<Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
<Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid Background="#FF222222">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Margin="10" Text="Custom ScrollBar" Foreground="#FFEEEEEE" FontSize="33" FontFamily="Script MT Bold" VerticalAlignment="Center"/>
</Grid>
<ScrollViewer Grid.Row="1">
<Grid Height="1000"/>
</ScrollViewer>
</Grid>
</Window>
四、文章参考
参考：
Design com WPF ： https://www.youtube.com/watch?v=aQeXth-1B0I&t=350s
五、代码下载
文章中代码已经全部贴出，自定义滚动条，主要是改变滚动条的Track样式，也即Track的Thumb、IncreaseRepeatButton、DecreaseRepeatButton三个成员的样式，您get到了吗？
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/2019/12/it-technology/csharp/wpf/custom-scrollbar.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。
本站使用 wpcom 的 JustNews主题
自定义滚动条(Custom ScrollBar)的更多相关文章
- 自定义滚动条jQuery插件- Perfect Scrollbar
主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计 滚动条支持完整的自定义 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化 依赖于jQuery和相关几个类库 不需要定义宽度 ...
- 使用Custom scrollbar（彩色滚动条）插件实现WordPress滚动条变色的方法
1.在插件中心关键词搜索Custom scrollbar 2.按照说明操作就行 查看演示:sheji.xinlvtian.com
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- Flex：自定义滚动条样式/隐藏上下箭头
Flex组件自定义滚动条的实现 .scrollBar{ downArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png& ...
- javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- 自定义滚动条样式-transition无效
问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...
- 自定义滚动条mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
随机推荐
- ArcGIS Desktop10.4安装教程
准备内容 安装环境:win10*64位专业版 安装文件:ArcGIS_Desktop_1041_150996.iso 破解文件:10.4.1crackOnly 请都以管理员身份运行安装程序 安装步骤 ...
- 使用Xdroid进行端口映射，出现adb server version (36) doesn't match this client (39); killing...的解决方案
第一反应就是adb冲突了,因为Xdroid这个产品看起来就不像是给开发人员用的模拟器,因为不能选择各种版本进行适配,所以肯定自带了一个adb. whereis命令发现果然有两个adb,一个直接是安装在 ...
- Netty学习篇⑥--ByteBuf源码分析
什么是ByteBuf? ByteBuf在Netty中充当着非常重要的角色:它是在数据传输中负责装载字节数据的一个容器;其内部结构和数组类似,初始化默认长度为256,默认最大长度为Integer.MAX ...
- 【Luogu P2024&P1892】食物链&团伙（并查集拓展域）
Luogu P1892 Luogu P2024 这两道一眼看过去很容易发现可以用并查集来做--但是当我们仔细阅读题面后,会发现其实并没有那么简单. 我们知道并查集可以很轻松地维护具有传递性的信息,也就 ...
- python之turtle画蚊香
原理:利用turtle绘制圆形,并使圆半径逐步增加 代码如下: import turtle turtle.pensize(30) for i in range(30): turtle.circle(i ...
- csrf与xss
CSRF攻击攻击原理及过程如下: 1. 用户C打开浏览器,访问受信任网站A,输入用户名和密码请求登录网站A: 2.在用户信息通过验证后,网站A产生Cookie信息并返回给浏览器,此时用户登 ...
- Spring Boot 注解之ObjectProvider源码追踪
最近依旧在学习阅读Spring Boot的源代码,在此过程中涉及到很多在日常项目中比较少见的功能特性,对此深入研究一下,也挺有意思,这也是阅读源码的魅力之一.这里写成文章,分享给大家. 自动配置中的O ...
- 【JavaEE】之MyBatis与原生JDBC、Hibernate访问数据库的比较
首先来看一下原生JDBC访问数据库的代码: public static void main(String[] args) { // 数据库连接 Connection connection = null ...
- java 抽象类和接口整理
java中定义一些不含方法体的方法,方法体的实现交给该类的子类根据自己的具体情况去实现,这样的方法就是abstract修饰的抽象方法,包含抽象方法的类叫抽象类,用abstract修饰 抽象方法: ab ...
- 使用生成对抗网络（GAN）生成手写字
先放结果 这是通过GAN迭代训练30W次,耗时3小时生成的手写字图片效果,大部分的还是能看出来是数字的. 实现原理 简单说下原理,生成对抗网络需要训练两个任务,一个叫生成器,一个叫判别器,如字面意思, ...