BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放

时间:2022-09-21 12:29:35

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

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

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

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

BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放

BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放

BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放

  建立控件

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

 <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom" Grid.Row =””>

     <SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView> </SemanticZoom>

  

  实现语义缩放

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

  

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

  

  在ZoomOut中建立新的View:

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

  

  

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

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

---2013.08.29更新版---

Copyright ©2013 BITED.All rights reserved.

BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放的更多相关文章

  1. BITED-Windows8应用开发学习札记之二:Win8应用常用视图设计

    感觉自我表述能力有欠缺,技术也不够硬,所以之后的Windows8应用开发学习札记的文章就偏向于一些我认为较难的地方和重点了多有抱歉. 上节课是入门,这节课就已经开始进行视图设计了. Windows应用 ...

  2. BITED-Windows8应用开发学习札记之一:Win8应用开发入门

    基于WinRT的Metro应用是我对Windows8的第一印象,简洁方块配以简单色调真的有沁人心脾的美感. 非常幸运,BITED在这个暑假的这个小学期里有幸学习到一门课程:软件工程基础实践,老师邀请了 ...

  3. BITED-Windows8应用开发学习札记之三:如何在Win8应用中实现数据绑定

    在微软官方提供的资源中,我们可以看到SampleDataSource.cs已经拥有了定义好了相应的数据结构以及实现类: 建立本地数据 由于我们已经有数据以及相应的数据类,我们需要做的仅仅是将数据放进数 ...

  4. Oracle学习笔记之四sp1,Oracle 11g的常用函数

    从Oracle学习笔记之四,SQL语言入门中摘出来的,独立成一章节 3.1 字符类函数 ASCII(c)和CHR(i)    分别用于返回一个字符的ASCII码和返回给定ASCII值所对应的字符. C ...

  5. Masonry学习札记

    Masnory学习札记 在之前的文章里有草草提到过Masonry自动布局,可这么重要第三方布局框架的怎么可以怎么随便带过呢!昨天在完成页面的时候刚好遇到了被Masorny功能惊叹的部分,所以趁热打铁写 ...

  6. Java 学习札记(三)免安装版TomCat中tomcat6w&period;exe的运行

    1.使用环境 很多时候我们用的是官网的解压免安装版的Tomcat,相比安装Tomcat除了少了安装步骤以外还少了tomcat6w.exe运行所需要的环境变量,所以一般Java开发免安装版的已经足够使用 ...

  7. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  8. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  9. Android开发学习路线图

    Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...

随机推荐

  1. sql编程篇 &lpar;五&rpar; 事务

    计算机中的事务 编辑 概念 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言(如SQL,C++或Java)书写的用 ...

  2. MyBatis学习总结&lpar;五&rpar;&mdash&semi;&mdash&semi;实现关联表查询

    一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...

  3. procedure can&&num;39&semi;t return a result set in the given context

    调用存储过程失败!出现如下错误:PROCEDURE ipbx.qu_ery can't return a result set in the given context, ipbx是数据库, qu_e ...

  4. 服务 Service 基本介绍

    Activity public class MainActivity extends ListActivity {     private boolean flag;//是否开启线程     publ ...

  5. C&num;&colon;vs2010无法打开vs2012创建的项目

    vs低版本打开高版本创建的项目时会提示"选择的文件是解决方案文件,但是用此应用程序的较新版本创建的,无法打开" 解决办法: 写字板打开解决方案sln文件 将其改成你现在用的vs版本 ...

  6. UnderScore&period;jsAPI记录

    Collection Functions (Arrays or Objects) each         _.each(list, iterator, [context]) 遍历list中的所有元素 ...

  7. &period;net程序集

    单程序集 多个.dll或exe 文件 多程序集 单个.dll或exe 文件 单程序集 是一个单一 独立明确定义的包,这个包中包含有程序集清单,CIL和类型元数据 多程序集程序集基本由二进制文件组成(称 ...

  8. Nowcoder 提高 Day1

    比赛链接 A 中位数(前缀和 二分) 额,确实没想到逼近... 然后写了n^2log的暴力,还CE了 只需要判断是否能有大于当前mid的中位数就好 这显然是可以二分的 代码 #include<b ...

  9. wpf根据X与Y轴获取内部值

    效果图: 环境 Visual Studio ,.Net Framework 4.0 SDK 支持Windows XP,Windows Win7.. 实现方法: 创建ListBox设置ListBox.I ...

  10. spring-bean 版本的问题(报错:org&period;xml&period;sax&period;SAXParseException&semi; lineNumber&colon; 14&semi; columnNumber&colon; 75&semi;)

    当XML中配置的xsd是4.0,而引用的包是4以下的spring-bean.jar时,当服务器能连网时没问题,不能连网时,就报以下类似错误: org.xml.sax.SAXParseException ...