当前位置：移动技术网 > IT编程>开发语言>.net > WPF-按钮美化

WPF-按钮美化

2019年05月28日 | 移动技术网IT编程 | 我要评论

太平立保通登录系统,平度人才招聘网,夏季走光

　　我们不多哔哔，先放图：

美化按钮背景：

　　当我们用系统默认的按钮风格似乎太老套，而且不太美观，某些情况下我们需要对按钮进行美化和重绘，只有这样才能满足我们的需要

按钮美化思维引导：

图中1 为控件border

途中2 为contentpresenter（也可以用textbook）

由此可见按钮时有 border+contentpresenter组成的

那么我们可以进行按钮重绘

 1 <style  targettype="{x:type button}">
 2     <setter property="template">
 3             <setter.value>
 4                 <controltemplate targettype="{x:type button}">
 5                     <border x:name="border" cornerradius="3" borderbrush="{templatebinding borderbrush}" borderthickness="1" background="{templatebinding background}" snapstodevicepixels="true">
 6                         <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/>
 7                     </border>
 8 　　　　　　　　　</controltemplate>
 9             </setter.value>
10         </setter>
11 </style>

若想将按钮进一步美化就可以配合触发器使用（该按钮风格为默认）

 1 <style  targettype="{x:type button}">
 2         <setter property="focusvisualstyle" value="{staticresource focusvisual}"/>
 3         <setter property="background" value="#ffffff"/>
 4         <setter property="borderbrush" value="{staticresource button.static.border}"/>
 5         <setter property="foreground" value="black"/>
 6         <setter property="borderthickness" value="1"/>
 7         <setter property="horizontalcontentalignment" value="center"/>
 8         <setter property="verticalcontentalignment" value="center"/>
 9         <setter property="cursor" value="hand"/>
10         <setter property="fontsize" value="23"/>
11         <setter property="height" value="40"/>
12         <setter property="padding" value="1"/>
13         <setter property="template">
14             <setter.value>
15                 <controltemplate targettype="{x:type button}">
16                     <border x:name="border" cornerradius="3" borderbrush="{templatebinding borderbrush}" borderthickness="1" background="{templatebinding background}" snapstodevicepixels="true">
17                         <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/>
18                     </border>
19                     <controltemplate.triggers>
20                         <trigger property="isdefaulted" value="true">
21                             <setter property="borderbrush" targetname="border" value="{dynamicresource {x:static systemcolors.highlightbrushkey}}"/>
22                         </trigger>
23                         <trigger property="ismouseover" value="true">
24                             <setter property="foreground" value="#037c72"/>
25                             <setter property="borderbrush" targetname="border" value="#037c72"/>
26                         </trigger>
27                         <trigger property="ispressed" value="true">
28                             <setter property="foreground"  value="#32aa9f"/>
29                             <setter property="borderbrush" targetname="border" value="#037c72"/>
30                         </trigger>
31                         <trigger property="isenabled" value="false">
32                             <setter property="background" targetname="border" value="{staticresource button.disabled.background}"/>
33                             <setter property="borderbrush" targetname="border" value="{staticresource button.disabled.border}"/>
34                             <setter property="textelement.foreground" targetname="contentpresenter" value="{staticresource button.disabled.foreground}"/>
35                         </trigger>
36                     </controltemplate.triggers>
37                 </controltemplate>
38             </setter.value>
39         </setter>
40         <setter property="fontfamily" value="/mestoolintegration;component/fonts/#iconfont"/>
41     </style>

