WPF --- 如何重写WPF原生控件样式

引言

上一篇中 WPF --- 重写DataGrid样式,因新产品UI需要,重写了一下微软 WPF 原生的 DataGrid 的样式,包含如下内容:

  • 基础设置,一些基本背景色,字体颜色等。
  • 滚动条样式。
  • 实现圆角表格,重写表格的一些基础样式,例如 CellStyleRowStyle,RowHeaderStyle, ColumnHeaderStyle等。

重写过程中,遇到了两个问题:

  1. 如何获取 WPF 原生的 DataGrid 的样式?
  2. 滚动条样式中,如何固定滚动条长度?

本篇文章分享一下这两个问题的解决办法。

解决方法

我来分别分享一下我遇到的这两个问题。

问题1

第一个,如何获取 WPF 原生的 DataGrid 的样式?

这个问题不限于原生的 DataGrid 的样式,其他的一些样式比如 checkBox,RadioButton, ComboBox

这些控件对于一些初学者来说,很难理解他是怎么实现的。

比如 ComboBox 控件,我刚开始学习WPF时的时候,我就不理解这个是怎么实现的,我后来还是通过查询微软官方文档 1ComboBox Styles and Templates ,文档里给出了 ComboBox StylesComboBox Templates ,看完设计代码之后才明白原生的ComBox控件是怎么实现的。

那么用翻阅官方文档的方式效率太低了,所以我这回找了一个效率很高的方法吗,就是是通过 Blend(全称:Microsoft Blend for Visual Studio) ,这个是跟随 Visual Studio 一起安装的,平常我也使用 Blend ,做一些自定义控件和动画效果等,十分好用。接下来演示一下如何获取 ComboBox 的原生样式。

第一步:

使用 Blend 创建一个 WPF 项目,再窗体中添加一个 ComboBox

第二步:

选中 ComboBox ,在设计视图左上角点击 ComboBox 下拉框,再点击"编辑模板",再点击"编辑副本"。

这时会弹出创建资源的窗体,可以选择你创建样式的形式是什么。

  • 关键字选项:可以选择你创建的样式是否带 Key,若不带 Key 则默认应用在所有该类型控件上。
  • 定义位置选项:"应用程序"选项会将该样式创建到 App.xaml 文件中。"此文档"选项会将该样式创建到当前窗体的 Window.Resources 中,最后一个"资源字典"选项,则会创建一个新的资源字典文件或者添加到已有资源字典文件。

第三步:

我这里选择,生成到当前文件 Window.Resources 中且带 Key 的样式,然后他就会生成原生的样式代码。如下所示,这里代码太多,折叠展示。

第四步:

可以看到它生成了一堆的资源,这时候我们只需要找我们想要的那一部分,比如 ComboBoxTemplate ,从代码中就可以看出,ComboBox 主要有三部分组成

  • Popup:它的作用就是当 ToggleButtonIsChecked 为true时,展开其内容,它的内容就是 ScrollViewer,就是我们看到的下拉弹出的内容了。
  • ToggleButton: 这个就是右侧那个上下尖括号符号按钮,用于打开或关闭 Popup 内容。
  • ContentPresenter:内容容器,可以自定义任何控件模板、数据模板或样式在其中展示。

所以,到此为止,我们就明白了原生的 ComboBox 是怎么实现的了,而且有了这个原生样式,就可以在此基础之上进行修改,美化,从而演变成我们想要的样子。

问题2

第二个问题, 滚动条样式中,如何固定滚动条长度?

在原生的滚动条样式中,纵方向上的滚动条的高度是跟随你窗口的大小和内容的多少而改变的,窗口大内容少,滚动条的高度就越大,反之亦然。

我调试了很久,包括重写 Thumb 的样式,修改 Thumb 的高度,都一直不生效,最后在官方文档 2How to: Customize the Thumb Size on a ScrollBar 中找到了解决方案,就是通过设置HorizontalScrollBarButtonWidthKey 来固定滚动条长度。文中将其

小结

Blend 本身就是一个专业级的界面设计工具,可以大大提高我们创建丰富、交互式的用户界面(UI)和用户体验(UX)设计的效率。

而通过 Blend 获取原生样式,阅读原生样式,非常有利于理解控件设计的,在此基础上进行修改,美化也是能够事半功倍的,强烈建议大家学会。

参考

1 https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox-styles-and-templates?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0

2 https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-customize-the-thumb-size-on-a-scrollbar?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0

相关推荐
fogota3 天前
Emoji与Segoe MDL2 Assets的比较
c#·wpf
fogota3 天前
C# WPF 按钮加载字体图标 / 动物头像
c#·.net·wpf
fogota3 天前
C# WPF 按钮加载系统图标 / 动物头像
c#·.net·wpf
军训猫猫头3 天前
C# 封装 MySQL 自动写入与查询工具类(基于 MySqlConnector)
mysql·c#·.net·wpf
gis开发之家4 天前
Spring Boot 4 定时任务与异步线程池:从 @Scheduled 到高并发任务编排(生产级实战)
java·spring boot·后端·wpf·spring boot4
clz13145215 天前
如何设计一个优雅可靠的金融级联机接口
wpf
闲云自留地6 天前
云平台存储管理员:Cinder 创建挂载卷 + Swift 分布式存储原理
分布式·wpf·swift
敲代码的嘎仔7 天前
从集群锁失效到异步领券:我用分布式锁 + Redisson + MQ 把领券接口 RT 从 200ms 压到 15ms
java·数据库·redis·分布式·缓存·ai·wpf
闲云自留地7 天前
OpenStack 的身份管家:Keystone 令牌、RBAC 权限模型拆解
wpf·openstack
FuckPatience9 天前
WPF 窗体唤醒,判断是否已存在,存在则弹出
wpf