SemanticZoom and ListView

一、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調整一下便可。