老规矩，先放图
按钮美化背景：
由于特殊需求，复选框样式单一，所以我们需要将其按钮重构和美化达到我们的需求
复选框美化思维引导：
图中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" />
黄山市民网：https://www.huangshanshimin.com/
