当前位置： 移动技术网 > IT编程>开发语言>c# > WPF微信聊天和通讯录按钮样式代码分享

WPF微信聊天和通讯录按钮样式代码分享

2019年07月18日  | 移动技术网IT编程  | 我要评论

一、先用path画一下轮廓

<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>

<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>

路径图如下

二、将路径应用的样式里

 <!--聊天按钮的样式-->
 <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被选中的时候，鼠标划过，依然会变白色。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网