一、先用path画一下轮廓
|
1
2
3
4
5
6
7
|
<path stroke="red" strokethickness="1" margin="10" strokedashcap="round">
<path.data>
<geometrygroup>
<pathgeometry figures="m 4,40 a 16,13 0 1 1 10,45 l 3,48 z" />
</geometrygroup>
</path.data>
</path>
|
|
1
2
3
4
5
6
7
8
9
10
|
<path stroke="red" strokethickness="1" strokedashcap="round" margin="50">
<path.data>
<geometrygroup>
<pathgeometry figures="m 12,30 a 6,10 0 1 1 18,30 l 30,40 l 30,45 l 0,45 l 0,40z" />
<pathgeometry figures="m 25,25 l 35,25"/>
<pathgeometry figures="m 28,30 l 35,30"/>
<pathgeometry figures="m 32,35 l 35,35"/>
</geometrygroup>
</path.data>
</path>
|
路径图如下
二、将路径应用的样式里
|
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
|
<!--聊天按钮的样式-->
<style x:key="chatstyle" targettype="{x:type radiobutton}">
<setter property="focusvisualstyle" value="{staticresource buttonfocusvisual}"/>
<setter property="background" value="transparent"/>
<setter property="borderbrush" value="transparent"/>
<setter property="borderthickness" value="0"/>
<setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/>
<setter property="horizontalcontentalignment" value="center"/>
<setter property="verticalcontentalignment" value="center"/>
<setter property="padding" value="1"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type radiobutton}">
<border>
<path x:name="btnpath" strokethickness="1" stroke="gray" fill="#ff3e3e40">
<path.data>
<geometrygroup>
<pathgeometry figures="m 4,40 a 16,13 0 1 1 10,45 l 3,48 z" />
</geometrygroup>
</path.data>
</path>
</border>
<controltemplate.triggers>
<trigger property="ischecked" value="true">
<setter property="fill" value="#ff14d212" targetname="btnpath"/>
<setter property="stroke" value="#ff14d212" targetname="btnpath"/>
</trigger>
<trigger property="ismouseover" value="true">
<setter property="stroke" value="white" targetname="btnpath"/>
</trigger>
<multitrigger>
<multitrigger.conditions>
<condition property="ischecked" value="true"/>
<condition property="ismouseover" value="true"/>
</multitrigger.conditions>
<multitrigger.setters>
<setter property="stroke" value="#ff14d212" targetname="btnpath"/>
</multitrigger.setters>
</multitrigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
<!--通讯录的样式-->
<style x:key="friendstyle" targettype="{x:type radiobutton}">
<setter property="focusvisualstyle" value="{staticresource buttonfocusvisual}"/>
<setter property="background" value="transparent"/>
<setter property="borderbrush" value="transparent"/>
<setter property="borderthickness" value="0"/>
<setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/>
<setter property="horizontalcontentalignment" value="center"/>
<setter property="verticalcontentalignment" value="center"/>
<setter property="padding" value="1"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type radiobutton}">
<border>
<path x:name="btnpath" strokethickness="1" stroke="gray" fill="#ff3e3e40">
<path.data>
<geometrygroup>
<pathgeometry figures="m 12,30 a 6,10 0 1 1 18,30 l 30,40 l 30,45 l 0,45 l 0,40z" />
<pathgeometry figures="m 25,25 l 35,25"/>
<pathgeometry figures="m 28,30 l 35,30"/>
<pathgeometry figures="m 32,35 l 35,35"/>
</geometrygroup>
</path.data>
</path>
</border>
<controltemplate.triggers>
<trigger property="ischecked" value="true">
<setter property="fill" value="#ff14d212" targetname="btnpath"/>
<setter property="stroke" value="#ff14d212" targetname="btnpath"/>
</trigger>
<trigger property="ismouseover" value="true">
<setter property="stroke" value="white" targetname="btnpath"/>
</trigger>
<multitrigger>
<multitrigger.conditions>
<condition property="ischecked" value="true"/>
<condition property="ismouseover" value="true"/>
</multitrigger.conditions>
<multitrigger.setters>
<setter property="stroke" value="#ff14d212" targetname="btnpath"/>
</multitrigger.setters>
</multitrigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
|
看下效果图
注意要点有几个：
1、path原来必须要有填充，也就是说fill必须要有值，否则会认为是透明，点击不到。
2、一定要设置multitrigger，否则当button被选中的时候，鼠标划过，依然会变白色。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.cnblogs.com/ZXdeveloper/archive/2016/10/25/5997372.html