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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 原文:【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条  这一章讲解FluidMoveBehavior的另一个应用,这是一个绝对原创的做法,目前已经被微软收录在silverlight.net,作者就是烤地瓜本人^^ 。
原文: 【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条

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

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

    img_d9fc1a793b0b5d74ff27f27a1fe6d12e.jpe

  

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

    img_0e671843eaac407c337c897b2f272d09.jpe

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

    img_b4f96984173fb07ce693d8680d05b728.jpe

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

    img_854f0d5c28c9c90ff2604748751f8484.jpe

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

    img_db9a9edb4cdb8b3bc7a4c138e019c193.jpe

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

    img_89b37a4bea53d95675dcc5a9e73fd875.jpe

  源码下载

  

  背后的故事:

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

  

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

目录
相关文章
|
10月前
|
机器学习/深度学习 前端开发 Windows
【夯实技术基本功】「底层技术原理体系」全方位带你认识和透彻领悟正则表达式(Regular Expression)的开发手册(正则符号深入解析 )
【夯实技术基本功】「底层技术原理体系」全方位带你认识和透彻领悟正则表达式(Regular Expression)的开发手册(正则符号深入解析 )
110 0
|
10月前
|
JavaScript 前端开发 API
【JavaScript】<正则表达式Regular Expression>JavaScript正则表达式解析
【1月更文挑战第17天】【JavaScript】<正则表达式Regular Expression>JavaScript正则表达式解析
|
存储 缓存 算法
蚂蚁金服服务注册中心如何实现 DataServer 平滑扩缩容 | SOFARegistry 解析
在微服务架构体系下,服务注册中心致力于解决微服务之间服务发现的问题。在服务数量不多的情况下,服务注册中心集群中每台机器都保存着全量的服务数据,但随着蚂蚁金服海量服务的出现,单机已无法存储所有的服务数据,数据分片成为了必然的选择。数据分片之后,每台机器只保存一部分服务数据,节点上下线就容易造成数据波动,很容易影响应用的正常运行。本文通过介绍 SOFARegistry 的分片算法和相关的核心源码来展示蚂蚁金服是如何解决上述问题的。
蚂蚁金服服务注册中心如何实现 DataServer 平滑扩缩容 | SOFARegistry 解析
|
网络协议
从DNSPOD到阿里云解析,如何实现DNS平滑迁移?
阿里云解析作为国内第一大DNS托管服务商,为近1200万+的域名提供DNS托管服务,具备高稳定、高可用的核心特点,目前已为企业客户开放100%SLA保障, 并获得了很多知名企业的认可与信任。 说到高可用这个特点,阿里云解析在SLA可用性保障方面是这样做到客户认可:阿里云可用性中心已将SLA服务可视化和数据化,具备完善的监控和赔付机制,所以阿里云解析的100% SLA是在完全的数据支撑下为客户提供的,更具真实性和可论证性。
|
存储 运维 数据库
2.0 解析系列 | 如丝般顺滑!一线运维人员谈如何实现数据库的平滑在线升级
OB君:9月21日,OceanBase 2.0 在云栖大会上重磅发布。我们将在接下来的时间里为大家持续推出 “OceanBase 2.0 技术解析系列” 文章,分别从 可运维性、分布式架构、数据可用性、性价比及兼容性 五个方面对OceanBase 2.0的产品新特性及其背后的技术原理进行深入的解析。
|
程序员 容器 C#
【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动
原文:【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动   好久没更新博客了,今天如果没急事,准备连发三篇,完全讲解Blend最牛的元素-“FluidMoveBehavior”。
1098 0
|
前端开发 容器
【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)
原文:【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)   写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高。
1020 0
【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧
原文:【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧   刚才有人说我的标题很给力,哈哈。那这个标题肯定更给力了,“飞出ListBox吧”。
1243 0
|
4月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
144 2
|
8天前
|
移动开发 前端开发 JavaScript
从入门到精通:H5游戏源码开发技术全解析与未来趋势洞察
H5游戏凭借其跨平台、易传播和开发成本低的优势,近年来发展迅猛。接下来,让我们深入了解 H5 游戏源码开发的技术教程以及未来的发展趋势。

热门文章

最新文章

推荐镜像

更多