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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

杰克.陈 2018-05-14 10:25:00 浏览314
展开阅读全文
原文:【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

  刚才有人说我的标题很给力,哈哈。那这个标题肯定更给力了,“飞出ListBox吧”。你可以在www.kaodigua.net上看到具体的效果。下面是效果截图:

    img_c91565afd131a6b3252801e58f9deba2.jpe

  

  当用户选择ListBox中某一项时,这个被选中的Item从ListBox中飞出来,平稳的屏幕中央。这是我自己最喜欢的一个特效。实现起来依然不是很困难。不过在开始之前,还是先废话几句,FluidMoveBehavior其实一点没有用,它不提供任何任务操作,不简化反而是增加了界面的工作量。但他对程序员来说是一种史无前例。在silverlight开发中,出现了一种大家很喜欢且争先恐后要掌握的“没用”技能。这预示着silverlight未来一定会引领一场革命。

  开始正题,这一章会步骤稍微有点多,请先打开Blend,新建一个示例数据源,只定义一个属性,名为Image,类型也是Image。如下图:

    img_6748dda2938ac45cdf5264ab1ae56916.jpe

  

  然后,点击Collection节点,直接把他拖拽到LayoutRoot中。这样会自动生成一个ListBox,我们设置一下ListBox的位置和宽度,让他靠左边对其。如下图所示。

    img_30af441922bd35507db1b26635e4e5d9.jpe

  然后在LayoutRoot的中间,新建一个Grid,在里面放一个Image。Image填充整个Grid。注意Image目前不必指定图片源。就让他空在哪里。如下图。

    img_712b961b42820ede8573de9335c19b4a.jpe    

  

  然后点击这个新建好的Gird,在右侧属性面板中找到DataContext属性,点击最右侧的img_d48c04eaba78b91270a8ee2003833e8e.jpe,在弹出菜单中选择DataBinding...

    img_271e851a788429d7572476f7e12ad035.jpe

    img_483ab0f1347c5938fc95affe1fc8291d.jpe

  接下来,在弹出菜单中,打开Element Property选项卡,然后选择ListBox,接着在Properties列表里选中SelectedItem,点击OK按钮。

    img_b1ff397ce6dd0fbd28efa38b0a6cf236.jpe

  接下来,请选中刚才新建的Image控件,在右侧属性面板中,与上面相同,找到Source属性,点击最右侧的img_d48c04eaba78b91270a8ee2003833e8e.jpe,在右键弹出菜单中选择DataBinding...

    img_70cad2f4812d09d66f436f369641c4e4.jpe

  在弹出窗口中,选择DataContext选项卡,这里可以看到文章开始时让他创建的示例数据源,直接选中Image,点击OK按钮。

    img_e43f830342236845db463c7170514ede.jpe

  接下来,为Grid添加一个 FluidMoveBehavior

    img_c75866dc296d0b9f243a7c95405da574.jpe

  AppliesTo属性设置为self。

    img_1e1ac15e5440b5b9c6ec3a1399a83ab3.jpe

  InitalTag属性设置为DataContext。

    img_df7dab8722984637e8cb78a2d8d8601a.jpe

  如果你前几部都做对了,应该得到如下效果。

    img_ba61e9f70975b0f67705e91964cc6ed1.jpe  

  接下来很关键的一步,请右击ListBox,在弹出菜单中依次选择Edit Additional Template->Edit Generated items->Edit Current,进入模板编辑界面。

    img_7cc798a324fd4c63a8f64a849a1769ad.jpe

  为Image元素添加一个名为"FluidMoveSetTagBehavior"的行为。 注意这里是FluidMoveSetTagBehavior而不是FluidMoveBehavior

    img_33230584d71f0b13adf3a26739de8008.jpe

  在右侧属性面板里设置FluidMoveSetTagBehavior的Tag属性为DataContext

    img_bfcfe7d73c42d1fb3f6c8c9f1c7875c7.jpe

  点击F5运行得到最终效果如下图

    img_5d1837d835039eec57767fcc7772cc41.jpe

  恭喜给位,你们已经学会了独门秘籍,在这个文章没有被地球人都知道前,赶快做一个,然后秀给你们的朋友看。他们一定会惊呼不可思议。当然你还可以发挥一下自己的美术功底,把它设计的像www.kaodigua.net上那样很美观,很专业。

  源码下载

  如果你喜欢我的文章,请点一下右下角的“推荐”,如果你没有注册博客园,我建议你注册一个账号,然后再点推荐和关注我。这样我文章更新时你可以第一时间得到通知。如果你第一次读我的文章,我建议你从第一章开始从头学起。本文中包含很多手法,细节,我没有单独列出,都在某一章的某张图片中体现。这三章真的很精彩,让你简单实现从前难以想象的UI特效。强烈建议你将它推荐给你的朋友,家人,媳妇,爸爸妈妈,还有未来的老丈人。如果你有七舅老爷的话,你还可以......= =!

 

  上班了,回见!

网友评论

登录后评论
0/500
评论
杰克.陈
+ 关注