wpf自定义按钮样式

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 >是一个类似于容器的标记。而它的下一级主要分为两大部分。第一部分是确定按钮上都有哪些东西。如果只需要设置按钮样式而需要添加背景图片呢么只需要一个标签即可。可以参看第一个,第二个按钮,他们在< 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


你可能感兴趣的:(c#,界面,c#,界面,xaml,按钮)