一、前言
程序界面上的按鈕多種多樣，常用的就這幾種：普通按鈕、圖標(biāo)按鈕、文字按鈕、圖片文字混合按鈕。本文章記錄了不同樣式類型的按鈕實(shí)現(xiàn)方法。下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
二、固定樣式的按鈕
固定樣式的按鈕一般在臨時(shí)使用時(shí)或程序的樣式比較固定時(shí)才會(huì)使用，按鈕整體樣式不需要做大的改動(dòng)。
2.1 普通按鈕-扁平化風(fēng)格
先看效果：
定義button的樣式，詳見(jiàn)代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style x:key="btninfostyle" targettype="button"> <setter property="width" value="70"/> <setter property="height" value="25"/> <setter property="foreground" value="white"/> <setter property="borderthickness" value="0"/> <setter property="background" value="#43a9c7"/> <setter property="template"> <setter.value> <controltemplate targettype="button"> <border x:name="border" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" snapstodevicepixels="true"> <textblock text="{templatebinding content}" foreground="{templatebinding foreground}" verticalalignment="center" horizontalalignment="center"/> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter targetname="border" property="background" value="#2f96b4"/> </trigger> <trigger property="ispressed" value="true"> <setter targetname="border" property="background" value="#2a89a4"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter></style> |
引用方法：
|
1
2
3
4
|
<grid background="white"> <stackpanel orientation="horizontal" margin="10" verticalalignment="top"> <button style="{staticresource btninfostyle}" content="信息" margin="5 0"/></grid> |
上述代碼實(shí)現(xiàn)了button按鈕的扁平化樣式，如果你想調(diào)整顏色風(fēng)格，通過(guò)修改background的值可實(shí)現(xiàn)默認(rèn)顏色，鼠標(biāo)經(jīng)過(guò)顏色以及鼠標(biāo)按下顏色。
2.2 圖標(biāo)按鈕
先看效果：
button樣式的代碼和扁平化button差不多，只是把textblock控件替換成了image控件，另外需要設(shè)置button默認(rèn)的背景色為透明。廢話不多說(shuō)看代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<style x:key="btnimagestyle1" targettype="button"> <setter property="cursor" value="hand"/> <setter property="template"> <setter.value> <controltemplate targettype="button"> <border width="{templatebinding width}" height="{templatebinding height}"> <image x:name="img" verticalalignment="center" horizontalalignment="center" source="/images/button1.png" stretch="none"/> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter targetname="img" property="source" value="/images/button1.png"/> </trigger> <trigger property="ispressed" value="true"> <setter targetname="img" property="source" value="/images/button1.png"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> |
這里的button1.png需要自己準(zhǔn)備圖片資源，ismouseover和ispressed的圖片資源可自己替換，替換之后能有更豐富的效果呈現(xiàn)。
2.3 圖標(biāo)文字混合按鈕
效果：
實(shí)現(xiàn)代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<style x:key="btnimgtxtstyle1" targettype="button"> <setter property="foreground" value="#555"/> <setter property="template"> <setter.value> <controltemplate targettype="button"> <border> <stackpanel orientation="horizontal" horizontalalignment="center"> <image source="images/adshut.png" stretch="none"/> <textblock x:name="txt" text="{templatebinding content}" foreground="{templatebinding foreground}" verticalalignment="center" horizontalalignment="center"/> </stackpanel> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="foreground" value="#333333" targetname="txt"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> |
2.4 文字按鈕和2.3中的圖標(biāo)文字按鈕樣式差不多，只需要把image控件去掉就行。
三、復(fù)用性高的按鈕
要想實(shí)現(xiàn)復(fù)用性高的按鈕，就必須新建自定義控件。下面這個(gè)實(shí)例通過(guò)自定義控件實(shí)現(xiàn)上述所有效果，并且可以隨意更改風(fēng)格。
首先在項(xiàng)目中右鍵-添加-新建項(xiàng)-自定義控件。
新建自定義控件之后，添加依賴屬性。代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
public class buttonex : button { static buttonex() { defaultstylekeyproperty.overridemetadata(typeof(buttonex), new frameworkpropertymetadata(typeof(buttonex))); } public buttontype buttontype { get { return (buttontype)getvalue(buttontypeproperty); } set { setvalue(buttontypeproperty, value); } } public static readonly dependencyproperty buttontypeproperty = dependencyproperty.register("buttontype", typeof(buttontype), typeof(buttonex), new propertymetadata(buttontype.normal)); public imagesource icon { get { return (imagesource)getvalue(iconproperty); } set { setvalue(iconproperty, value); } } public static readonly dependencyproperty iconproperty = dependencyproperty.register("icon", typeof(imagesource), typeof(buttonex), new propertymetadata(null)); public cornerradius cornerradius { get { return (cornerradius)getvalue(cornerradiusproperty); } set { setvalue(cornerradiusproperty, value); } } public static readonly dependencyproperty cornerradiusproperty = dependencyproperty.register("cornerradius", typeof(cornerradius), typeof(buttonex), new propertymetadata(new cornerradius(0))); public brush mouseoverforeground { get { return (brush)getvalue(mouseoverforegroundproperty); } set { setvalue(mouseoverforegroundproperty, value); } } public static readonly dependencyproperty mouseoverforegroundproperty = dependencyproperty.register("mouseoverforeground", typeof(brush), typeof(buttonex), new propertymetadata()); public brush mousepressedforeground { get { return (brush)getvalue(mousepressedforegroundproperty); } set { setvalue(mousepressedforegroundproperty, value); } } public static readonly dependencyproperty mousepressedforegroundproperty = dependencyproperty.register("mousepressedforeground", typeof(brush), typeof(buttonex), new propertymetadata()); public brush mouseoverborderbrush { get { return (brush)getvalue(mouseoverborderbrushproperty); } set { setvalue(mouseoverborderbrushproperty, value); } } public static readonly dependencyproperty mouseoverborderbrushproperty = dependencyproperty.register("mouseoverborderbrush", typeof(brush), typeof(buttonex), new propertymetadata()); public brush mouseoverbackground { get { return (brush)getvalue(mouseoverbackgroundproperty); } set { setvalue(mouseoverbackgroundproperty, value); } } public static readonly dependencyproperty mouseoverbackgroundproperty = dependencyproperty.register("mouseoverbackground", typeof(brush), typeof(buttonex), new propertymetadata()); public brush mousepressedbackground { get { return (brush)getvalue(mousepressedbackgroundproperty); } set { setvalue(mousepressedbackgroundproperty, value); } } public static readonly dependencyproperty mousepressedbackgroundproperty = dependencyproperty.register("mousepressedbackground", typeof(brush), typeof(buttonex), new propertymetadata()); } public enum buttontype { normal, icon, text, icontext } |
為不同類型按鈕設(shè)置樣式，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<style targettype="{x:type local:buttonex}"> <style.triggers> <trigger property="buttontype" value="normal"> <setter property="background" value="#43a9c7"/> <setter property="mouseoverbackground" value="#2f96b4"/> <setter property="mousepressedbackground" value="#2a89a4"/> <setter property="foreground" value="white"/> <setter property="mouseoverforeground" value="white"/> <setter property="mousepressedforeground" value="white"/> <setter property="borderbrush" value="transparent"/> <setter property="borderthickness" value="0"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type local:buttonex}"> <border x:name="border" background="{templatebinding background}" cornerradius="{templatebinding cornerradius}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" width="{templatebinding width}" height="{templatebinding height}" snapstodevicepixels="true"> <textblock x:name="txt" text="{templatebinding content}" foreground="{templatebinding foreground}" verticalalignment="center" horizontalalignment="center"/> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter targetname="border" property="background" value="{binding mouseoverbackground,relativesource={relativesource templatedparent}}"/> <setter targetname="txt" property="foreground" value="{binding mouseoverforeground,relativesource={relativesource templatedparent}}"/> <setter targetname="border" property="borderbrush" value="{binding mouseoverborderbrush,relativesource={relativesource templatedparent}}"/> </trigger> <trigger property="ispressed" value="true"> <setter targetname="border" property="background" value="{binding mousepressedbackground,relativesource={relativesource templatedparent}}"/> <setter targetname="txt" property="foreground" value="{binding mousepressedforeground,relativesource={relativesource templatedparent}}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </trigger> <trigger property="buttontype" value="icon"> <setter property="cursor" value="hand"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type local:buttonex}"> <border width="{templatebinding width}" height="{templatebinding height}"> <image x:name="img" verticalalignment="center" horizontalalignment="center" source="{templatebinding icon}" stretch="none"/> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="opacity" value="0.8"/> </trigger> <trigger property="ispressed" value="true"> <setter property="opacity" value="0.9"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </trigger> <trigger property="buttontype" value="text"> <setter property="cursor" value="hand"/> <setter property="foreground" value="#002c99"/> <setter property="mouseoverforeground" value="#ff2c99"/> <setter property="mousepressedforeground" value="#002c99"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type local:buttonex}"> <textblock x:name="txt" text="{templatebinding content}" foreground="{templatebinding foreground}" verticalalignment="center" horizontalalignment="center"/> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="foreground" value="{binding mouseoverforeground,relativesource={relativesource templatedparent}}" targetname="txt"/> </trigger> <trigger property="ispressed" value="true"> <setter property="foreground" value="{binding mousepressedforeground,relativesource={relativesource templatedparent}}" targetname="txt"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </trigger> <trigger property="buttontype" value="icontext"> <setter property="cursor" value="hand"/> <setter property="foreground" value="#555"/> <setter property="mouseoverforeground" value="#555"/> <setter property="mousepressedforeground" value="#555"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type local:buttonex}"> <border> <stackpanel orientation="horizontal" horizontalalignment="center"> <image source="{templatebinding icon}" stretch="none"/> <textblock x:name="txt" text="{templatebinding content}" foreground="{templatebinding foreground}" verticalalignment="center" horizontalalignment="center"/> </stackpanel> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="foreground" value="{binding mouseoverforeground,relativesource={relativesource templatedparent}}" targetname="txt"/> </trigger> <trigger property="ispressed" value="true"> <setter property="foreground" value="{binding mousepressedforeground,relativesource={relativesource templatedparent}}" targetname="txt"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </trigger> </style.triggers> </style> |
然后就可以引用該控件了：
|
1
2
3
4
5
6
7
8
|
<grid> <wrappanel> <local:buttonex content="信息" width="75" height="25" margin="10" buttontype="normal"/> <local:buttonex icon="/images/button1.png" margin="10" buttontype="icon"/> <local:buttonex content="文字按鈕" margin="10" buttontype="text"/> <local:buttonex content="圖文按鈕" icon="/images/adshut.png" margin="10" buttontype="icontext"/> </wrappanel> </grid> |
效果如下：
至此已經(jīng)完成button控件的擴(kuò)展功能，如果想要添加動(dòng)畫(huà)或者設(shè)置圖標(biāo)的位置和邊距等，可以自己另外添加依賴屬性來(lái)擴(kuò)展。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)服務(wù)器之家的支持。
原文鏈接：http://www.cnblogs.com/xiaomingg/p/8699125.html
