wpf采用xaml文件的方式来向开发者提供绘制界面的平台。本篇我将根据自己在编写软件过程中的经历,向大家介绍一下如果自定义按钮的样式。通过这些介绍,你可以做出带圆角的按钮,带图标的按钮,颜色渐变的按钮,以及设置在鼠标经过,以及点击时按钮的样式。
(1)先看效果:
第一个是带圆角和渐变背景的按钮(蓝色是界面背景,与按钮无关):
第二个是半透明按钮:类似于qq的关闭按钮(同样墨绿色和粉红色是界面背景上的与按钮无关)
正常状态 (从上到下由于墨绿色变透明) 鼠标停留后的样式
(背景从上到下由红变透明)
第三种是带图标的按钮(蓝色背景同样是界面背景,与按钮无关)
正常状态 鼠标停留后的样式
(边框发光) 点击后的样式
(边框发黑)
(2)为达到上面的效果你需要做的仅仅是在按钮的xaml代码中添加一段模板代码,然后根据自己的需要对代码进行一些修改:
原始代码:
第一种效果按钮的代码:
第二种效果代码:
第三种效果代码:
其实三段代码大同小异,如果你直接要和上述三种按钮一样的样式,直接复制代码即可,如果需要详细了解以便设计自己的按钮样式,则以第一个按钮的代码为例,我们详细研究一下代码各部分的作用。
(3)、代码分析
① <Button x:Name="Button_Login" Content="登 录" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top" Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">
这个是经典的按钮样式,各个属性的具体功能就不再介绍了,但是需要注意的是,和系统默认的button xaml代码不同的地方是后>没有/与之对应的是在这段代码最后应该有来包裹代码,学过标记语言的朋友肯定知道这个。如果没有学习过标记语言,需要稍微了解一下,至少知道它是一种嵌套结构的语言。
②在的下一级标签是<Button.Template> Button.Template >,它的下一级仅嵌套了一个< ControlTemplate >< /ControlTemplate >是一个类似于容器的标记。而它的下一级主要分为两大部分。第一部分是确定按钮上都有哪些东西。如果只需要设置按钮样式而需要添加背景图片呢么只需要一个
其中CornerRadius="8,8,8,8"表示按钮的上下左右圆角,可以通过设置此处的参数来改变按钮的形状。不一定是四个角都是圆角,可以根据自己的需要,对四个角进行设置。最内部的三个GradientStop是用来控制按钮的背景颜色的。Color可以直接指定颜色名称,也可以通过RGB颜色指定。Offset表示该颜色的垂直起始位置。而其后的数字为距离顶端的百分比。这里的GradientStop可以有n多个。用以设置按钮从上到下几中不同的颜色变化上述代码是从0-按钮的0.5处由白变银,05-1处由银变白。而对于第二种样式按钮需要从红色渐变为透明,因此需要两个GradientStop,第一个颜色红色,offset0,第二个transparent(透明),offset1.有了这个可以在按钮任意位置设置任意颜色。
但是如果不仅仅要设置按钮样式,还要为按钮添加背景图片,那么就需要用
也就是说这时候< ControlTemplate >< /ControlTemplate >的第一部分标签是
而
③< ControlTemplate >< /ControlTemplate >的第二部分是按钮响应样式,也就是鼠标停留,或者鼠标点击时按钮的样式,它的标签为<ControlTemplate.Triggers> ControlTemplate.Triggers>
其中包含的是所有的按钮响应样式。其中的每一个响应样式格式为
其中Property用于指示按钮的响应事件类型,Property="UIElement.IsMouseOver"为鼠标停留,Property="ButtonBase.IsPressed"为鼠标按下。而其对应按钮样式的设置方式有两种,如果需要设置按钮颜色,像按钮1一样则内部为如上述代码一样,其样式具体设置方式,与前面按钮默认样式设置一样。而如果仅需要修改边框颜色则可以采用按钮3的方式:
其区别请读者自行研究。
本文是我在绘制软件界面时,通过查阅相关资料,并自行揣测理解所得,其间可能有一下谬误或不完善的地方,忘大家多提意见,大家一起进步!mushao 2014-8-27@hust