【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

原文:【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

　　刚才有人说我的标题很给力，哈哈。那这个标题肯定更给力了，“飞出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特效。强烈建议你将它推荐给你的朋友，家人，媳妇，爸爸妈妈，还有未来的老丈人。如果你有七舅老爷的话,你还可以......= =!

 

　　上班了，回见！