其他按钮风格为

  1 <style x:key="greenbuttonstyle" targettype="{x:type button}">
  2         <setter property="focusvisualstyle" value="{staticresource focusvisual}"/>
  3         <setter property="background" value="#32aa9f"/>
  4         <setter property="borderbrush" value="{staticresource button.static.border}"/>
  5         <setter property="foreground" value="#ffffff"/>
  6         <setter property="borderthickness" value="1"/>
  7         <setter property="horizontalcontentalignment" value="center"/>
  8         <setter property="verticalcontentalignment" value="center"/>
  9         <setter property="cursor" value="hand"/>
 10         <setter property="fontsize" value="23"/>
 11         <setter property="height" value="40"/>
 12         <setter property="padding" value="1"/>
 13         <setter property="template">
 14             <setter.value>
 15                 <controltemplate targettype="{x:type button}">
 16                     <border x:name="border" cornerradius="3" borderbrush="{templatebinding borderbrush}" borderthickness="0" background="{templatebinding background}" snapstodevicepixels="true">
 17                         <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/>
 18                     </border>
 19                     <controltemplate.triggers>
 20                         <trigger property="isdefaulted" value="true">
 21                             <setter property="borderbrush" targetname="border" value="{dynamicresource {x:static systemcolors.highlightbrushkey}}"/>
 22                         </trigger>
 23                         <trigger property="ismouseover" value="true">
 24                             <setter property="background" targetname="border" value="#037c72"/>
 25                             <setter property="borderbrush" targetname="border" value="{staticresource button.mouseover.border}"/>
 26                         </trigger>
 27                         <trigger property="ispressed" value="true">
 28                             <setter property="background" targetname="border" value="#32aa9f"/>
 29                             <setter property="borderbrush" targetname="border" value="{staticresource button.pressed.border}"/>
 30                         </trigger>
 31                         <trigger property="isenabled" value="false">
 32                             <setter property="background" targetname="border" value="{staticresource button.disabled.background}"/>
 33                             <setter property="borderbrush" targetname="border" value="{staticresource button.disabled.border}"/>
 34                             <setter property="textelement.foreground" targetname="contentpresenter" value="{staticresource button.disabled.foreground}"/>
 35                         </trigger>
 36                     </controltemplate.triggers>
 37                 </controltemplate>
 38             </setter.value>
 39         </setter>
 40         <setter property="fontfamily" value="/mestoolintegration;component/fonts/#iconfont"/>
 41     </style>
 42     <style x:key="redbuttonstyle" targettype="{x:type button}">
 43         <setter property="focusvisualstyle" value="{staticresource focusvisual}"/>
 44         <setter property="background" value="#ffff3c33"/>
 45         <setter property="borderbrush" value="{staticresource button.static.border}"/>
 46         <setter property="foreground" value="#fffbeeee"/>
 47         <setter property="borderthickness" value="1"/>
 48         <setter property="horizontalcontentalignment" value="center"/>
 49         <setter property="verticalcontentalignment" value="center"/>
 50         <setter property="cursor" value="hand"/>
 51         <setter property="fontsize" value="23"/>
 52         <setter property="height" value="40"/>
 53         <setter property="padding" value="1"/>
 54         <setter property="template">
 55             <setter.value>
 56                 <controltemplate targettype="{x:type button}">
 57                     <border x:name="border" borderbrush="{templatebinding borderbrush}" borderthickness="0" background="{templatebinding background}" snapstodevicepixels="true" cornerradius="3">
 58                         <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/>
 59                     </border>
 60                     <controltemplate.triggers>
 61                         <trigger property="isdefaulted" value="true">
 62                             <setter property="borderbrush" targetname="border" value="{dynamicresource {x:static systemcolors.highlightbrushkey}}"/>
 63                         </trigger>
 64                         <trigger property="ismouseover" value="true">
 65                             <setter property="background" targetname="border" value="#fc754b"/>
 66                             <setter property="borderbrush" targetname="border" value="{staticresource button.mouseover.border}"/>
 67                         </trigger>
 68                         <trigger property="ispressed" value="true">
 69                             <setter property="background" targetname="border" value="#ffff3c33"/>
 70                             <setter property="borderbrush" targetname="border" value="{staticresource button.pressed.border}"/>
 71                         </trigger>
 72                         <trigger property="isenabled" value="false">
 73                             <setter property="background" targetname="border" value="{staticresource button.disabled.background}"/>
 74                             <setter property="borderbrush" targetname="border" value="{staticresource button.disabled.border}"/>
 75                             <setter property="textelement.foreground" targetname="contentpresenter" value="{staticresource button.disabled.foreground}"/>
 76                         </trigger>
 77                     </controltemplate.triggers>
 78                 </controltemplate>
 79             </setter.value>
 80         </setter>
 81         <setter property="fontfamily" value="/mestoolintegration;component/fonts/#iconfont"/>
 82         <setter property="verticalalignment" value="stretch"/>
 83     </style>
 84     <style x:key="bluebuttonstyle" targettype="{x:type button}">
 85         <setter property="focusvisualstyle" value="{staticresource focusvisual}"/>
 86         <setter property="background" value="#ff4ab2ff"/>
 87         <setter property="borderbrush" value="{staticresource button.static.border}"/>
 88         <setter property="foreground" value="white"/>
 89         <setter property="borderthickness" value="1"/>
 90         <setter property="horizontalcontentalignment" value="center"/>
 91         <setter property="verticalcontentalignment" value="center"/>
 92         <setter property="cursor" value="hand"/>
 93         <setter property="fontsize" value="23"/>
 94         <setter property="height" value="40"/>
 95         <setter property="padding" value="1"/>
 96         <setter property="template">
 97             <setter.value>
 98                 <controltemplate targettype="{x:type button}">
 99                     <border x:name="border" borderbrush="{templatebinding borderbrush}" borderthickness="0" background="{templatebinding background}" snapstodevicepixels="true" cornerradius="3">
