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

        自这暑假接触Silverlight一来,个人认为自己提高不是很多,原因很多,但我认为还是和我的学习习惯有关系,我比较喜欢通过看别人写的东西来学习,但现在Silverlight的教程少之又少,所以想给刚刚接触Silverlight的朋友一点帮助.

       这个作品本是我为我们的一个大学生团体做的一个产品演示,具体案例效果可以参考www.yullion.com.当然啦也有截图呵呵~~

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

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

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

         好现在,我们来添加动画,选中layoutroot,点击情节面板的”+”号,弹出创建资源对话框,我们将其命名为StoryClose,此时弹出时间线面板,将时间线移到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