刚才有人说我的标题很给力,哈哈。那这个标题肯定更给力了,“飞出ListBox吧”。你可以在www.kaodigua.net上看到具体的效果。下面是效果截图:
当用户选择ListBox中某一项时,这个被选中的Item从ListBox中飞出来,平稳的屏幕中央。这是我自己最喜欢的一个特效。实现起来依然不是很困难。不过在开始之前,还是先废话几句,FluidMoveBehavior其实一点没有用,它不提供任何任务操作,不简化反而是增加了界面的工作量。但他对程序员来说是一种史无前例。在silverlight开发中,出现了一种大家很喜欢且争先恐后要掌握的“没用”技能。这预示着silverlight未来一定会引领一场革命。
开始正题,这一章会步骤稍微有点多,请先打开Blend,新建一个示例数据源,只定义一个属性,名为Image,类型也是Image。如下图:
然后,点击Collection节点,直接把他拖拽到LayoutRoot中。这样会自动生成一个ListBox,我们设置一下ListBox的位置和宽度,让他靠左边对其。如下图所示。
然后在LayoutRoot的中间,新建一个Grid,在里面放一个Image。Image填充整个Grid。注意Image目前不必指定图片源。就让他空在哪里。如下图。
然后点击这个新建好的Gird,在右侧属性面板中找到DataContext属性,点击最右侧的,在弹出菜单中选择DataBinding...
接下来,在弹出菜单中,打开Element Property选项卡,然后选择ListBox,接着在Properties列表里选中SelectedItem,点击OK按钮。
接下来,请选中刚才新建的Image控件,在右侧属性面板中,与上面相同,找到Source属性,点击最右侧的,在右键弹出菜单中选择DataBinding...
在弹出窗口中,选择DataContext选项卡,这里可以看到文章开始时让他创建的示例数据源,直接选中Image,点击OK按钮。
接下来,为Grid添加一个 FluidMoveBehavior。
AppliesTo属性设置为self。
InitalTag属性设置为DataContext。
如果你前几部都做对了,应该得到如下效果。
接下来很关键的一步,请右击ListBox,在弹出菜单中依次选择Edit Additional Template->Edit Generated items->Edit Current,进入模板编辑界面。
为Image元素添加一个名为"FluidMoveSetTagBehavior"的行为。 注意这里是FluidMoveSetTagBehavior而不是FluidMoveBehavior。
在右侧属性面板里设置FluidMoveSetTagBehavior的Tag属性为DataContext
点击F5运行得到最终效果如下图
恭喜给位,你们已经学会了独门秘籍,在这个文章没有被地球人都知道前,赶快做一个,然后秀给你们的朋友看。他们一定会惊呼不可思议。当然你还可以发挥一下自己的美术功底,把它设计的像www.kaodigua.net上那样很美观,很专业。
如果你喜欢我的文章,请点一下右下角的“推荐”,如果你没有注册博客园,我建议你注册一个账号,然后再点推荐和关注我。这样我文章更新时你可以第一时间得到通知。如果你第一次读我的文章,我建议你从第一章开始从头学起。本文中包含很多手法,细节,我没有单独列出,都在某一章的某张图片中体现。这三章真的很精彩,让你简单实现从前难以想象的UI特效。强烈建议你将它推荐给你的朋友,家人,媳妇,爸爸妈妈,还有未来的老丈人。如果你有七舅老爷的话,你还可以......= =!
上班了,回见!