zoukankan      html  css  js  c++  java
  • BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放

      语意缩放的意义在于:创新的语意缩放外观,让你的应用随时展现信息可视化的力量。如图表般的Tile,随着数据的不同而变化,让你的页面更富节奏。而所谓的语意缩放就是通过上下文的跳转,帮助我们实现一种更快更便捷的应用使用体验。

      而其官方解释为:http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

      语意缩放的操作比较简单,在微软给的中,只需要操作GroupedItemsPage.xaml控件中的代码即可实现。

       语义缩放的效果样式有如下三种:

     

      建立控件

      语义缩放的相关的XAMLmarkupSemanticZoomSemanticZoom控件中提供了两种视图:ZoomedInView和ZoomedOutView。其中ZoomIn为默认显示,ZoomOut为缩小显示。

     1 <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom" Grid.Row =”1”>
     2 
     3     <SemanticZoom.ZoomedOutView>
     4         <!-- Put the GridView for the zoomed out view here. -->   
     5     </SemanticZoom.ZoomedOutView>
     6 
     7     <SemanticZoom.ZoomedInView>
     8         <!-- Put the GridView for the zoomed in view here. -->       
     9     </SemanticZoom.ZoomedInView>
    10 
    11 </SemanticZoom>

      

      实现语义缩放

      将ZoomOutZoomIn的视图设计分别放入上面的Markup里面, 就能实现语义缩放。

      

      建立SemanticZoom的markup,并将GridView放入ZoomIn中(注意要将SemanticZoom设置在Grid的第2行,也就是Grid.Row =1)

      

      在ZoomOut中建立新的View:

      • 缩小图片的大小,并使他们可以竖排;
      • 在这里我们在groupheader中加入了一个新的textblock用来显示图片的数量。为此,我们需要在SampleDataGroup类中加入一个新的Property来实现绑定。而返回图片数量值的代码如下:  
    1 public int GroupItemCount
    2         {
    3             get { return _items.Count(); }
    4         }

      

      

      至此,语言缩放功能已经基本实现。

      在应用全屏显示状态下,通过缩放手势或Ctrl+鼠标滚轮或模拟器中缩放手势按钮来实现应用的语义缩放效果。

    ---2013.08.29更新版---

    Copyright ©2013 BITED.All rights reserved.

  • 相关阅读:
    [转]在C#中使用异步Socket编程实现TCP网络服务的C/S的通讯构架(一)
    Ubuntu操作系统安装使用教程 转载
    ArcInfo和MapInfo的比较 转 http://www.cnblogs.com/njnudt/archive/2007/07/18/821974.html
    jxl导出excel
    flex 图表
    telnet/ssh基本知识
    flex 判断数据类型的几种方法
    友人记
    16进制颜色表
    Ajax不能提交excel
  • 原文地址:https://www.cnblogs.com/bited/p/3288069.html
Copyright © 2011-2022 走看看