blend

blend

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

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

终于效果例如以下:

←点它

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

 

 

1.整体思路


 

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

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

 

 

 2.设计过程


 

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

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

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

blend

我们先画一个矩形,然后再画一个矩形的内接圆(因为blend对图形绘制时的定位有吸附效果,所以非常easy画出内接圆)

blend

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

blend

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

blend

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

blend

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

blend         blend

 做好后例如以下图:

blend

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

blend

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

blend

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

blend

然后右键Grid,构成控件…

blend

我们选择Button确定。

blend

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

blend

我们把Button.Content的内容清空

blend

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

blend

结构例如以下

blend

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

blend

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

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

blend

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

blend

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

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


 

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

 

 

因为silverlight中没有VisualBrush所以实现倒影略显繁琐….

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118147.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • textview可复制_长按复制是怎么做的

    textview可复制_长按复制是怎么做的前段时间因为项目需求实现TextView长按复制的功能,特意上百度差了一下有不少实现这个功能的方法,隔了好久也怕忘了,总结一下:先推荐目前感觉最好用的方法:在布局文件的TextView控件属性中增加一句话:android:textIsSelectable="true",不过这个方法需要只有androidsdk11起才支持,v11以下则不行了。不过现在的版本这个应该也不成问题了xml文件中可以设…

  • OpenWrt添加启动脚本

    OpenWrt添加启动脚本

  • Mac Tensorflow Pycharm安装

    Mac Tensorflow Pycharm安装Python3.6,PyCharm2020.3.3anaconda旧版本下载地址及与python各版本对应关系anaconda旧版本下载地址及与python各版本对应关系_heivy的博客-CSDN博客_anaconda旧版本anaconda老版本下载的方法anaconda老版本下载的方法_weixin_33759269的博客-CSDN博客安装参考:基于mac系统的TensorFlow安装以及pycharm配置-简书参考上述链接安装完毕后:…

  • 正则表达式

    正则表达式

  • 音视频编解码技术(一):MPEG-4/H.264 AVC 编解码标准

    音视频编解码技术(一):MPEG-4/H.264 AVC 编解码标准一、H264概述H.264,通常也被称之为H.264/AVC(或者H.264/MPEG-4AVC或MPEG-4/H.264AVC)1.H.264视频编解码的意义H.264的出现就是为了创

  • 中小型企业局域网设计

    中小型企业局域网设计中小型企业局域网设计                                                        引言 ………………………………………………………………………………2一、公司简介………………………………………………………………………3二、企业需求分析…………………………………………………………………3三、总体设计方案…………………………………

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号