原文:【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条

  这一章讲解FluidMoveBehavior的另一个应用,这是一个绝对原创的做法,目前已经被微软收录在silverlight.net,作者就是烤地瓜本人^^ 。这个idea来自silverlight.net一个外国朋友的在论坛中的提问。他在帖子中提起经常在flash中看到许多ListBox当拖拽滚动条时,里面的元素总是很平滑的运动,而不是生硬的跳到眼前。不知道silverlight是不是可以实现这样的效果。这个帖子当时点击率很高,大家都踊跃的讨论思路。大多数人都倾向于自己重写,有的人还给了具体的思路,新建N个类,从继承到接口洋洋洒洒几百行代码。但最后我的回复成为了最佳答案,原因很简单,因为我告诉他他一行代码都不用写。实现这个效果,你只需要30秒。

  首先新建一个项目,添加一个ListBox,设置它的宽度为100,高度为200,左对齐,上对齐,然后直接向里面添加20个ListBoxItem,如下图所示:

    【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条-LMLPHP

  

  接下来,右击ListBox,在弹出菜单中选择Edit Template->Edit a copy

    【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条-LMLPHP

  在弹出面板中随便取一个名字,然后点击OK按钮。进入ListBoxTemplate编辑模式。然后如下图所示找到ItemsPresenter元素,并选中他。

    【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条-LMLPHP

  然后再Assets面板中,找到FluidMoveBehavior,你可以直接双击,将它附加到ItemsPresenter上,也可以直接拖拽他到ItemsPresenter上。

    【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条-LMLPHP

  然后退出ListBoxTemplate编辑模式,再次右击ListBox,在弹出菜单中依次选择Edit Additional Templates->Edit Layout of Items-> Creaye Empty,在弹出菜单中随便取一个名字点击OK按钮。

    【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条-LMLPHP

  点击F5直接运行程序,然后拖拽滚动条,此时你可以看到ListBoxItem可以平滑的上下运动了。

    【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条-LMLPHP

  源码下载

  

  背后的故事:

    最后一步Edit Additional Templates->Edit Layout of Items-> Creaye Empty,我们新建了这个template,但什么也没有操作。但它确是实现这个效果最核心的一步。他将ListBox的容器模板暴露在xaml中。

  

  下一张讲讲解如何让ListBox中的元素飞出ListBox之外,你可以在www.kaodigua.net中看到这种效果。如果你喜欢我的文章,请点一下文章右下角的“推荐”,谢谢。

05-11 16:55