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

相关推荐
largecode8 小时前
座机号码认证如何操作?申请热线实名名片,树立统一官方客服形象
linux·sql·华为·c#·.net·wpf·harmonyos
小满Autumn10 小时前
WPF 入门:XAML 语法、布局与数据绑定
microsoft·c#·.net·wpf
小满Autumn14 小时前
WPF 进阶:样式、触发器与控件模板
c#·.net·wpf
她说彩礼65万1 天前
WPF视觉树 逻辑树
wpf
贺国亚2 天前
分布式并发
分布式·wpf
Iawfy_2 天前
WPF的ComboBox绑定Enum枚举
wpf
她说彩礼65万2 天前
WPF TemplateBinding
wpf
她说彩礼65万2 天前
WPF 三大模板类型 四大属性名称
wpf
无心水2 天前
金融系统数据一致性之战:联机交易与批量作业的冲突处理完全指南
人工智能·金融·wpf·批量作业·顶尖架构师·联机交易·金融架构师
步步为营DotNet3 天前
深入.NET 11:ASP.NET Core 10 在构建高可用分布式系统的关键技术与实践
asp.net·.net·wpf