WPF-CheckBox(复选框、功能开关)美化

老规矩，先放图

　　

　　

按钮美化背景：

　　由于特殊需求，复选框样式单一，所以我们需要将其按钮重构和美化达到我们的需求

复选框美化思维引导：

图中1为背景色

图中2为边框

图中3为句柄控件组成（path+rectangle）

图4为textblock控件

由此我们可以推算出该控件大致需要border+grid+path+rectangle+textblock这几个控件完成

 1 <style x:key="checkboxstyle"  targettype="{x:type checkbox}">
 2         <setter property="focusvisualstyle" value="{staticresource focusvisual}"/>
 3         <setter property="background" value="{staticresource optionmark.static.background}"/>
 4         <setter property="borderbrush" value="#acacac"/>
 5         <setter property="horizontalalignment" value="center"></setter>
 6         <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/>
 7         <setter property="borderthickness" value="1"/>
 8         <setter property="template">
 9             <setter.value>
10                 <controltemplate targettype="{x:type checkbox}">
11                     <grid x:name="templateroot" width="{templatebinding width}" background="transparent" horizontalalignment="left" snapstodevicepixels="true" margin="0,0,0,-0.333">
12                         <grid.columndefinitions>
13                             <columndefinition width="auto"/>
14                             <columndefinition width="*"/>
15                         </grid.columndefinitions>
16                         <border x:name="checkboxborder"  borderbrush="#acacac"  verticalalignment="center" horizontalalignment="center" borderthickness="1" cornerradius="2" width="22" height="22">
17                             <grid x:name="markgrid" verticalalignment="center" horizontalalignment="center" margin="-1" width="21.666" height="22">
18                                 <path x:name="optionmark" data="m16.000603,1.957344 l7.5364196,14.557344 7.2530439,14.557344 0,8.309296 2.0478247,5.63464 6.8253337,9.741328 13.367244,2.441408e-05 16.000603,1.957344 z" fill="#fffbfbfb" margin="0" opacity="0" stretch="none" verticalalignment="center" height="{templatebinding height}" d:layoutoverrides="width" horizontalalignment="center" width="{templatebinding height}" />
19                                 <rectangle x:name="indeterminatemark" fill="{staticresource optionmark.static.glyph}" margin="0,-0.834" opacity="0" width="auto" height="auto" verticalalignment="stretch" horizontalalignment="stretch"/>
20                             </grid>
21                         </border>
22                         <textblock x:name="contentpresenter" fontsize="{templatebinding fontsize}" text="{templatebinding content}" grid.column="1" focusable="false"  snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="center" horizontalalignment="left" margin="2,0,0,0" fontfamily="iconfont"/>
23                     </grid>
24                     <controltemplate.triggers>
25                         <trigger property="hascontent" value="true">
26                             <setter property="focusvisualstyle" value="{staticresource optionmarkfocusvisual}"/>
27                             <setter property="padding" value="4,-1,0,0"/>
28                         </trigger>
29                         <trigger property="ismouseover" value="true">
30                             <setter property="borderbrush" targetname="checkboxborder" value="#5fb878"/>
31                         </trigger>
32                         <trigger property="isenabled" value="false">
33                             <setter property="background" targetname="checkboxborder" value="{staticresource optionmark.disabled.background}"/>
34                             <setter property="borderbrush" targetname="checkboxborder" value="{staticresource optionmark.disabled.border}"/>
35                             <setter property="fill" targetname="optionmark" value="{staticresource optionmark.disabled.glyph}"/>
36                             <setter property="fill" targetname="indeterminatemark" value="{staticresource optionmark.disabled.glyph}"/>
37                         </trigger>
38                         <trigger property="ispressed" value="true">
39                             <setter property="background" targetname="checkboxborder" value="{staticresource optionmark.pressed.background}"/>
40                             <setter property="borderbrush" targetname="checkboxborder" value="{staticresource optionmark.pressed.border}"/>
41                             <setter property="fill" targetname="optionmark" value="#ffffff"/>
42 
43                             <setter property="fill" targetname="indeterminatemark" value="{staticresource optionmark.pressed.glyph}"/>
44                         </trigger>
45                         <trigger property="ischecked" value="true">
46                             <setter property="opacity" targetname="optionmark" value="1"/>
47                             <setter property="background" targetname="checkboxborder" value="#5fb878"/>
48                             <setter property="borderbrush" targetname="checkboxborder" value="#5fb878"/>
49                             <setter property="opacity" targetname="indeterminatemark" value="0"/>
50                         </trigger>
51                         <trigger property="ischecked" value="{x:null}">
52                             <setter property="opacity" targetname="optionmark" value="0"/>
53                             <setter property="opacity" targetname="indeterminatemark" value="1"/>
54                         </trigger>
55                     </controltemplate.triggers>
56                 </controltemplate>
57             </setter.value>
58         </setter>
59         <setter property="cursor" value="hand"/>
60         <setter property="fontfamily" value="iconfont"/>
61         <setter property="fontsize" value="14"/>
62     </style>

