WPF微信聊天和通讯录按钮样式代码分享
一、先用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被选中的时候,鼠标划过,依然会变白色。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
上一篇:C#实现打造气泡屏幕保护效果
栏 目:C#教程
下一篇:C#Url操作类封装、仿Node.Js中的Url模块实例
本文标题:WPF微信聊天和通讯录按钮样式代码分享
本文地址:https://www.xiuzhanwang.com/a1/C_jiaocheng/6209.html
您可能感兴趣的文章
- 01-10C#及WPF获取本机所有字体和颜色的方法
- 01-10微信开放平台之网站授权微信登录功能
- 01-10WPF实现类似360安全卫士界面的程序源码分享
- 01-10C#基于UDP实现的P2P语音聊天工具
- 01-10分享WCF聊天程序--WCFChat实现代码
- 01-10C#制作简单的多人在线即时交流聊天室
- 01-10C#微信开发(服务器配置)
- 01-10WPF实现时钟特效
- 01-10超炫酷的WPF实现Loading控件效果
- 01-10分享一个C#编写简单的聊天程序(详细介绍)
阅读排行
本栏相关
- 01-10C#通过反射获取当前工程中所有窗体并
- 01-10关于ASP网页无法打开的解决方案
- 01-10WinForm限制窗体不能移到屏幕外的方法
- 01-10WinForm绘制圆角的方法
- 01-10C#实现txt定位指定行完整实例
- 01-10WinForm实现仿视频播放器左下角滚动新
- 01-10C#停止线程的方法
- 01-10C#实现清空回收站的方法
- 01-10C#通过重写Panel改变边框颜色与宽度的
- 01-10C#实现读取注册表监控当前操作系统已
随机阅读
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 04-02jquery与jsp,用jquery
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-10C#中split用法实例总结
- 01-10SublimeText编译C开发环境设置
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-11ajax实现页面的局部加载
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-10delphi制作wav文件的方法
- 08-05DEDE织梦data目录下的sessions文件夹有什