WPF micro-Chat and Address Book button style code sharing _c# Tutorial

First, use path to draw the outline

<path stroke= "Red" strokethickness= "1" margin= "ten" 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= "M" >
  <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>

The path map is as follows

Second, the path applied to the style

 <!--chat button style--> <style x:key= "Chatstyle" targettype= "{x:type RadioButton}" > <setter property= "Focusvis
  Ualstyle "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}}"/> Property= "Horizontalcontentalignment" value= "Center"/> <setter property= "Verticalcontentalignment"
    Center "/> <setter property=" Padding "value=" 1 "/> <setter property=" Template "> <Setter.Value> <controltemplate targettype= "{x:type RadioButton}" > <Border> <path x:name= "Btnpath" Strokethi ckness= "1" stroke= "Gray" fill= "#FF3E3E40" > <Path.Data> <GeometryGroup> <pathgeom Etry 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" Val
      Ue= "#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 "true" Value=
       T </MultiTrigger.Conditions> <MultiTrigger.Setters> <setter property= "Stroke" value= "#FF14D212 "Targetname=" Btnpath "/> </MultiTrigger.Setters> </MultiTrigger> </controltemplate.tri
    Ggers></ControlTemplate> </Setter.Value> </Setter> </Style> <!--address Book 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 "Valu E= ' {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> <controlt Emplate targettype= "{x:type RadioButton}" > <Border> <path x:name= "Btnpath" strokethickness= "1" Stro
        Ke= "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&
     Gt </Border> <ControlTemplate.Triggers> <trigger property= "ischecked" value= "true" > <s Etter property= "Fill" value= "#FF14D212" targetname= "Btnpath"/> <setter property= "Stroke" value= "#FF14D212" Ta  Rgetname= "Btnpath"/> </Trigger> <trigger property= "IsMouseOver" value= "true" > <setter Property= "Stroke" value= "white" targetname= "Btnpath"/> </Trigger> <MultiTrigger> <mu ltitrigger.conditions> <condition property= "ischecked" value= "true"/> <condition Property= "IsM Ouseover "Value= "true"/> </MultiTrigger.Conditions> <MultiTrigger.Setters> <setter property= Stro Ke "value=" #FF14D212 "targetname=" Btnpath "/> </MultiTrigger.Setters> </MultiTrigger> <


 /controltemplate.triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

Look at the effect chart

Note that there are several points:

1, path original must have fill, that is to say, fill must have a value, otherwise it will be considered transparent, can not click.

2, must set the MultiTrigger, otherwise when the button is selected, the mouse across, will still become white.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.