WPF自定义控件与样式-自定义按钮(Button)
一、前言
程序界面上的按钮多种多样,常用的就这几种:普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。
二、固定样式的按钮
固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用,按钮整体样式不需要做大的改动。
2.1 普通按钮-扁平化风格
先看效果:
定义Button的样式,详见代码:
<Style x:Key="BtnInfoStyle" TargetType="Button"><Setter Property="Width" Value="70"/><Setter Property="Height" Value="25"/><Setter Property="Foreground" Value="White"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Background" Value="#43a9c7"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"><TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border" Property="Background" Value="#2f96b4"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="border" Property="Background" Value="#2a89a4"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter> </Style>
引用方法:
<Grid Background="White"><StackPanel Orientation="Horizontal" Margin="10" VerticalAlignment="Top"><Button Style="{StaticResource BtnInfoStyle}" Content="信息" Margin="5 0"/> </Grid>
上述代码实现了Button按钮的扁平化样式,如果你想调整颜色风格,通过修改Background的值可实现默认颜色,鼠标经过颜色以及鼠标按下颜色。
2.2 图标按钮
先看效果:
Button样式的代码和扁平化Button差不多,只是把TextBlock控件替换成了Image控件,另外需要设置Button默认的背景色为透明。废话不多说看代码:
<Style x:Key="BtnImageStyle1" TargetType="Button"><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"><Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Images/button1.png" Stretch="None"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
这里的button1.png需要自己准备图片资源,IsMouseOver和IsPressed的图片资源可自己替换,替换之后能有更丰富的效果呈现。
2.3 图标文字混合按钮
效果:
实现代码:
<Style x:Key="BtnImgTxtStyle1" TargetType="Button"><Setter Property="Foreground" Value="#555"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border><StackPanel Orientation="Horizontal" HorizontalAlignment="Center"><Image Source="Images/adshut.png" Stretch="None"/><TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="#333333" TargetName="Txt"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
2.4 文字按钮和2.3中的图标文字按钮样式差不多,只需要把Image控件去掉就行。
三、复用性高的按钮
- 要想实现复用性高的按钮,就必须新建自定义控件。下面这个实例通过自定义控件实现上述所有效果,并且可以随意更改风格。
- 首先在项目中右键-添加-新建项-自定义控件。
新建自定义控件之后,添加依赖属性。代码如下:
public class ButtonEx : Button{static ButtonEx(){DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof(ButtonEx)));}public ButtonType ButtonType{get { return (ButtonType)GetValue(ButtonTypeProperty); }set { SetValue(ButtonTypeProperty, value); }}public static readonly DependencyProperty ButtonTypeProperty =DependencyProperty.Register("ButtonType", typeof(ButtonType), typeof(ButtonEx), new PropertyMetadata(ButtonType.Normal));public ImageSource Icon{get { return (ImageSource)GetValue(IconProperty); }set { SetValue(IconProperty, value); }}public static readonly DependencyProperty IconProperty =DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ButtonEx), new PropertyMetadata(null));public CornerRadius CornerRadius{get { return (CornerRadius)GetValue(CornerRadiusProperty); }set { SetValue(CornerRadiusProperty, value); }}public static readonly DependencyProperty CornerRadiusProperty =DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ButtonEx), new PropertyMetadata(new CornerRadius(0)));public Brush MouseOverForeground{get { return (Brush)GetValue(MouseOverForegroundProperty); }set { SetValue(MouseOverForegroundProperty, value); }}public static readonly DependencyProperty MouseOverForegroundProperty =DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());public Brush MousePressedForeground{get { return (Brush)GetValue(MousePressedForegroundProperty); }set { SetValue(MousePressedForegroundProperty, value); }}public static readonly DependencyProperty MousePressedForegroundProperty =DependencyProperty.Register("MousePressedForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());public Brush MouseOverBorderbrush{get { return (Brush)GetValue(MouseOverBorderbrushProperty); }set { SetValue(MouseOverBorderbrushProperty, value); }}public static readonly DependencyProperty MouseOverBorderbrushProperty =DependencyProperty.Register("MouseOverBorderbrush", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());public Brush MouseOverBackground{get { return (Brush)GetValue(MouseOverBackgroundProperty); }set { SetValue(MouseOverBackgroundProperty, value); }}public static readonly DependencyProperty MouseOverBackgroundProperty =DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());public Brush MousePressedBackground{get { return (Brush)GetValue(MousePressedBackgroundProperty); }set { SetValue(MousePressedBackgroundProperty, value); }}public static readonly DependencyProperty MousePressedBackgroundProperty =DependencyProperty.Register("MousePressedBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());}public enum ButtonType{Normal,Icon,Text,IconText}
为不同类型按钮设置样式,代码如下:
<Style TargetType="{x:Type local:ButtonEx}"><Style.Triggers><Trigger Property="ButtonType" Value="Normal"><Setter Property="Background" Value="#43a9c7"/><Setter Property="MouseOverBackground" Value="#2f96b4"/><Setter Property="MousePressedBackground" Value="#2a89a4"/><Setter Property="Foreground" Value="White"/><Setter Property="MouseOverForeground" Value="White"/><Setter Property="MousePressedForeground" Value="White"/><Setter Property="BorderBrush" Value="Transparent"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ButtonEx}"><Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True"><TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border" Property="Background" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource TemplatedParent}}"/><Setter TargetName="txt" Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}"/><Setter TargetName="border" Property="BorderBrush" Value="{Binding MouseOverBorderbrush,RelativeSource={RelativeSource TemplatedParent}}"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="border" Property="Background" Value="{Binding MousePressedBackground,RelativeSource={RelativeSource TemplatedParent}}"/><Setter TargetName="txt" Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Trigger><Trigger Property="ButtonType" Value="Icon"><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ButtonEx}"><Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"><Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{TemplateBinding Icon}" Stretch="None"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Opacity" Value="0.8"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Opacity" Value="0.9"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Trigger><Trigger Property="ButtonType" Value="Text"><Setter Property="Cursor" Value="Hand"/><Setter Property="Foreground" Value="#002c99"/><Setter Property="MouseOverForeground" Value="#FF2c99"/><Setter Property="MousePressedForeground" Value="#002c99"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ButtonEx}"><TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Trigger><Trigger Property="ButtonType" Value="IconText"><Setter Property="Cursor" Value="Hand"/><Setter Property="Foreground" Value="#555"/><Setter Property="MouseOverForeground" Value="#555"/><Setter Property="MousePressedForeground" Value="#555"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ButtonEx}"><Border><StackPanel Orientation="Horizontal" HorizontalAlignment="Center"><Image Source="{TemplateBinding Icon}" Stretch="None"/><TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Trigger></Style.Triggers></Style>
然后就可以引用该控件了:
<Grid><WrapPanel><local:ButtonEx Content="信息" Width="75" Height="25" Margin="10" ButtonType="Normal"/><local:ButtonEx Icon="/Images/button1.png" Margin="10" ButtonType="Icon"/><local:ButtonEx Content="文字按钮" Margin="10" ButtonType="Text"/><local:ButtonEx Content="图文按钮" Icon="/Images/adshut.png" Margin="10" ButtonType="IconText"/></WrapPanel></Grid>
效果如下:
至此已经完成Button控件的扩展功能,如果想要添加动画或者设置图标的位置和边距等,可以自己另外添加依赖属性来扩展。
转载于:https://www.cnblogs.com/xiaomingg/p/8699125.html
WPF自定义控件与样式-自定义按钮(Button)相关推荐
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
- WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
原文:WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等, ...
- WPF自定义控件与样式(13)-自定义窗体Window 自适应内容大小消息框MessageBox
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...
- 【转】WPF自定义控件与样式(13)-自定义窗体Window 自适应内容大小消息框MessageBox...
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 自定义Window窗体样式: 基于自定义窗体实现自定义MessageB ...
- 【转】WPF自定义控件与样式(3)-TextBox RichTextBox PasswordBox样式、水印、Label标签、功能扩展...
一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序 ...
- element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
期望通过每一次分享,让技术的门槛变低,落地更容易. -- around 目录 1.行&列融合 2.小计行 3.自定义控件 4.样式自定义 前言 旨在解决项目过程中遇到基于el-table实现项 ...
- android 自定义控件 焦点,Android 自定义Button按钮显示样式(正常、按下、获取焦点)...
现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...
- 微信小程序点击改变css,微信小程序按钮button样式修改自定义
在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了. 插入button按钮并保存后,便可以以预览界面看到一个原始的按钮. 小程序样式修改 默认没有对按钮设置任何样式时 ...
最新文章
- 技巧|利用 Python 实现多任务进程
- t184卡西欧计算机玩游戏,中学回忆——卡西欧 FX-82ES 科学计算器 晒物
- go语言学习---使用os.Args获取简单参数(命令行解析)
- 查看http的并发请求数与其TCP连接状态
- screentogif 屏幕录制生成gif图片的软件安装过程
- jdk读写锁ReentrantReadWriteLock
- Java新特性之Nashorn的实例详解
- linux删除文件未释放空间问题处理
- 各个版本的sqlite-jdbc jar下载链接
- 黑马程序员SpringBoot2全套教程学习笔记
- 《JAVA与模式》— 原型模式
- 三维几何图形创作方法(Geometry3D)之二
- html5 粽子飘落,飘落的丁香花阅读*
- PC 护眼模式(凑合用)
- 嵌入式linux音频播放器设计,基于嵌入式Linux下Madplay音频播放器设计论文.docx
- Java8新特性之Joining
- 广州蔬菜配送公司如何做,食材配送生意如何起步?这些行业内容你要知道
- 阵列麦克风声音定位-代码python实现-二维与三维声音定位
- Base64加密算法原理、具体例子及Java代码
- 医院就诊系统(C++队列)源代码
热门文章
- Atitit 方法运行器methodRunnerV3 方法虚拟机 vm 新特性 java -cp C:\0wkspc\methodRunner\bin -Djava.ext.dirs=
- atitti 提升稳定性的艺术之程序代码级别稳定性的艺术 attialx著 艾提拉著 s420.docx 1. 前言	1 2. 为什么会发生稳定性问题	1 2.1. 单点故障(单点故障率较高)	1
- Atitit 知识点 文章 框架 结构 attilax总结.docx
- 互联网创业原则与创业模式attilax大总结
- Atitit.软件GUI按钮与仪表盘(01)--js区-----js格式化的使用
- paip.提升安全性-------用户口令密码的检测与生成
- (转)采访 | ETHNews 对 Vitalik Buterin 的独家专访
- 智能制造的灾备问题如何解决? | 凌云时刻
- 易华录数据湖事业部安全中心招聘中高级安全工程师2-4人
- 2018年度中国LC3盛大召开!