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

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

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

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

　　　　

　　

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

　　　　

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

　　　　

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

　　　　

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

　　　　

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

　　　　

　　源码下载

　　

　　背后的故事：

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

　　

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