通通玩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
感谢各位的围观,喜欢的话,就推荐一下吧~~
马上要到北京出差,刚毕业第一次出差还是有点兴奋,从小在云南长大的我都没见过可以落到地上的雪,希望到了北京不会被冻成冰雕...囧
转载于:https://www.cnblogs.com/lonelyxmas/p/9411017.html
通通玩blend美工(1)——荧光Button相关推荐
- 通通玩blend美工(6)下——仿iPhone滚动选择器的ListBox(交互逻辑)
原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...
- 通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~
通通玩blend美工(8)--动态绘制路径动画,画出个萌妹子~ 原文:通通玩blend美工(8)--动态绘制路径动画,画出个萌妹子~ 2年前我在玩Flex的时候就一直有一个疑问,就是如何来实现一个蚊香 ...
- 通通玩blend美工(5)——旋转木马,交互性设计
这一篇偏向于逻辑的比较多,放在这个系列里会不会欠妥呢?在中国交互性设计也是美工的份内职责哦~ 所以没有blend基础的人也可以看懂这篇文章,不过要用到初中的几何知识哦~亲 相信很多人都在手机或者网页上 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日) 本周Silverlight学习资源更新 银光中国网友原创:Silverlight中获取 ...
- oracle替换图片颜色,ps替换颜色教程
[发布] 用于读写ICO图标文件的 Photoshop 插件 这是我为 Photoshop 编写的一个文件格式插件,IcoFormat,用于读写 Windows 图标文件(扩展名为ICO, CUR). ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(3月26日-3月31日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(3月26日-3月31日) 本周Silverlight学习资源更新 Silverlight性能优化纪要-原作者Jo ...
- 博客园电子期刊2012年10月刊发布啦
期刊访问网址:http://emag.cnblogs.com/2012/CNBlogsEmag201210.html.以下为本期期刊内容: 博客园电子期刊 No58.2012年10月刊 推荐新闻 一场 ...
- HTML基础部分(1)字体,照片,链接
网页截图: 代码: <!DOCTYPE html> <html lang="en"> <head><!--头部信息!--><m ...
- 004_推箱子-游戏逻辑
1. 游戏逻辑 1.1. 定义初始化地图变量 1.2. 定义活动地图, 因为人物每移动一次, 地图都发生了变化 1.3. 坐标类, 定义人物位置 1.4. 定义当前人物坐标变量 1.5. 绘制场景时, ...
- 003_推箱子-事件
1. 事件方法 1.1. 新建事件方法 1.2. 键盘按键值对象 1.3. 初始化事件方法 1.4. 给body元素添加按键方法 1.5. 添加事件方法, 可以传递参数 1.6. 下一关卡方法 1.7 ...
最新文章
- 前端工程师现在需要掌握的是什么?
- 算法笔记-经典链表操作案例
- 重复调用的代码块——方法
- 构建一个LVS-DR模型的高性能集群,并实现Nginx、PHP、MySQL分离
- VisualStudio2017下载与安装教程详解
- SAP Commerce Cloud,通过 ycommercewebservices OCC APIs 进行结账的一个技术限制
- SAP CRM enterprise search index调试细节
- 在ubunut下使用pycharm和eclipse进行python远程调试
- kafka php 0.8,php5.6 centos7 kafka0.8.1
- Linux 下如何查询 tomcat 的安装目录
- 克隆安装oracle,Oracle 之 Cloning $oracle_home (克隆安装oracle软件)
- 二 SVN代码冲突的解决
- 基于容器服务 ACK 发行版打造 CNStack 社区版
- 电脑同时上内外网——设置教程(附内外网优先级设置)
- 什么是计算机?计算机的硬件系统组成有哪些?
- Ribbon停止维护
- (转帖)物流行业:JIT,VMI模式
- Unity实现相机漫游功能
- 【C语言】数组(一维数组、二维数组)
- 嵌入式新闻早班车-第14期
热门文章
- (3)评价模型-分析总和
- (6)机器学习_支持向量机
- 1、最小二乘回归、Lasso、岭回归
- Caffe傻瓜系列(8):命令行解析
- 斯坦福发布最新NLP处理工具stanfordnlp体验
- opencv引起的、破坏了电脑系统环境变量的处理办法
- java工程师写html_java工程师_基础_阶段一_HTML笔记篇
- 2021-06-16volatile的三种特性
- 在计算机中 用于完成系统配置的文件是,历年真题:全国2015年4月自考02323操作系统概论考试试卷以及答案...
- dj打碟怎么学_学DJ打碟怎么提高学习进度