100                         <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/>
101                     </border>
102                     <controltemplate.triggers>
103                         <trigger property="isdefaulted" value="true">
104                             <setter property="borderbrush" targetname="border" value="{dynamicresource {x:static systemcolors.highlightbrushkey}}"/>
105                         </trigger>
106                         <trigger property="ismouseover" value="true">
107                             <setter property="background" targetname="border" value="#6ec1ff"/>
108                             <setter property="borderbrush" targetname="border" value="{staticresource button.mouseover.border}"/>
109                         </trigger>
110                         <trigger property="ispressed" value="true">
111                             <setter property="background" targetname="border" value="#4ab2ff"/>
112                             <setter property="borderbrush" targetname="border" value="{staticresource button.pressed.border}"/>
113                         </trigger>
114                         <trigger property="isenabled" value="false">
115                             <setter property="background" targetname="border" value="{staticresource button.disabled.background}"/>
116                             <setter property="borderbrush" targetname="border" value="{staticresource button.disabled.border}"/>
117                             <setter property="textelement.foreground" targetname="contentpresenter" value="{staticresource button.disabled.foreground}"/>
118                         </trigger>
119                     </controltemplate.triggers>
120                 </controltemplate>
121             </setter.value>
122         </setter>
123         <setter property="fontfamily" value="/mestoolintegration;component/fonts/#iconfont"/>
124     </style>
125     <style x:key="yellowbuttonstyle" targettype="{x:type button}">
126         <setter property="focusvisualstyle" value="{staticresource focusvisual}"/>
127         <setter property="background" value="#ffffb800"/>
128         <setter property="borderbrush" value="{x:null}"/>
129         <setter property="foreground" value="white"/>
130         <setter property="borderthickness" value="0"/>
131         <setter property="horizontalcontentalignment" value="center"/>
132         <setter property="verticalcontentalignment" value="center"/>
133         <setter property="cursor" value="hand"/>
134         <setter property="fontsize" value="23"/>
135         <setter property="height" value="40"/>
136         <setter property="padding" value="1"/>
137         <setter property="template">
138             <setter.value>
139                 <controltemplate targettype="{x:type button}">
140                     <border x:name="border" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" snapstodevicepixels="true" cornerradius="3">
141                         <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/>
142                     </border>
143                     <controltemplate.triggers>
144                         <trigger property="isdefaulted" value="true">
145                             <setter property="borderbrush" targetname="border" value="{dynamicresource {x:static systemcolors.highlightbrushkey}}"/>
146                         </trigger>
147                         <trigger property="ismouseover" value="true">
148                             <setter property="background" targetname="border" value="#ffc632"/>
149                             <setter property="borderbrush" targetname="border" value="{staticresource button.mouseover.border}"/>
150                         </trigger>
151                         <trigger property="ispressed" value="true">
152                             <setter property="background" targetname="border" value="#ffffb800"/>
153                             <setter property="borderbrush" targetname="border" value="{staticresource button.pressed.border}"/>
154                         </trigger>
155                         <trigger property="isenabled" value="false">
156                             <setter property="background" targetname="border" value="{staticresource button.disabled.background}"/>
157                             <setter property="borderbrush" targetname="border" value="{staticresource button.disabled.border}"/>
158                             <setter property="textelement.foreground" targetname="contentpresenter" value="{staticresource button.disabled.foreground}"/>
159                         </trigger>
160                     </controltemplate.triggers>
161                 </controltemplate>
162             </setter.value>
163         </setter>
164         <setter property="fontfamily" value="/mestoolintegration;component/fonts/#iconfont"/>
165     </style>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端

距离上次提出 [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件的想法后,&#... [阅读全文]
武装你的WEBAPI-OData入门

本文属于OData系列目录（可能会有后续修改） "武装你的WEBAPI OData入门" 武装你的WEBAPI OData便捷查询武装你的WEBAP... [阅读全文]
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)

依赖倒置原则(DIP) 依赖倒置(Dependency Inversion Principle,缩写DIP)是面向对象六大基本原则之一。他是指一种特定的... [阅读全文]
DevExpress+Winform（四）

视频：https://www.bilibili.com/video/BV15x411x7WN?p=5 新建Devexpress Winform Blan... [阅读全文]
Jenkins之Nunit的应用

一、在Jenkins中安装Nunit插件进入jenkins的插件管理模块，下载Nunit插件。此步骤不做截图说明二、引用nunit.console的nu... [阅读全文]
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布

框架介绍这是一个基于vue、element-ui、iview、.netcore3.1 可支持前端、后台动态扩展业务代码快速开发框架。框架内置定制开发... [阅读全文]
微信退款（在.net core 用http方式请求）

微信JSAPI支付申请退款接口地址接口链接：https://api.mch.weixin.qq.com/secapi/pay/refund 是否需... [阅读全文]
Owin Katana 的底层源码分析

最近看了一下开源项目asp.net katana，感觉公开的接口非常的简洁优雅，channel 9 说是受到node.js的启发设计的，Katana是一... [阅读全文]
jenkins发布application且并运行

一、发布配置差异配置：编译内容编译目标NetWorkClient/KJ90NetClient.csproj编译命令/t:build/p:Configur... [阅读全文]
WPF 简易日期控件魔改ListBox

先上截图修正：应该将SetTime方法修改为，行号为207行开始修改 var nk = Day_of_week(year, month, 1); i... [阅读全文]