快速入門：新增 SemanticZoom (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

了解如何使用 SemanticZoom 控制項，在同一個內容的兩個檢視之間縮放。

先決條件

• 我們假設您可以利用 JavaScript，以適用於 JavaScript 的 Windows Library 控制項建立基本的 Windows 市集應用程式。如需開始使用 WinJS 控制項的指示，請參閱快速入門：新增 WinJS 控制項與樣式。
• 為遵循此快速入門，您需要知道如何使用 ListView 控制項。如需開始使用 ListView 控制項的說明，請參閱快速入門：新增 ListView。
• 若要使用 SemanticZoom 控制項，您需要知道如何建立群組的 ListView。如需詳細資訊，請參閱如何在 ListView 中群組項目。

什麼是 SemanticZoom 控制項？

SemanticZoom 控制項可以讓使用者在相同內容的兩個不同檢視間切換。其中一個是內容的主要檢視。第二個檢視與上述檢視的內容相同，但是用可以讓使用者快速瀏覽的方式呈現。例如，檢視通訊錄時，使用者可以放大字母，然後查看與該字母相關的名稱。

為了提供這種縮放功能，SemanticZoom 控制項使用其他兩個控制項：一個用來提供放大檢視，另一個提供縮小檢視。

<div data-win-control="WinJS.UI.SemanticZoom">   
                
    <!-- The control that provides the zoomed-in view goes here. -->

    <!-- The control that provides the zoomed-out view goes here. -->

</div>

這些控制項可以是任何兩個實作 IZoomableView 介面的控制項。WinJS 提供一個實作 IZoomableView 介面的控制項：ListView 控制項。這個快速入門中的範例說明如何與兩個 ListView 控制項搭配使用 SemanticZoom。

請勿混淆語意式縮放與視覺化縮放。雖然它們共用相同的互動和基本行為 (根據縮放係數顯示較多或較少的詳細資料)，但視覺化縮放是指內容區域或物件 (例如相片) 的倍率調整。

建立您的資料

若要使用 SemanticZoom，您需要一個包含群組資訊的 IListDataSource。 建立 IListDataSource 的其中一種方法是建立 WinJS.Binding.List。每個 WinJS.Binding.List 都有一個 dataSource 屬性，這個屬性會傳回包含您資料的 IListDataSource。

1. 將新的 JavaScript 檔案新增到專案中，以包含您的資料。將它命名為 "data.js"。

2. 在您剛才建立的 data.js 檔案中，建立會提供資料給 ListView 控制項的基礎資料來源。這個範例會從 JSON 物件陣列 (myData) 建立 WinJS.Binding.List：

   
   // Start of data.js
   (function () {
       "use strict";
   
   
   
       var myData = [
       { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
       { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
       { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
       { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
       { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
       { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
       { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
       { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
       { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
       { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
       { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
       { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
       { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
       { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
       { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
       { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
       { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
       { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
       { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
       { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
       { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
       ];
   
       // Create a WinJS.Binding.List from the array. 
       var itemsList = new WinJS.Binding.List(myData);
   

   注意  這個資料會參照數個影像。若要取得影像，請下載 ListView 群組以及 SemanticZoom 範例，然後將影像從範例複製到您的專案。您也可以使用自己的影像 — 只要確定更新資料中的 picture 屬性值即可。

    

   秘訣  

   您不會受到使用 WinJS.Binding.List 的限制：您也可以使用 StorageDataSource 或自訂的 VirtualizedDataSource。如需建立自訂資料來源的詳細資訊，請參閱如何建立自訂資料來源。

    

3. 建立包含群組資訊的資料來源版本。 如果您使用 WinJS.Binding.List，可以呼叫它的 createGrouped 方法來建立 List 的群組版本。createGrouped 方法採用 3 個參數：

   • getGroupKey：一個函式，假設是清單中的項目，會傳回該項目所屬的群組金鑰。
   • getGroupData：一個函式，假設是清單中的項目，會傳回代表該項目所屬群組的資料物件。
   • compareGroups：比較兩個群組的函式，如果第一個群組小於第二個群組，傳回小於零的值；如果群組相同，傳回零；如果第一個群組大於第二個群組，則傳回正值。

   這個範例使用 List.createGrouped 方法建立 List 的群組版本。它使用每一個項目標題的第一個字母來定義群組。

       // Sorts the groups.
       function compareGroups(leftKey, rightKey) {
           return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
       }
   
       // Returns the group key that an item belongs to.
       function getGroupKey(dataItem) {
           return dataItem.title.toUpperCase().charAt(0);
       }
   
       // Returns the title for a group.
       function getGroupData(dataItem) {
           return {
               title: dataItem.title.toUpperCase().charAt(0)
           };
       }
   
       // Create the groups for the ListView from the item data and the grouping functions
       var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);
   

4. 讓程式的其他部分也可以存取您的資料。這個範例使用 WinJS.Namespace.define，讓群組清單可公開存取。

       WinJS.Namespace.define("myData",
           {
               groupedItemsList: groupedItemsList
           }); 
   
   
   })(); // End of data.js
   

建立兩個 ListView 控制項

如先前所述，SemanticZoom 控制項需要兩個實作 IZoomableView 介面的額外控制項：一個用來提供放大的檢視，一個用來提供縮小的檢視。

1. 在將要包含 SemanticZoom 之 HTML 頁面的 head 區段中，新增您在前一步驟所建立之資料檔案的參考。

   
   
       <!-- Your data file. -->
       <script src="/js/data.js"></script>
   

2. 為您的 ListView 物件定義 3 個範本：一個用於放大的項目檢視、另一個用於放大的檢視中的群組標頭，而最後一個用於縮小的檢視中的群組標頭。

   <!-- Template for the group headers in the zoomed-in view. -->
   <div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
       <div class="simpleHeaderItem">
           <h1 data-win-bind="innerText: title"></h1>
       </div>
   </div>
   
   <!-- Template for the ListView items in the zoomed-in view. -->
   <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
       <div class="mediumListIconTextItem">
           <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
           <div class="mediumListIconTextItem-Detail">
               <h4 data-win-bind="innerText: title"></h4>
               <h6 data-win-bind="innerText: text"></h6>
           </div>
       </div>
   </div>
   
   <!-- Template for the zoomed out view of the semantic view. -->
   <div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
       <div class="semanticZoomItem">
           <h1 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h1>
       </div>
   </div>
   

3. 在您的 HTML 中，定義兩個 ListView 控制項。第一個控制項提供放大的檢視，第二個控制項提供縮小的檢視。

   • 將放大之 ListView 的 itemDataSource 設定為 myData.groupedItemList.dataSource (也就是包含要顯示之項目的 IListDataSource)。將它的 groupDataSource 設定為 myData.groupedItemsList.groups.dataSource (也就是包含群組資訊的 IListDataSource)。
   • 針對縮小的 ListView，將它的 itemDataSource 設定為 myData.groupedItemList.groups.dataSource (也就是包含群組資訊的 IListDataSource)。ListView 就是從該處取得要顯示的群組標題。

   這個範例會建立兩個 ListView 控制項並設定它們使用您剛才建立的範本。

   
   
       <!-- The zoomed-in view. -->    
       <div id="zoomedInListView"
           data-win-control="WinJS.UI.ListView" 
           data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
       ></div>
   
       <!--- The zoomed-out view. -->
       <div id="zoomedOutListView"
           data-win-control="WinJS.UI.ListView"
           data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
       ></div>
   

4. 在 CSS 檔案中，為您的範本和 ListView 控制項定義樣式。如果略過這個步驟，您的應用程式仍然可以執行，但是看起來將不會那麼美觀。

   /* Template for headers in the zoomed-in ListView */
   .simpleHeaderItem
   {
       width: 50px;
       height: 50px;
       padding: 8px;
   }   
   
   /* Template for items in the zoomed-in ListView */  
   .mediumListIconTextItem
   {
       width: 282px;
       height: 70px;
       padding: 5px;
       overflow: hidden;
       display: -ms-grid;
   }
   
       .mediumListIconTextItem img.mediumListIconTextItem-Image 
       {
           width: 60px;
           height: 60px;
           margin: 5px;
           -ms-grid-column: 1;
       }
   
       .mediumListIconTextItem .mediumListIconTextItem-Detail
       {
           margin: 5px;
           -ms-grid-column: 2;
       }
   
   /* Template for items in the zoomed-out ListView */
   .semanticZoomItem
   {
       width: 130px;
       height: 130px;
       background-color: rgba(38, 160, 218, 1.0);
   }   
   
       .semanticZoomItem .semanticZoomItem-Text
       {
           padding: 10px;
           line-height: 150px;
           white-space: nowrap;
           color: white;
       }
   
   /* CSS for the zoomed-in ListView */
   #zoomedInListView
   {
       width: 600px;
       height: 300px;
       border: solid 2px rgba(0, 0, 0, 0.13);
   }
   
   #semanticZoomDiv 
   {
       width: 600px;
       height: 300px;
       border: solid 2px rgba(0, 0, 0, 0.13);
   }
   

5. 執行應用程式。您將會看到兩個 ListView 控制項：

   

第一個 ListView 提供放大檢視，第二個則提供縮小檢視。請注意，這兩個控制項都會使用水平配置。我們建議資料的放大和縮小檢視一律使用相同的配置。

新增 SemanticZoom 控制項

在您的標記中，建立 SemanticZoom 控制項，並在其中移動您的 ListView 控制項。

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

當您執行應用程式時，現在會看到單一 ListView，而且現在可以在您定義的兩個檢視之間縮放。

注意  不要在 SemanticZoom 控制項的子控制項上設定框線。 如果您在 SemanticZoom 以及它的子控制項設定框線，則 SemanticZoom 框線以及檢視中的子控制項框線都會顯示。放大/縮小時，子控制項的框線會隨著內容一起縮放，所以不會很好看。僅在 SemanticZoom 控制項上設定框線。

 

使用 SemanticZoom

在兩個檢視間縮放：

輸入機制	縮小	放大
觸控	縮小	捏合、點選
鍵盤	Ctrl + 減號、Enter	Ctrl + 加號、Enter
滑鼠	Ctrl + 往後旋轉滑鼠滾輪	Ctrl + 往前旋轉滑鼠滾輪

 

與自訂控制項搭配使用 SemanticZoom

若要與 ListView 以外的控制項搭配使用 SemanticZoom，您必須實作 IZoomableView 介面。如需顯示方法的範例，請參閱自訂控制項的 SemanticZoom 範例。

讓 SemanticZoom 保持回應

讓使用者能夠快速且流暢地在 SemanticZoom 的放大和縮小檢視之間切換是很重要的。這表示 SemanticZoom 控制項的子控制項不應該在它們載入資料時讓應用程式等待。使用 ListView (或自訂來實作 IZoomableView 的 FlipView 版本) 搭配 SemanticZoom 的時候，使用建立範本函式，在控制項進入檢視時項目無法提供使用者時建立預留位置。如需在項目範本中使用預留位置的詳細資訊，請參閱 FlipView.itemTemplate。如果您使用自訂控制項搭配 SemanticZoom，在項目不提供使用時，實作進度環並使用預留位置。

範例

• ListView 群組以及 SemanticZoom 範例
• 自訂控制項的 SemanticZoom 範例

摘要與後續步驟

您已學會如何建立 SemanticZoom，它使用兩個 ListView 控制項建立它的放大和縮小檢視。

現在，透過閱讀 SemanticZoom 控制項的指導方針和檢查清單，深入了解使用 SemanticZoom 的時機及方法。

相關主題

SemanticZoom 控制項的指導方針和檢查清單

SemanticZoom

語意式縮放範例

ListView