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.

  • 相关阅读:
    第一次个人编程作业:我的分数我做主
    第一次作业
    finalshell编码问题
    个人总结-超越平台期
    第一次结对作业
    第二次编程作业代码互改
    第一次个人编程作业
    随笔001
    热是热,很值得—-2019北航暑期软件工程培训感受
    培训第二天------团队协作个人小结
  • 原文地址:https://www.cnblogs.com/bited/p/3288069.html
Copyright © 2011-2022 走看看