天天看点

html 滚动条_自定义滚动条(Custom ScrollBar)

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。

阅读导航:

  • 一、先看效果
  • 二、本文背景
  • 三、代码实现
  • 四、文章参考
  • 五、代码下载

一、先看效果

html 滚动条_自定义滚动条(Custom ScrollBar)

二、本文背景

设计师给的效果图中,滚动条的样式好好看呀,但是手上现有的控件库不好改呀,那我自己重新实现样式吧。

三、代码实现

小编使用.Net Core 3.1创建的WPF工程,创建名称为“ScrollBar”的解决方案后,不添加任何用户控件,直接在MainWindow.xaml文件中开干。

下面是上图显示的窗体标题及滚动视图代码:

下面是上面未添加样式时代码的效果:

html 滚动条_自定义滚动条(Custom ScrollBar)

除了标题还看得过去,滚动条丑到爆有木有?下面开始添加样式,即覆盖滚动条默认的样式:

下面是整个MainWindow.xaml的代码,您直接copy到您的测试工程中就可以用了:

四、文章参考

参考:

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

继续阅读