silverlight 相册雏型

这篇应该是"silverlight3的"伪"3D续--图片横向轮换"的后续篇章,代码基本上从上篇代码修改而来,界面则抄袭了nasa的相册,自己一直做数据库相关的电子商务开发,虽然断断续续学习了一阵silverlight,但对RIA开发还没找着感觉,基本上仍处于从asp.net程序员看silverlight的初级阶段,这个权当练手,废话不多说,直接看效果图:

演示地址: http://images.24city.com/jimmy/album/default.html

基本技术点:

1.利用webclient动态加载xml来获取程序配置以及数据源

2.利用webclient异步读取大图片内容,以达到大图加载的loading效果

3.利用SizeChanged事件重新定位各元素中心点位置(结合ActualHeight,ActualWeight)

4.下面导航小图片区,基本上可以分成三部分:

 4.1当前图(即下面一排图片中的绿色图)--始终定位于容器(canvas)的中心点  4.2当前图左边的图片(利用y轴,z轴旋转后并排在一起,形成立体堆叠效果)  4.3当前图右侧的图片(同4.2,只是y轴,z轴角度转成负值而已,以达到左右对称)

 至于布局算法,大家各显神通吧,达到效果就好,在这个例子里我的代码也只是想着如何实现而已(属于最低级原始层次),不具备啥参考意义(欢迎大家提出更好的排列算法)

这里再给出一个示例结构图,有助于理解各元素水平位置的分布(为了更直接,刻意把各元素垂直错开了)

5.小图点击后,小图片整体移动的效果实现:

 基本上这是一个视觉假象,把图片最外层的窗口cavas应用一个storyboard,让canvas的x坐标相对变化即可,因为所有小图片都在容器里,所以看上去也就整体跟着移动了,但是有一个问题,动画放一次后,会停在新的x坐标上(AutoReverse设置为false的前提下),下次再播放就动不了(因此起始x值一样了,相当于没移动)

 所以在动画的Completed事件里,我用代码又强制把canvas容器的x值复原了(为了是下次可以继续播放),同时再次调用第"4"点中所提到的布局算法重新布局,因为代码的执行只在一瞬间,所以肉眼根本看不出这点小动作。

 这样之后,基本上就能实现点击移动切换功能了,但是效果很单调,为了将导航区的当前大图慢慢缩小,同时被点击的小图慢慢放大,再同时伴随一些角度的姿态调整,在小图的点击事件ItemClick里,我又尝试了写了N多垃圾代码,如果您细心看,能看到一些小变化(不过这些小变化自我感觉仍旧很生硬,不连贯,也欢迎大家提出更有效更简单的解决办法)

源代码下载

代码配置说明:

用vs2008 sp1打开后,web目录下新建一个img目录,参照data/img.xml里的内容,自己找些图片复制到img目录中就可以了.

[2009/11/08更新]加入了DeepLink支持

转载请注明来自 菩提树下的杨过

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

高阶爬虫实战:破解极验滑动验证码

今天给大家带来的是极验验证码的selenium破解之法,是不是有点小激动呢,小伙伴们等不及了,让我们赶紧直入主题吧。

82360
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

16730
来自专栏云飞学编程

Python爬虫!老司机详解爬虫,你想爬的都在这里

推荐下小编的Python学习群5421107414,不管你是小白还是大牛,小编我都欢迎,欢迎初学和进阶中的小伙伴。

12120
来自专栏Material Design组件

Material Design — 提示框( Dialogs)

46090
来自专栏阮一峰的网络日志

网页设计的12种颜色

他们发现,美国前100大网站的Logo,主要使用12种颜色。其中,采用蓝色的网站最多,红色排在第二种,黄色排在第三种。

28520
来自专栏IMWeb前端团队

移动端重构实战系列6——icon与图片

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

20850
来自专栏斜述视角

0基础学习网页制作-Css

文章来自:4月14日早,在贵州大学北校区10栋715寝室,对物理学院同学培训的内容。

10110
来自专栏北京马哥教育

Web性能优化:图片优化

马哥linux运维 | 最专业的linux培训机构 ---- 我自己的Blog:http://blog.cabbit.me/web-image-optimiz...

70470
来自专栏GreenLeaves

web前端优化之reflow(减少页面的回流)

1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom...

27870
来自专栏进步博客

模拟按钮的可访问性

为了创建更加漂亮的按钮,我们在项目实践中经常使用A、SPAN等元素模拟按钮,而不是使用更合语义的input[button]或者button元素。使用这种方法我们...

11530

扫码关注云+社区

领取腾讯云代金券