自制的WPF中Button的Style
最近做的一个项目,主要是关注用户体验,所以视图层用到了WPF来增加用户使用时候的新鲜感,自然传统的控件样式是不能令人满意的,所以就自己做了一个Button的Style....
这个Style的功效...就是把我们平时见到的方形的Button
1.做成了一个圆形的(这个功能要做到蛮容易的)
2.这个圆形分两层,分别用渐变色表示(可调)
3.这个圆形的底层有一个背景(背景颜色必须填充,不知道为何 - - 其实我这个例子用不到这个颜色,不过没有那个Ellipse.Fill它就不让我编译通过)
4.这个圆形还有一个顶层,用来放入这个Button的Content
5.这个Button当鼠标移入移出时...可以渐变色(动画效果的)
6.这个Button当鼠标移入移出时...有光晕产生(同上、移出时是消失)——这个功能折腾了我一个小时的样子,因为最初的光晕是方形的...(原始Border的形状.....)
7.这个Button按下之后给用户一种按下去的感觉...
其实整个东西我们现在做的这套系统用不到上面所有的效果 - - 权当熟悉WPF的Style了...
把源码贴出来,分享一下吧 - - 我没查,不知道国内有没有这样的源码...
颜色很恶心,想要漂亮的请自己调整
还有Content的效果也能自己写一些Property加进去
就定义了三种常用事件,可以根据需要多添加一些事件进去
感谢楼下几位朋友的评论,我再补充一些吧
1、奇形怪状的Button
那就是只要你愿意,你将这个代码中的Ellipse替换一下(比如Polygon),你就可以做出各种形状的Button(比如五角星型)
还有,若是使用BLEND,就更加强大了,你只要在BLEND里手绘出一个图形,然后把那段代码替换进这个Style里面就能做出更加“怪异”的Button了。
还有一些其他的特性,比如其实最下层的那个Ellipse我没有用到,但是你可以通过变更它的大小和Opacity来做出一个三层的按钮
然后也可以添加一些特效(我这里的特效是outerGlowBitMapEffect——光晕),都是比较灵活的,只要把我这串代码的模式掌握了,基本上以后什么样的Button都可以信手拈来
2、如何在Button里放入图片(普通的Winform的Button直接就有这个属性,但是WPF的Button不支持)
最简单的方案就是放入一个<ViewBox>,再在里面放入一个<Image>就可以。
3、特殊的Brush
其实WPF中定义了不少的刷子,比如VisualBrush,ImageBrush,DrawingBrush,这些刷子要是使用得当可以有各种各样的功用,已经不仅仅局限于用在Button上了,当然,要是你希望把Button做个倒影,那就要使用VisualBrush了~
< Style x:Key ="buttonTemplate" TargetType ="Button" >
<!-- 修改模板属性 -->
< Setter Property ="Template" >
< Setter.Value >
<!-- 控件模板 -->
< ControlTemplate TargetType ="Button" >
<!-- 只有Grid才能装下这么多Child -->
< Grid >
<!-- 带特效的底层背景 -->
< Border x:Name ="back" Opacity ="0.8" CornerRadius ="2" >
< Border.BitmapEffect >
< OuterGlowBitmapEffect Opacity ="0.8" GlowSize ="0" GlowColor ="Red" />
</ Border.BitmapEffect >
< Ellipse Width ="49" Height ="49" >
< Ellipse.Fill >
Red
</ Ellipse.Fill >
</ Ellipse >
<!-- 按钮呈圆形 -->
</ Border >
< Ellipse x:Name ="outerCircle" Width ="50" Height ="50" >
< Ellipse.Fill >
< LinearGradientBrush StartPoint ="0,0" EndPoint ="0,1" >
< GradientStop Offset ="0" Color ="DarkOliveGreen" />
< GradientStop Offset ="1" Color ="Azure" />
</ LinearGradientBrush >
</ Ellipse.Fill >
</ Ellipse >
< Ellipse Width ="40" Height ="40" >
< Ellipse.Fill >
< LinearGradientBrush StartPoint ="0,0" EndPoint ="0,1" >
< GradientStop Offset ="0" Color ="White" />
< GradientStop Offset ="1" Color ="Transparent" />
</ LinearGradientBrush >
</ Ellipse.Fill >
</ Ellipse >
<!-- 按钮内容 -->
< Border >
< TextBlock x:Name ="content" HorizontalAlignment ="Center" VerticalAlignment ="Center" Text =" {TemplateBindingContent} " >
</ TextBlock >
</ Border >
</ Grid >
<!-- 触发器 -->
< ControlTemplate.Triggers >
< Trigger Property ="Button.IsMouseOver" Value ="True" >
< Trigger.EnterActions >
< BeginStoryboard >
< Storyboard >
< DoubleAnimation To ="10" Duration ="0:0:0.2" Storyboard.TargetName ="back" Storyboard.TargetProperty ="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
< ColorAnimation To ="#4FFF" BeginTime ="0:0:0.2" Duration ="0:0:0.2" Storyboard.TargetName ="outerCircle" Storyboard.TargetProperty ="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
< ColorAnimation To ="#3FFF" BeginTime ="0:0:0.2" Duration ="0:0:0.2" Storyboard.TargetName ="outerCircle" Storyboard.TargetProperty ="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.EnterActions >
< Trigger.ExitActions >
< BeginStoryboard >
< Storyboard >
< DoubleAnimation Duration ="0:0:0.2" Storyboard.TargetName ="back" Storyboard.TargetProperty ="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
< ColorAnimation Duration ="0:0:0.2" Storyboard.TargetName ="outerCircle" Storyboard.TargetProperty ="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
< ColorAnimation Duration ="0:0:0.2" Storyboard.TargetName ="outerCircle" Storyboard.TargetProperty ="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.ExitActions >
</ Trigger >
< Trigger Property ="Button.IsPressed" Value ="True" >
< Setter Property ="RenderTransform" >
< Setter.Value >
< ScaleTransform ScaleX =".9" ScaleY =".9" />
</ Setter.Value >
</ Setter >
< Setter Property ="RenderTransformOrigin" Value =".5,.5" />
</ Trigger >
</ ControlTemplate.Triggers >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
注:本人使用VS2008时,有时XAML设计器会报错,但是能够编译通过,所以有些情况下无视就好,估计是MS的小BUG....