WPF-按钮美化
程序员文章站
2022-04-08 23:05:35
我们不多哔哔,先放图: 美化按钮背景: 当我们用系统默认的按钮风格似乎太老套,而且不太美观,某些情况下我们需要对按钮进行美化和重绘,只有这样才能满足我们的需要 按钮美化思维引导: 图中1 为控件Border 途中2 为ContentPresenter(也可以用TextBook) 由此可见 按钮时有 ......
我们不多哔哔,先放图:
美化按钮背景:
当我们用系统默认的按钮风格似乎太老套,而且不太美观,某些情况下我们需要对按钮进行美化和重绘,只有这样才能满足我们的需要
按钮美化思维引导:
图中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>
上一篇: 是衣服在捣乱么
下一篇: 中国人倒贴“福”字的典故,与马皇后有关