我们不多哔哔，先放图：
美化按钮背景：
当我们用系统默认的按钮风格似乎太老套，而且不太美观，某些情况下我们需要对按钮进行美化和重绘，只有这样才能满足我们的需要
按钮美化思维引导：
图中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>
黄山市民网：https://www.huangshanshimin.com/
