让WP7下复杂列表选项生动起来

简介:

    在WP7项目中,我们经常用到一些复杂的列表选项,它们通常是用来呈现少量信息,并具有导航作用,比如下面的图形:

双色球,3D和七乐彩都是用来导航的,但左边的图片,上面有标题,下面有描述,它们共同构成了一个复杂的列表选项,这个选项是用来导航的。要据用户体验来说,如果这个列表在我们选择点击时,没有一点变化,用户体验相对来说就差一些,如果能加上一个变化,用户就能体验到点击成功。
在WP7中,通常加的变化是倾角变化,如下图,把复杂列表分成四份,当点击发生1范围内,1区域内倾。4区域就会外倾。

在Silverlight中,有一个表示三维效果的类:PlaneProjection,可以通过改变它的RotationY
和RotationX两个属性,来变化在平面的角度。
可以把图片,标题,描述放到一个容器控件中,统 一来改变容器控件的Projection属性,来达到变化的效果。代码如下:
 

 
 
  1. PlaneProjection pp = new PlaneProjection();  
  2. pp.RotationY = 10;  
  3. pp.RotationX=10;  
  4. StackPanel sp = new StackPanel();  
  5. sp.Projection = pp; 
现在还有一个问题,就是什么时候触发倾。容器控件都有三个事件,ManipulationStarted,                              ManipulationDelta,ManipulationCompleted,分别是手势输入时,变化,结束时触发,也就是我们点击时,点击未离开移动,点击离开后触发,正好用这三个事件来改变容器控件的倾斜。
完整代码如下:

 
 
  1. private void StackPanel_ManipulationStarted(object sender, ManipulationStartedEventArgs e)  
  2.         {  
  3.             //倾角显示动画  
  4.             PlaneProjection pp = new PlaneProjection();         
  5.              
  6.             StackPanel sp = (sender as StackPanel);     
  7.             if (e.ManipulationOrigin.X > 100)  
  8.             {  
  9.                 pp.RotationY = -20;  
  10.             }  
  11.             else 
  12.             {  
  13.                 pp.RotationY = 20;  
  14.             }  
  15.             if (e.ManipulationOrigin.Y > 28)  
  16.             {  
  17.                 pp.RotationX = 20;  
  18.             }  
  19.             else 
  20.             {  
  21.                 pp.RotationX = -20;  
  22.             }  
  23.             sp.Projection = pp;  
  24.         }  
  25.         int value = 16;  
  26.         private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)  
  27.         {  
  28.             //倾角显示动画  
  29.             PlaneProjection pp = new PlaneProjection();  
  30.             StackPanel sp = (sender as StackPanel);  
  31.             if (e.ManipulationOrigin.X > 100)  
  32.             {  
  33.                 pp.RotationY = -20;  
  34.             }  
  35.             else 
  36.             {  
  37.                 pp.RotationY = 20;  
  38.             }  
  39.             if (e.ManipulationOrigin.Y > 28)  
  40.             {  
  41.                 pp.RotationX = 20;  
  42.             }  
  43.             else 
  44.             {  
  45.                 pp.RotationX = -20;  
  46.             }  
  47.             sp.Projection = pp;  
  48.    
  49.         }  
  50.         private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)  
  51.         {  
  52.             //恢复倾角显示动画  
  53.             PlaneProjection pp = new PlaneProjection();  
  54.             StackPanel sp = (sender as StackPanel);  
  55.             pp.RotationY = 0;  
  56.             pp.RotationX = 0;  
  57.             sp.Projection = pp;  
  58.         }  
 
这时,再次点击复杂列表选项时,就会有不会的反应了。










本文转自桂素伟51CTO博客,原文链接: http://blog.51cto.com/axzxs/786848 ,如需转载请自行联系原作者




相关文章
|
2月前
|
IDE Java 开发工具
在 Vim 里为 Markdown 文档展示导航窗格
在一个很长的 Markdown 文档里要准确跳转到某标题并不容易,如果像 Word 那样有个导航窗格就好了。
34 6
|
7月前
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
372 0
Axure快速入门(07) -选项组例子
Axure快速入门(07) -选项组例子
94 0
【VsCode】1.70.0 新版本好用功能分享 :代码函数名称浏览时固定(功能原称 sticky Scroll)
在Code 1.70.0 以后,新增功能:sticky Scroll 。 效果描述: 在浏览长函数的时候,可以将函数的名称定义部分固定在顶栏,类似冻结窗口,方便查看函数功能,不必再跳转。
507 0
|
测试技术 数据库管理 关系型数据库
PMS 修改禅道默认首页元素及展示
PMS 修改禅道默认首页元素及展示
474 0
|
PHP
【技术分享】select下拉框option默认选中(php模板渲染)
【技术分享】select下拉框option默认选中(php模板渲染)
190 0
|
缓存 前端开发 搜索推荐
Sticky Posts Switch插件教程WordPress中为分类添加置顶文章
Sticky Posts Switch插件教程WordPress中为分类添加置顶文章
205 0
Sticky Posts Switch插件教程WordPress中为分类添加置顶文章
OFFICE技术讲座:WP/SS文字渲染不开启的条件
OFFICE技术讲座:WP/SS文字渲染不开启的条件
118 0
QML学习笔记(七)-如何查看帮助手册中的控件例子
在QtCreator中,帮助里搜索早已写好的控件例子。 1.点击 帮助 2.在搜索栏里搜索 cuostomiz   选择QtQuick Control ,就可以打开文档的自定义控件例子进行参考使用     一一点开就可以看见完整代码  
1416 0
Confluence 6 为翻译显示用户界面的键(Key)名称
这个功能在你使用 Confluence 用户界面为 Confluence 创建翻译的时候会非常有用。当你打开主面板的时候,在你访问的 URL 的最后面添加下面的文字:can add the following actio...
956 0