通通玩blend美工(1)——荧光Button

简介: 原文:通通玩blend美工(1)——荧光Button  最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...)   看着各位大虾出系列文章貌似挺好玩的,本人耍了2个月的Wpf,有点见解,希望各位看官笑纳。
原文: 通通玩blend美工(1)——荧光Button

  最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...)

  看着各位大虾出系列文章貌似挺好玩的,本人耍了2个月的Wpf,有点见解,希望各位看官笑纳。本系列第一章就先来点简单又实用的吧o(∩_∩)o 哈哈..

最终效果如下:

←点它

 本人一直在做WPF算是第一次做silverlight,这样主要是为了能够在博客里更好的展示成品 。(特别鸣谢银光中国提供的免费silverlight空间)

 

 

1.总体思路


 

分析上面效果--button为一个发光的三角形在MouseOver和click的时候有响应的动画效果...

 发光的三角形:由2个空心三角形构成,其中下面一层那个被加入了BlurEffect效果。

 

 

 2.设计过程


 

 打开blend,新建  silverlight应用程序+网站  (这些我就不浪费口水了) 

 首先我们来画一个等腰三角形的路径..如何让它等腰呢?我们这里利用了一点几何常识....

看到左边工具栏里面的图形

我们先画一个矩形,然后再画一个矩形的内接圆(由于blend对图形绘制时的定位有吸附效果,所以很容易画出内接圆)

 然后用钢笔工具(P)连接3个切点,注意画的时候可以按住shift键来画,这点和PS一样可以让线保持在某几个角度范围,这样线就可以画的很直

可以把圈圈和框框del了,剩下三角形,根据自己需求调好角度和边框粗细,颜色等。(调角度时按shift也有效果哦)

然后我们把画好的三角形再CtrlV、CtrlC复制一份出来,把上面一层的边框颜色改为白色,如下图(有必要说明一下,因为XAML为解释性语言,后面创建的控件会覆盖在前面创建的控件上,这就导致图层结构显示和PS刚好相反,如下图,下面的Path在上面一层图层)

然后我们为下层的三角添加Effect效果,点新建,选BlurEffect.

         

 做好后如下图:

再反复调下面一层三角形的Effect.Radius和边框粗细和颜色,直到自己想要的效果

作为一个Button它有点太大了,我们用选择工具(V)在画布上框选,或在左边树状结构里选中两个Path调节到自己想要的尺寸。

然后把它两加入到一个Grid里面,方法如下图。或者也可以选中两个图形后用快捷键Ctrl+G。

然后右键Grid,构成控件...

我们选择Button确定。

然后我们就发现真的变成Button了也~

我们把Button.Content的内容清空

我们进入编辑Button的模版,选中Button点下图中Grid就可进入

结构如下

我们选Grid,把它的背景色设为任意一个颜色,然后把透明度调为0(如果不这样做的话,空心三角形的内部为空的部分响应不了鼠标事件)

作为一个Button当然要有MouseOver的效果咯。

我们点状态选项栏,选中MouseOver状态,把作为发光虚化的三角形的边框改为另外一个颜色,再添加Normal状态到MouseOver的过度为0.3秒,这样让变化有个过程。如下图

同理,我们添加Pressd状态的样式,这里我们把整个Grid向右稍微移动一点,可以选中grid后用方向键→来调整,这样保证在一条水平线上。同样添加到其他任意状态的过度,如下图。

最后一步,按F5看一下你的成果吧~~!

源码下载:http://files.cnblogs.com/tong-tong/SilverlightApplication1.rar


 

在做上面这个Demo的时候突然有个想法,实施了下,效果不错,就作为耐心看完本教程的朋友的奖励吧~~

 

 

由于silverlight中没有VisualBrush所以实现倒影略显繁琐....

同样附上源码:http://files.cnblogs.com/tong-tong/SilverlightApplication1-%E5%89%AF%E6%9C%AC.rar

感谢各位的围观,喜欢的话,就推荐一下吧~~

 马上要到北京出差,刚毕业第一次出差还是有点兴奋,从小在云南长大的我都没见过可以落到地上的雪,希望到了北京不会被冻成冰雕...囧

目录
相关文章
|
11月前
|
定位技术
【Axure教程】拖拉拽放大缩小和移动元件
【Axure教程】拖拉拽放大缩小和移动元件
|
前端开发 容器
「CSS畅想」七夕寄情,我绘制了一副双色莲花图
用技术实现梦想,用梦想打开创意之门。七夕寄情,我用CSS绘制了一副双色莲花图。
146 1
「CSS畅想」七夕寄情,我绘制了一副双色莲花图
|
前端开发
脑洞大开:如何使用CSS实现自定义圆角虚线框
在CSS中,我们常用`border`来表示一个元素的边框样式,也可以使用`border`来绘制简单的分割线。最近遇到一个项目,需要用虚线来显示元素的边框。初步一看,这不很简单嘛,一行代码搞定`border: 1px dashed #ccc`。自我感觉良好,结果UI的同事直接提刀来了,“这是我想要的效果吗,我要的是……”。没办法,还是老老实实想办法解决自定义的虚线边框。
832 1
脑洞大开:如何使用CSS实现自定义圆角虚线框
|
前端开发 安全
仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️
我之所以将其拿出来分享,一方面觉得它看起来比较酷,也像原作者所说的那样:看起来是个令人生畏的病毒,另一方面觉得作者的编码思路和代码值得了解学习下。
仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️
|
前端开发 JavaScript 容器
如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1064 0
|
前端开发 Web App开发 JavaScript
如何用纯 CSS 创作一个晃动的公告板
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/wjZoGV 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1391 0
|
前端开发 Web App开发 JavaScript
如何创作用纯 CSS 绘制一支栩栩如生的铅笔
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/PaZYBw 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
948 0
|
C# 内存技术
好玩的WPF第二弹:电子表字体显示时间+多彩呼吸灯特效按钮
原文:好玩的WPF第二弹:电子表字体显示时间+多彩呼吸灯特效按钮 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/46457923 我们先来看看Quartz MS字体动态显示系统时间的效果,难度相较于上一篇也要简单许多。
1848 0
|
安全 C# 存储
通通玩blend美工(5)——旋转木马,交互性设计
原文:通通玩blend美工(5)——旋转木马,交互性设计       这一篇偏向于逻辑的比较多,放在这个系列里会不会欠妥呢?在中国交互性设计也是美工的份内职责哦~   所以没有blend基础的人也可以看懂这篇文章,不过要用到初中的几何知识哦~亲     相信很多人都在手机或者网页上或者K...
969 0