首页 > 其他分享 >WPF --- 如何重写WPF原生控件样式

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

时间:2023-11-17 20:24:40浏览次数:36  
标签:原生 控件 样式 ComboBox --- 滚动条 WPF

引言

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

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

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

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

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

解决方法

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

问题1

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

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

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

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

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

第一步:

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

第二步:

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

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

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

image.png

第三步:

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

image.png

第四步:

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

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

image.png

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

问题2

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

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

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

image.png

小结

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

标签:原生,控件,样式,ComboBox,---,滚动条,WPF
From: https://www.cnblogs.com/pandefu/p/17839580.html

相关文章

  • 【re】[HGAME 2023 week3]kunmusic -- .net程序逆向,z3库约束
    附件下载下来有三个东西。点开exe,发现是鸡哥判断应该是.net程序(.NET是一个免费的跨平台开源开发人员平台,用于生成许多不同类型的应用程序。凭借.NET,可以使用多种语言、编辑器和库来生成Web、移动应用、桌面应用、游戏和IoT应用),可以用dnspy打开,那个exe和json打开后都......
  • 什么是企业管理软件领域的 light-house 客户
    Lighthousecustomer,在中文环境中,我们通常将其称为“灯塔客户”。这是一种非常重要的商业术语,尤其在新产品开发和市场推广的阶段,灯塔客户的作用尤其显著。首先,我们先来理解一下Lighthousecustomer这个概念的含义。字面上理解,Lighthouse是灯塔的意思,是用来引导航行者方向的重......
  • AI试用:ChatGPT-画旗袍美女效果
    AI试用:ChatGPT-画旗袍美女效果Designby拓云智能强大的绘画工具,让您能够将灵感转化为真实的艺术作品。不论您是喜欢传统绘画还是数字绘画,ChatGPT都能够满足您的需求。它提供了各种绘画工具和特效,让您能够自由发挥创意,创作出独一无二的艺术作品。......
  • java-网络编程
    第十四章网络编程引入【1】网络编程:把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统,从而使众多的计算机可以方便地互相传递信息、共享硬件、软件、数据信息等资源。设备之间在网络中进行数据的传输,发送/接收数据。  【2】通......
  • JavaScript-键盘事件
    键盘事件的种类键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件,它们都继承了KeyboardEvent接口。keydown:按下键盘时触发。keypress:按下有值的键时触发,即按下Ctrl、Alt、Shift、Meta这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发......
  • 【Node.js】 - 概念 fs path模块 压缩HTML代码
    一、概念Node.js是一个跨平台javaScript运行环境,使开发者可以搭建服务器端的JavaScript应用程序作用:1.编写数据接口,提供网页资源浏览功能等等2.前端工程化二、什么是前端工程化开发项目直到上线,过程中集成的所有工具和技术Node.js是前端工程化的基础(因为Node.js可以主动读取前端代......
  • 第十四届蓝桥杯省赛 C++B组 ---- 景区导游
    第十四届蓝桥杯省赛C++B组----景区导游LCA原题连接​ lca同时得到按原来路径走的总时间​ 最后输出时处理跳过某个点的时间​ 预处理用bfs或dfs都可以importjava.io.BufferedReader;importjava.io.InputStreamReader;importjava.util.Arrays;importjava.......
  • 无涯教程-D语言 - 字符串(Strings)
    字符数组我们可以用以下两种形式来表示字符数组.第一种形式直接提供大小,第二种形式使用dup方法创建字符串"Goodmorning"。char[9]greeting1="Hellolearnfk";char[]greeting2="Goodmorning".dup;这是使用上述简单字符数组形式的简单示例。importstd.stdio;voidm......
  • 面试鸭 - 专注于面试刷题的网站
    ​网上面试题有很多,但此套面试题真实、原创、高频,全网最强。题目涵盖大中小公司,真实靠谱,有频率和难度的标记,助你成为Offer收割机。面试鸭地址:https://mianshiya.skyofit.com/本套题是我原创,历时两年,纯手打,是我在几十场面试中被面试官问到的问题,比其他复制粘贴的面试题强一百倍,......
  • HTTP 响应字段 strict-origin-when-cross-origin 的含义介绍
    ReferrerPolicy是一个HTTP响应头部字段,用于控制浏览器在发送跳转请求时,将当前页面的URL信息如何包含在Referer首部字段中。ReferrerPolicy的值可以设置为不同的策略,其中"strict-origin-when-cross-origin"是一种常见的策略,它具体的含义是:当请求源(origin)和目标源(orig......