自制的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了~
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!--定义按钮样式-->
<Stylex:Key="buttonTemplate"TargetType="Button">
<!--修改模板属性-->
<SetterProperty="Template">
<Setter.Value>
<!--控件模板-->
<ControlTemplateTargetType="Button">
<!--只有Grid才能装下这么多Child-->
<Grid>
<!--带特效的底层背景-->
<Borderx:Name="back"Opacity="0.8"CornerRadius="2">
<Border.BitmapEffect>
<OuterGlowBitmapEffectOpacity="0.8"GlowSize="0"GlowColor="Red"/>
</Border.BitmapEffect>
<EllipseWidth="49"Height="49">
<Ellipse.Fill>
Red
</Ellipse.Fill>
</Ellipse>
<!--按钮呈圆形-->
</Border>
<Ellipsex:Name="outerCircle"Width="50"Height="50">
<Ellipse.Fill>
<LinearGradientBrushStartPoint="0,0"EndPoint="0,1">
<GradientStopOffset="0"Color="DarkOliveGreen"/>
<GradientStopOffset="1"Color="Azure"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<EllipseWidth="40"Height="40">
<Ellipse.Fill>
<LinearGradientBrushStartPoint="0,0"EndPoint="0,1">
<GradientStopOffset="0"Color="White"/>
<GradientStopOffset="1"Color="Transparent"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!--按钮内容-->
<Border>
<TextBlockx:Name="content"HorizontalAlignment="Center"VerticalAlignment="Center"Text="{TemplateBindingContent}">
</TextBlock>
</Border>
</Grid>
<!--触发器-->
<ControlTemplate.Triggers>
<TriggerProperty="Button.IsMouseOver"Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationTo="10"Duration="0:0:0.2"Storyboard.TargetName="back"Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/>
<ColorAnimationTo="#4FFF"BeginTime="0:0:0.2"Duration="0:0:0.2"Storyboard.TargetName="outerCircle"Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/>
<ColorAnimationTo="#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>
<DoubleAnimationDuration="0:0:0.2"Storyboard.TargetName="back"Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/>
<ColorAnimationDuration="0:0:0.2"Storyboard.TargetName="outerCircle"Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/>
<ColorAnimationDuration="0:0:0.2"Storyboard.TargetName="outerCircle"Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<TriggerProperty="Button.IsPressed"Value="True">
<SetterProperty="RenderTransform">
<Setter.Value>
<ScaleTransformScaleX=".9"ScaleY=".9"/>
</Setter.Value>
</Setter>
<SetterProperty="RenderTransformOrigin"Value=".5,.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
注:本人使用VS2008时,有时XAML设计器会报错,但是能够编译通过,所以有些情况下无视就好,估计是MS的小BUG....
分享到:
相关推荐
bootstrap-wpf-style-master 样式代码 。。。。。。。。
WPF基础入门 3 1. WPF基础之体系结构 3 2. WPF基础之XAML 9 3. WPF基础之基元素 23 4. WPF基础之属性系统 26 5. WPF基础之路由事件 33 6. WPF基础之布局系统 46 7. WPF基础之样式设置和模板化 51 8. 详谈WPF开发中的...
一个简单的WPF程序
c#-的WPF---MVVM例子,大家共同学习
WPF入门增-删-改-查,附带数据库 SQL 2008 R2 及以上数据库,附脚本。 欢迎下载使用。保证发誓绝对能用,祝您早日入门。
wpf入门文档-1
WPF.UI-master.zip
1、海康威视SDK版本:CH-HCNetSDK(Windows32)V5.2.1.3_build20160513 2、wpf实现Demo - 实时预览,包括预览、截图、录像、PTZ控制
学习在WPF当中如何使用Style定制TabControl的样式,包含TabControl的页面选项切换的简单动画效果。原始代码网上找的,我改了一些代码。
本站帖子中的EXE程序源代码 - MyAudioPlayer.exe - 自制 WPF 音乐播放器 - https://blog.csdn.net/qq_40543071/article/details/123100938?spm=1001.2014.3001.5
WPF样式 WpfToolkit-master
wpf资料下载---mtkos.com 最全的嵌入式编程资料下载
WPF的基本空间历程,使用.net core3.0.1版本
WPF收集程序
wpf-wcf-wf整合开发实例--有利于理解wpf-wcf-wf的整合
WPF应用开发-教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案合集最新课件汇编.ppt
wpf扭动环--------不规则按钮
wpf charts源码,D源码,图书:practical-wpf-charts-graphics-master
wpf-datagrid-access DB,可以更新数据到Access数据库
WPF基础入门