通过实例学习Silverlight教程之制作图片特效(一)

概述        自这暑假接触Silverlight一来,个人认为自己提高不是很多,原因很多,但我认为还是和我的学习习惯有关系,我比较喜欢通过看别人写的东西来学习,但现在Silverlight的教程少之又少,所以想给刚刚接触Silverlight的朋友一点帮助.        这个作品本是我为我们的一个大学生团体做的一个产品演示,具体案例效果可以参考www.yullion.com.当然啦也有截图呵呵 @H_502_2@

        自这暑假接触Silverlight一来,个人认为自己提高不是很多但我认为还是和我的学习习惯有关系但现在Silverlight的教程少之又少Silverlight的朋友一点帮助.

       这个作品本是我为我们的一个大学生团体做的一个产品演示www.yullion.com.当然啦也有截图呵呵~~

         首先,第一步当然是新建一个Silverlight项目我就起名叫SLDemo了.好,我们来观察这个程序的特点,每个产品展示都是由边框,一副图片,和产品说明构成,点击它的时候,他会翻转展开,同时若有别的图片已经展开,则会使其收回.鼠标经过图片时,会有相应的交互.

         好现在我们先来制作单个图片展板,为了便于说明,下文统称为展板.就是这个东西~~

右击SLDemo项目,添加新建项,选择Silverlight用户控件我们将它命名为imgBoard,此时会生成一个新的imgBoard.xaml文件右击它,点击在Expression blend中打开.选择对象面板中的usercontrol,将它的宽和高设置为200*190,向面板中添加一个border,将其margin属性设置为0,0 ;ComerRadius属性设置为10;这只background属性为深灰色,borderbrush为白色,设置borderthickness属性为3,3,3这样我们就绘制出了面板的基本框架如上图中图,border只能包含一个子元素,因此我们需要添加一个grID空间,并将其margin设置为0,0接着添加一个image空间,一个textblock空间,分别命名为Dimg,DInfo。先随便为image空间选择一张图片,以用来观看效果如上图右图.

         好现在,我们来添加动画,选中layoutroot,点击情节面板的”+”号,d出创建资源对话框,我们将其命名为StoryClose,此时d出时间线面板,将时间线移到1秒钟的位置,在layoutroot的属性面板里,设置转换->旋转->y为80

单击对象面板layoutroot下面的projection在属性面板中设置easyfunction为quartic out单击播放测试动画.

采用相同的方法添加展开动画StoryOpen

接着我们添加渐变的动画,同样新建一个storyBord,命名为StoryTurnlight,在一秒处将border的background调亮,同样添加StoryTurnBlack

imgBord页面设置完毕!

回到visualstudio2008，用Expressionblend打开page页面,删除layoutroot添加canvas面板命名为mainCanvas,将其宽高属性设为914*290,回到visualstudio

到此位置,界面设计完毕.下面我们添加 *** 作逻辑,打开page.cs

@H_502_2@ 总结

以上是内存溢出为你收集整理的通过实例学习Silverlight教程之制作图片特效(一)全部内容，希望文章能够帮你解决通过实例学习Silverlight教程之制作图片特效(一)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。