自定义滚动条(Custom ScrollBar)
时间如流水,只能流去不流回!
点赞再看,养成习惯,这是您给我创作的动力!
本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。
Dotnet9.com
阅读导航:
一、先看效果
二、本文背景
三、代码实现
四、文章参考
五、代码下载
一、先看效果
二、本文背景
设计师给的效果图中,滚动条的样式好好看呀,但是手上现有的控件库不好改呀,那我自己重新实现样式吧。
三、代码实现
小编使用.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
自定义滚动条(Custom ScrollBar)相关推荐
- android自定义滚动条(ScrollBar)样式
虽然很少用,但是还是有应用会有自定义ListView,GridView,ScrollView等滚动条样式,这样会使得页面更加融洽美观. 其实自定义样式很简单: 1.如果你的scrollbar是Vert ...
- 实现绚丽的自定义风格滚动条 – Perfect Scrollbar
各个浏览器的滚动条风格不一,因此很多网站都会自定义滚动条的风格.自定义风格的滚动条在所有的浏览器上看起来是一样(例如:几乎所有的谷歌应用程序都是用的灰色细条滚动条).Perfect Scrollbar ...
- 自定义滚动条使用(scrollbar样式设置)
转自:https://segmentfault.com/a/1190000012800450 PS:非商业用途,如有侵权,请联系删除. 一 前言 在CSS 中,如果我们在块级容器上设置了属性: ove ...
- CSS3自定义滚动条
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...
- 自定义滚动条,可解决火狐滚动条默认样式修改不了问题
优化: 优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题 背景: 在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试 ...
- Qt官方示例:UI Components: Scroll Bar Example(自定义滚动条)
此示例演示了一个自定义滚动条的方法. 自定义滚动条: import QtQuick 2.0Item {id: scrollBarproperty real position//范围是 0.0 - 1. ...
- H5移动端开发基础(三)自定义滚动条、实战-音悦台
自定义滚动条.实战-音悦台 自定义滚动条 js封装 transform.js tween.js scrollBar.js 音悦台 适配 样式 html js 自定义滚动条 *{margin: 0;pa ...
- 【CSS】DIV 自定义滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义 来自:DIV 自定义滚动条样式 滚动条的css样式主要有三部分组成 ::- ...
最新文章
- 快手用旺旺瓶子做机器人_用平底锅做西多士,早餐不发愁,孩子三天两头点名吃,简单快手...
- MyBatis Like
- 随笔② Java中的关键字 --- final关键字
- 数据库服务器 之 Postgresql备份和恢复------SQL转储篇
- Myeclipse 安装所有插件
- Unity2020.1新功能探路:Profiler相关更新
- playSwift第五章(函数和闭包)
- android 动态改变listview的内容
- Nginx正、反向代理以及负载均衡介绍
- 剑指OFFER之二叉搜索树与双向链表(九度OJ1503)
- DB2存储过程分页测试
- 毕业论文格式修改方法
- 自用MATLAB2012a安装教程
- 十分钟玩转3D绘图:WxGL完全手册(第二版)
- 使用 VirtualBox 虚拟机在电脑上运行 Android 系统,让电脑变安卓平板!
- HEVC官方软件HM源代码简单分析-解码器TAppDecoder
- 打印ASCII码 c++
- C++课后作业 6.教材习题5_7:利用静态变量统计小猫Cat的数量
- Xmanager 5问题记录
- win10的c语言程序闪退,win10 1909系统出现应用闪退如何解决
热门文章
- Unity手游之路lt;七gt;角色控制器
- windows 系统监视器_使用Windows 7中的可靠性监视器对计算机问题进行故障排除
- windows命令提示符_如何个性化Windows命令提示符
- 如何删除Apple Music中的连接功能
- IE8采用IE7模式
- Jenkins修改管理员密码.
- app接口开发(php)
- 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
- ext 浅谈类的实例
- Eclipse/Myeclipse生成serialVersionUID方法