WeChat chat and address book button styles, address book button styles

Chat and address book button styles, address book button styles

1. Draw a contour with 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>

The path is as follows:

2. Apply the path to the style

<! -- Chat button Style --> <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. controlTextBrushKe Y }}"/> <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 a 16,13 0 1 ,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. 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> <! -- 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" 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 a 6, 10 0 1 1 18, 30 L 30, 40 L 30, 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. 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>

Check

Note the following points:

1. The Path must have a Fill, that is, the Fill must have a value. Otherwise, it will be regarded as transparent and cannot be clicked.

2. Be sure to set MultiTrigger. Otherwise, when the button is selected, the mouse will still turn white.