开关按钮美化思维引导图：

图中1为border控件

图2为textblock控件

图3为border控件

由此我们可以得出开关按钮是由checkbox重构出来的并且有border+textblock组合完成

开关按钮代码为：

 1 <style x:key="checkboxswitchstyle" targettype="checkbox">
 2         <setter property="ischecked" value="false"/>
 3         <setter property="cursor" value="hand"/>
 4         <setter property="fontfamily" value="/mestoolintegration;component/fonts/#iconfont"/>
 5         <setter property="background" value="#ffffff"/>
 6         <setter property="template">
 7             <setter.value>
 8                 <controltemplate targettype="checkbox">
 9                     <border width="54" name="checktruebg" height="22" borderthickness="1" background="#ffffff"  cornerradius="10" borderbrush="#acacac" >
10                         <grid>
11                             <border borderthickness="1" background="#acacac" x:name="border" width="20" height="20" cornerradius="9" verticalalignment="center" horizontalalignment="left" margin="0"  >
12                                 <border.rendertransform>
13                                     <translatetransform  x="1"/>
14                                 </border.rendertransform>
15                             </border>
16                             <textblock x:name="txt" text="{templatebinding content}" fontfamily="iconfont"  fontsize="{templatebinding fontsize}" margin="6.996,2.798,0,2.798" verticalalignment="stretch" foreground="#acacac" horizontalalignment="left" d:layoutoverrides="height" >
17                                 <textblock.rendertransform>
18                                     <translatetransform   x="17"></translatetransform>
19                                 </textblock.rendertransform>
20                             </textblock>
21                         </grid>
22                     </border>
23                     <controltemplate.triggers>
24                         <trigger property="ischecked" value="true">
25                             <setter property="background" targetname="checktruebg"  value="#5fb878"/>
26                             <setter property="foreground" targetname="txt"  value="#ffffff"/>
27                             <setter property="background" targetname="border"  value="#ffffff"/>
28                             <setter property="text" targetname="txt" value="{binding tag,relativesource={relativesource templatedparent}}"/>
29                             <trigger.enteractions>
30                                 <beginstoryboard>
31                                     <storyboard>
32                                         <doubleanimation storyboard.targetname="border" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.x)" to="32" duration="00:00:0.2"/>
33                                         <doubleanimation storyboard.targetname="txt" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.x)" to="0" duration="00:00:0.2"/>
34                                     </storyboard>
35                                 </beginstoryboard>
36                             </trigger.enteractions>
37                             <trigger.exitactions>
38                                 <beginstoryboard>
39                                     <storyboard>
40                                         <doubleanimation storyboard.targetname="border" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.x)" to="0" duration="00:00:0.2"/>
41                                         <doubleanimation storyboard.targetname="txt" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.x)" to="17" duration="00:00:0.2"/>
42                                     </storyboard>
43                                 </beginstoryboard>
44                             </trigger.exitactions>
45                         </trigger>
46                         <trigger property="ischecked" value="false">
47                             <setter property="text" targetname="txt" value="{binding content,relativesource={relativesource templatedparent}}"/>
48                         </trigger>
49                     </controltemplate.triggers>
50                 </controltemplate>
51             </setter.value>
52         </setter>
53     </style>

 注意：

开关按钮比较特殊使用方法：

1 <checkbox  horizontalalignment="left" borderthickness="1,1,0,1" margin="107,242,0,0" style="{dynamicresource checkboxswitchstyle}" verticalalignment="top"  content="off" tag="no" />