打印

运用Expression Design在Silverlight中模拟阴影

Silverlight没有位图滤镜,同样的问题存在于WPF程序。有一些可以用png来模拟,但是有一些可以使用xaml。下面的一个例子展示一个可行的(并不一定是最好的)阴影滤镜,依靠Expression design将矢量内容输出。

第一步,打开Expression design并且创建一个图形,并且复制这个对象。做成一个带有圆角的矩形。



下一步,隐藏上面的矩形,并将下面的矩形的笔触效果改成位图喷枪。你可以改动笔刷的大小,得到最适合的外观效果。通常设置12-20px之间。笔刷的颜色设置(注意区分于填充)可以改变笔刷颜色。当然,你可以很自由的玩转各种其它的笔刷,做一些个性的效果。



得到的形状效果如下:



注意,我在稍后的屏幕截图里,将笔刷的宽度由13.33调整到了20。

现在,将隐藏的UI元素显现,并用你习惯的方式查看整体的效果。我通常调整到实际的尺寸(100%)。



如果效果不错,就可以输出XAML到Silverlight了.这里的关键是确保你的笔刷笔触是向量的。
接下来还可以设置一些细节,图像质量与XAML大小的权衡。在这个例子里,你可以设置比较低的质量。



最后的XAML会包含相当数量的路径(Path)并带有透明度变化,模拟一个边缘渐变的阴影。

还是其它的很多方法你可以尝试,同样可以达成需要的效果。

例子的所有资源下载(.design+sl Project)

PS:发现Expression Design的一个优点,如果正在使用中的Design,因为系统故障导致重启、假死等,再次打开Design会恢复到原来的工作状态,文件不会丢失。

还有一个Bug,在第二步改变矩形笔刷后,外观从圆角变成了直角。如下图。



Mdong



[ 本帖最后由 langmuir 于 2008-2-27 22:29 编辑 ]
本帖最近评分记录
  • Fdream 威望 +1 原创内容 2008-1-29 14:08