您的位置:首页 > 其它

SemanticZoom and ListView

2013-02-23 01:04 48 查看
一、SemanticZoom

当当前页面有很多分页表示不同部分或者功能时,可以使用SemanticZoom来管理这些页面,当页面缩小时,各页面提取其标志信息,形成较小的一块,这样,多个页面将更多地显示在同一个屏幕中,用户一目了然,当用户想进入到某一部分时可以很快地找到标志的那一块,然后进入到放大页面,在实际应用中起到很大的作用,简便了用户操作

SemanticZoom的定义:

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">
<div id="zoomedIn"></div>
<div id="zoomedOut"></div>
</div>

不能在里面添加任何其他的东西,在一个SemanticZoomDiv里面只有一个ZoomedIn和一个ZoomedOut,接着开始定义ZoomedIn和ZoomedOut里面要显示的东西,这里推荐一个官方的sample:Input: Windows 8 gestures sample,参照里面的代码,可以自定义ZoomedIn和ZoomedOut里面的东西。个人觉得如果数据不是很多,而且所要展示与区分的是不同的功能,那最好采用sample里面提到的方法,其实我们只需要关键代码而已,引用关键代码,定义的部分自己实现。还有一种就是当数据很多,而且要展示的是不同类别的数据,这个时候ListView便发挥作用了,这里用到基本ListView和GroupingListView,当页面缩小到简略方式时,采用基本的ListView,当单击进入页面时,采用GroupingListView

<div id="semanticZoomDiv"
data-win-control="WinJS.UI.SemanticZoom">
<div id="zoomedInListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource:myGroupedList.dataSource,
itemTemplate:textTemplate,
groupDataSource:myGroupedList.groups.dataSource,
groupHeaderTemplate:headerTemplate

}"></div>
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource:myGroupedList.groups.dataSource,
itemTemplate:semanticZoomTemplate
}"></div>
</div>

定义ListView:将data-win-control设为“WinJS.UI.ListView”,接着在data-win-options中为ListView添加dataSource和template

template定义:可以在HTML中定义template

如:

<div id="textTemplate"
data-win-control="WinJS.Binding.Template"
style="display:none">
<div class="textItem">
<div class="text">
<h2 data-win-bind="innerText:text"></h2>
</div>
</div>
</div>

data-win-bind为数据绑定,GroupingListView定义时需要多设置两个属性groupDataSource和groupHeaderTemplate,这两个分别是分组和分组的模板,dataSource的部分,首先需要先定义一个WinJS.Binding.List,如:

var myList = new WinJS.Binding.List([
{title:"iOS",text:"GCD"},
{ title: "iOS", text: "MKMapView" },
{ title: "C++", text: "MFC" },
{ title: "WinJS", text: "ListView" },
{ title: "Java", text: "多线程" },
{ title: "高数", text: "微积分" },
{ title: "英语", text: "定语从句" }
]);

接着需要用到myList的createGrouped函数,此函数包含三个函数,getGroupKey(获得分组的组名或者一些标志该组的东西)、getGroupData(获取该组数据)和compareGroups(说白了就是帮你排序,例如当你的组名以字母区别时,可以按照字母表的排序为分组进行排序),其实说来说去都没说到一些比较深入的东西,ListView和SemanticZoom都是很强大很实用的东西,但是对于它们如何跟数据关联这一块还不是很懂,用倒是知道怎么用,这个等以后深入了解才行。另外,个人觉得在做win8
APP开发时结合Blend的使用真的是很不错的,有时在使用SemanticZoom的时候会出现没有任何东西显示,这个时候可能是你的div大小的问题,通过blend调整一下便可。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: