这里是Ywang

博客园 首页 新随笔 联系 订阅 管理

[开发环境为Blend for Visual Studio 2019,Windows10 22H2,WPF by .NET Framework 4.7.2]

个人感觉使用Blend辅助设计控件样式更加简单直观,在这里顺便分享一下过程。

【个人也在学习WPF开发的过程中,还属于入门阶段,如有任何表述错误望请大佬指出】

1.按钮样式的自定义

按钮样式大概是WPF中最好自定义的一类控件,它主要就是由一个border和content组成,所以我们可以对其内容进行高度的自定义

如图,我们已经在屏幕中央创建了一个button,我们右键这个button->编辑模板->编辑副本 即可创建一个自定义按钮效果,可以在弹出的提示框中输入自定义属性名。

如果你想让整个应用程序都能用上这个按钮效果的话,那你可以在定义位置那栏选择 "应用程序" 如果勾选 "此文档" 那么这个效果就只能在这个page上使用。我这里以ButtonStyle1命名。

如图,创建完成后,我们能在左方看到这个按钮的组成,其中的border相当于这个按钮的背景,我们自定义样式主要调整的就是这个border的样式,所以我们可以选中border。

选中border后,你可能想调整这个border的颜色,但无法调整,这是因为它的背景边框等颜色已经进行了数据绑定,这个数据绑定的直接是外部的按钮颜色,也就是说你在调整按钮的背景颜色时他就会通过这个数据绑定来更改这个border的背景颜色。

你可以通过点一下这个黄色的小方块->重置 来解除数据绑定【但是我不推荐轻易解除绑定,因为这样会让这个自定义样式的使用范围更小,毕竟这个效果的按钮只有这一种颜色了】

如果你想还原数据绑定的话,那么你可以点一下小方块->模板绑定->Background 即可再次绑定数据。

我这里更改了一下圆角率和阴影达到了图片中的效果。

此时运行会发现,这个按钮的鼠标悬浮样式和按下的样式仍然还是系统默认的样式,我们可以更改这些样式。

在左边的触发器里面找到这些效果,其实我更习惯直接全部删除,因为我们能直接在 “状态” 一栏来定义动画效果,所以我这边把这些触发全部删除了。选中触发然后点那个闪电减号标志就能删除。

删除完毕后,我们可以进入状态一栏然后定义相应的动画效果,但是你会发现数据绑定的效果无法更改对应颜色,就比如你想让悬浮时让按钮颜色变深该怎么办呢,我自己摸索的一个不聪明的方法是在创建一个背景border充当底色。

具体是这样的,我先用gird做容器然后里面放了两个border,最上面的border有数据绑定所以不能更改颜色,下面的border没有数据绑定可以更改颜色,我们弄个纯黑的背景然后把透明度调低,这样就可以实现类似的效果。

你可以选中你想要调整的目标状态,然后在选中对应控件调整属性,当你发现控件那里出现了小红点时,那么就说明动画生效了。

但是不同的状态是不能共用一个控件的,什么意思呢,就是如果你在CommonStates里面为某个控件应用了动画效果,那么就不能在别的States里面为这个控件应用动画效果了,要不然会报错。

上面这里还能更改动画的曲线和时长,一般0.1s到0.2s即可。

这样一个自定义控件的样式就应用完成了,还能更改不同的颜色。

如果你还想退出编辑模板,那就点上方那个button即可。

如果你还想编辑这个模板,那么就右键应用这个模板的按钮,然后点->编辑模板->编辑当前项 即可。

2.其他控件

其实别的控件也同理,就比如说TextBox,他的组成也是类似的结构,所以可以和上述方法同理。

不过对于listBox这种有多个元素的控件,那么就比较复杂了,还要编辑其他模板,还会涉及到数据绑定,这里不做细讲,以后会单独出一期教程。

posted on 2026-08-30 08:35  这里是Ywang  阅读(7)  评论(0)    收藏  举报