blend

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

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

终于效果例如以下：

←点它

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

1.整体思路

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

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

2.设计过程

打开blend，新建 silverlight应用程序+站点 （这些我就不浪费口水了）

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

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

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

然后用钢笔工具（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看一下你的成果吧~~！

源代码下载：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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/118147.html原文链接：https://javaforall.cn