Windows 市集應用程式實作手冊 - 使用 JavaScript : Lab 02

實驗 2 : 方向、貼齊、和語義式縮放

概述

Windows 8 應用程式之所以優秀，其特點之一就是它能適應各種不同尺寸的螢幕畫面，並且能夠在橫向模式和直向模式之間妥善旋轉；它也必須對貼齊作出回應，以使兩個應用程式共享螢幕和併排運行。

與螢幕尺寸大小有關的另一個特性是語義式縮放（ Semantic Zoom ）。不同於視覺化縮放只能回應使用者的動作（例如，捏手指頭的手勢）來調整可見內容的大小，語義式縮放（Semantic Zoom）能根據使用者的放大和縮小動作來呈現比較多或比較少的內容細節。語義式縮放讓使用者不用做過多的捲軸動作卻能瀏覽長列表的內容；使用者只要先縮小內容，找到想看的東西，然後，選擇它，就可以直接進到相對應的位置。

在本實驗裡，您將以實驗 1 為基礎，為 Contoso 食譜添加三個重要的使用者介面（ UI ）功能。首先，您將在旋轉畫面內客製化項目明細頁和群組明細頁的配置。接下來，在應用程式被貼齊的情況下，客製化項目明細頁的配置。最後，您將在起始頁面裡執行語義式縮放（ Semantic Zoom ），以便讓使用者能縮小內容並在同一個畫面內看見所有的食譜群組。

目標

本實驗將引導您如何：

• 在旋轉畫面內客製化使用者介面（ UI ）

• 在應用程式被貼齊的情況下客製化使用者介面（ UI ）

• 執行語義式縮放（ Semantic Zoom ）

系統需求

您必須擁有下列項目才能完成本實驗：

• Microsoft Windows 8

• Microsoft Visual Studio 2012

設定

為了讓您的電腦能進行本實驗，您必須先執行下列步驟：

1. 安裝 Microsoft Windows 8 。

2. 安裝 Microsoft Visual Studio 2012 。

練習

本動手做實驗室包含下列練習：

1. 裝置的方向

2. 貼齊

3. 語義式縮放（ Semantic Zoom ）

完成本實驗，估計需要費時： 40 到 60 分鐘。

練習 1 ：裝置的方向

Windows 8 可以在許多不同的設備器具上運作，包括平板電腦和其他設備器具。透過裝設在機器上的感測器之幫助，平板電腦等機具知道自己處於橫向模式或直向模式。在橫向模式下看起來很不錯的頁面可能還是需要經過拿捏調整才會在直向模式下看起來一樣的美觀，反之亦然。在這個練習裡，您將修改 Contoso 食譜應用程式，以便適應裝置的方向。

備註：要做練習 1 ，您不一定需要平板電腦。您可以直接進入 Visual Studio 中去找 Windows模擬器（ Simulator ）來測試方向程式碼。要找到模擬器（ Simulator ），請從底下的下拉列表中選擇模擬器（ Simulator ）就行。下一次，您再啟動此應用程式時，它將啟動 Windows 模擬器。

任務 1 - 測試起始頁面

首先，讓我們檢查處於橫向模式和直向模式下的應用程式之起始頁面，以便判斷是否需要做一些修改。

1. 在 Visual Studio 中，打開您創建於實驗 1 的 ContosoCookbook 專案。如果您還未完成實驗 1 或想另外啟動一個參考複本，您可以在本實驗的起始材料中找到一份完整的版本。

2. 在裝置處於橫向模式下，按壓 F5 來執行偵錯器（ debugger ）內的應用程式。您應該看見像圖 1 所顯示的食譜起始頁面。
   
   圖 1
   橫向模式下的起始頁面

3. 現在，旋轉裝置到直向模式。確定畫面旋轉 90 度，起始頁面也旋轉成圖 2 所顯示的配置。

   備註：如果您正在平板電腦上做測試，而無法旋轉起始頁面，其原因有可能是自動旋轉未被啟動。有些設備器具設有硬體開關，可以將畫面鎖定在目前的方向。如果您有這樣子的裝置，請確定開關已切換到自動旋轉模式。您也可以按壓視窗鍵 + O 來切換自動旋轉的開關。 如果您正在測試的硬體設備不支持方向的變更，記住，您可以使用 Windows 模擬器來取代之。要旋轉模擬器，請點擊模擬器（ Simulator ）右側那兩個**旋轉（ Rotate ）**按鈕中的任何一個。

   
   圖 2
   直向模式下的起始頁面

4. 以 ListView 控制項來呈現食譜項目，不管在橫向模式和直向模式下，其起始頁面看起來都很很好，所以，我們不需要做額外工作。

5. 返回 Visual Studio 並停止偵錯。

任務 2 – 客製化群組明細頁

Contoso 食譜的應用程式包括三個頁面：起始頁面、群組明細頁、和項目明細頁。起始頁面的直向模式不需要任何修改。所以，讓我們移動到群組明細頁 — 也就是，在您點擊群組標題（ Group Title ），例如中國菜（ Chinese ）或義大利菜（ Italian ），就會出現的那個頁面。

1. 重新啟動應用程式並點擊**中國菜（ Chinese ）**來顯示中國菜群組明細頁。在橫向模式下，其頁面配置應會像圖 3 所顯示。

   
   圖 3
   橫向模式下的群組明細頁

2. 現在，將裝置旋轉到直向模式（如圖 4 ）。觀察一下， ListView 控制項將大部份群組明細（食譜）內容定位在群組頁首（ group header ）的右邊（群組標題、影像、和描述），卻讓畫面的下半部留下一大片空白。
   
   圖 4
   直向模式下的群組明細頁

3. 返回 Visual Studio 並停止偵錯。

4. 且讓我們重新設定 ListView控制項，以便讓在直向模式下的食譜畫面出現在群組名稱下面的單一、垂直的捲軸欄內。首先，打開 groupDetail.js 並找出 updateLayout 函式，然後，修改用來檢查貼齊檢視狀態的 if 陳述式，使它也同時包含在直向模式下的全螢幕測試。

   JavaScript
   // This function updates the page layout in response to viewState changes.
   updateLayout: function (element, viewState, lastViewState) {
   ///
   ///
   ///

   var listView = element.querySelector(".itemslist").winControl;
   if (lastViewState !== viewState) {
   if (lastViewState === appViewState.snapped || viewState === appViewState.snapped ||
   lastViewState === appViewState.fullScreenPortrait || viewState == appViewState.fullScreenPortrait) {
   var handler = function (e) {
   listView.removeEventListener("contentanimating", handler, false);
   e.preventDefault();
   }
   listView.addEventListener("contentanimating", handler, false);
   var firstVisible = listView.indexOfFirstVisible;
   this.initializeLayout(listView, viewState);
   listView.indexOfFirstVisible = firstVisible;
   }
   }
   }

   備註：正如名稱所表白的，updateLayout 是用來變更檢視狀態用的。（ Windows 8 應用程式裡的檢視狀態與 ASP.NET 的檢視狀態無關，所以，不要讓這個名詞在您的內心引發負面影像！）將裝置從橫向模式旋轉成直向模式或從直向模式旋轉成橫向模式是導致檢視狀態改變的原因之一。在應用程式被「貼齊」時， updateLayout 也會被叫出來。我們將在下一個練習裡討論貼齊。

5. 接下來，從 updateLayout 中叫出 initializeLayout 函式，以便讓全螢幕直向模式能使用列表配置（ list layout ）而不是格線配置（ grid layout ）。

   JavaScript
   // This function updates the ListView with new layouts
   initializeLayout: function (listView, viewState) {
   ///

   if (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait) {
   listView.layout = new ui.ListLayout();
   } else {
   listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" });
   }
   },

   備註： ListView 控制項支持兩種配置模式：格線配置（ GridLayout ）和列表配置（ ListLayout ）。在程式預設的格線配置（ GridLayout ）模式，群組明細會出現在能水平捲動的格線內；在列表配置（ ListLayout ）模式下，群組明細出現在垂直捲動的欄位內，這才是直向模式顯示的理想情況。在畫面切換到直向模式時，您添加到 updateLayout 函式裡的陳述式會將 ListView 控制項的配置模式改變成列表配置（ ListLayout ）。

6. 執行應用程式，點擊**中國菜（ Chinese ）**來顯示群組明細頁，將裝置旋轉至直向模式。確認頁面配置如圖 5 所示。
   
   圖 5
   修改後的直向 - 模式配置

7. 改變了 updateLayout 和 initializeLayout ，我們只做完一半工作，我們還需要加大頂部和左邊的邊緣空白，以使它們與標題處的邊緣空白趨以一致。首先，返回 Visual Studio 並停止偵錯。

8. 打開 groupDetail.css 。

9. 在「文件」的底部附近尋找下列文句。

   CSS
   @media screen and (-ms-view-state: fullscreen-portrait) {
   .groupdetailpage . itemslist.win-horizontal.win-viewport .win-surface
   {
   margin-left: 100px;
   }
   }

   備註：此文句是CSS3媒體查詢（ media query ）的一個例子。媒體查詢（ Media queries ）提供一種聲明式的手段來變更 HTML 頁面的配置，以回應其寬度和高度之改變。媒體查詢是響應式設計（ responsive design ）的基礎，可以在沒有 JavaScript 幫助的情況下，讓頁面配置適應各種面積尺寸的變更。此處為 Contoso 食譜的頁面所產生的 CSS 檔案包括了適用於所有配置的 CSS 樣式、僅適用於畫面被貼齊的 CSS 樣式、和僅適用於直向模式的 CSS 樣式。前面的 CSS 則對應到直向模式。 注意： -ms-view-state 不屬於 CSS3 ，反而是 Windows 應用程式的 Microsoft 擴展名。

10. 透過添加第二個樣式來修改媒體查詢（ media query ）。

    CSS
    @media screen and (-ms-view-state: fullscreen-portrait) {
    .groupdetailpage .itemslist .win-horizontal.win-viewport .win-surface {
    margin-left: 100px;
    }

    margin-bottom: 35px;
    margin-left: 45px;
    margin-right: 120px;
    margin-top: 128px;
    }
    }

11. 執行應用程式，點擊中國菜（ Chinese ）來顯示群組明細頁，和將裝置旋轉到直向模式。確認食譜項目均向左縮進 90 像素，如圖 6 所示。
    
    圖 6
    修飾後的直向-模式配置

12. 返回 Visual Studio 並停止偵錯。

任務 3 – 客製化項目明細頁

接下來的任務是拿捏調適項目明細頁，以便讓它的使用空間，不管在橫向或直向模式下，都顯得有效率而且美觀。

1. 再度啟動應用程式，點擊其中一張食譜來顯示項目明細頁。圖 7 顯示它在橫向模式下的頁面。
   
   圖 7
   橫向模式下的項目明細頁

2. 現在，將裝置旋轉到直向模式（圖 8 ）。我們再一次看見：在橫向模式下良好的配置卻需要做一些拿捏調整，以使適用於直向模式。
   
   圖 8
   直向模式下的項目明細頁

3. 返回 Visual Studio並停止偵錯。

4. 在項目明細頁裡的三個內容區域 — 食譜名稱、影像、和描述區；食材原料區；和用法說明區 — 都是 itemDetail.html 裡的 DIV 元素。在實驗 1 裡，您修改了那些 DIV 元素的 CSS 來改進橫向模式下的配置。現在，您將添加 CSS 來定義直向模式下的配置。首先，請打開 itemDetail.css 並找到如下的媒體查詢（ media query ）。

   CSS
   @media screen and (-ms-view-state: fullscreen-portrait) {
   .itemdetailpage .content article {
   margin-left: 100px;
   }
   }

   修改媒體查詢（ media query ），如下所示：

   CSS
   @media screen and (-ms-view-state: fullscreen-portrait) {
   .itemdetailpage .content article {
   margin-left: 100px;
   }

   .itemdetailpage .content article .ingredients {
   -ms-grid-row: 2;
   -ms-grid-column: 1;
   margin-left: 0px;
   margin-top: 40px;
   }

   .itemdetailpage .content article .directions {
   -ms-grid-row: 3;
   -ms-grid-column: 1;
   margin-left: 0px;
   margin-top: 40px;
   }
   }

   備註：**.食材原料（ .ingredients ）和.用法說明（ .directions ）**的系統預設樣式會將食材原料擺放在配置格線的不同欄位裡。您剛剛所做的變更將每一樣東西都擺放在第一個欄位內，但是將食材原料擺放在第二列（ row ）並將用法說明擺放在第三列。當然，這些變更僅適用於直向模式，所以，應該不會影響橫向模式。

5. 啟動應用程式，點擊任一食譜項目來顯現項目明細頁。將畫面旋轉顯示為直向模式，驗證它採單一欄位配置，如圖 9 所示。
   
   圖 9
   修改後的直向 - 模式配置

6. 旋轉回橫向模式，確認頁面回復到三個欄位的配置。

7. 返回 Visual Studio 並停止偵錯。

練習 2 ：貼齊

貼齊讓 Windows 8 使用者能夠將螢幕畫面做水平式分割，來併排運作兩個應用程式。在觸控螢幕上展示貼齊的方法是，將您的手指頭從螢幕的左邊緣往右邊慢慢拖並暫停一下，直到將螢幕畫面做水平分割的分割線出現。（如果您沒有觸控螢幕，請按壓視窗鍵 + 句點符號（ Period ）來貼齊應用程式。）

圖 10 顯示運作中的貼齊。 Contoso 食譜佔據了螢幕左邊大約 320 像素的範圍，其餘的部份則由 Internet Explorer 所佔據。在這種情況下， Contoso 食譜是被貼齊的應用程式而 Internet Explorer 才是主要的應用程式。想對調這兩個應用程式的角色，使用者只要在螢幕上拖動分割線即可。

圖 10
運作中的貼齊

由於 Visual Studio 為本專案所生成的 CSS 內所包含的媒體查詢（ Media queries ），此 Contoso 食譜已經有一些內建的貼齊行為。在這個練習裡，您將稍微改變它，以改善使用者經驗。

備註：要看見貼齊運作，您必須在螢幕解析度至少為 1366 × 768 像素的裝置上執行 Windows 8 。 Windows 團隊之所以選擇 1366 為最低解析度，因為這樣才能提供 320 像素寬的畫面（這是許多智慧型手機的寬度）給被貼齊的應用程式，並將 1024 像素寬的畫面留給主要應用程式。剩下來的像素則被畫面分割線所耗用。如果您的螢幕之解析度比較低，請使用 Windows 模擬器來做這個練習，並為模擬螢幕選擇至 少 1366 × 768 的解析度。

任務 1 – 在貼齊模式中執行 Contoso 食譜

在這個任務裡，您將查看 Contoso 食譜的三個頁面（在它的應用程式被貼齊情況下）。

1. 請按壓 F5，從 Visual Studio 裡啟動應用程式。然後，返回 Windows 的開始畫面並啟動另一個應用程式（例如 Internet Explorer ）。在該應用程式出現於螢幕畫面的情況下，將您的手指頭按壓在螢幕的左邊邊緣並慢慢拖向右邊。當 Contoso 食譜出現在您的手指底下時，暫停一下，直到畫面分割線出現，然後，抬起您的手指，以便讓 Contoso 食譜就定位。
2. 在 Contoso 食譜只佔據一部份螢幕時，它的起始頁面與全螢幕顯示時有什麼樣的不同？
3. 點擊起始頁面裡任何一個群組名稱，來查看處於貼齊檢視情況下的群組明細頁。它與全螢幕時有哪些不同？
4. 點擊任一食譜項來查看貼齊檢視情況下的項目明細頁。與全螢幕做比較時，它的內容和配置有哪些不同？
5. 返回 Visual Studio 並停止偵錯。

任務 2 – 修改貼齊項目明細頁

Visual Studio 所提供的系統預設貼齊配置是一個良好的開端，但是，您還可以再進一步改善它。在這份 Contoso 食譜裡，修改貼齊項目明細頁是相當合理的動作，因為系統預設的配置在頁面上留下了太多空白，這些空間應該可以使用來展示食譜的其它資訊。且讓我們修改貼齊項目明細頁，加入食譜的配方成份。

1. 打開 itemDetail.css ，找到上面寫著 “@media screen and (-ms-view-state: snapped)” 的媒體查詢（ media query ）

   備註：就像針對 -ms view state: fullscreen portrait 的媒體查詢（ Media queries ）能夠讓您變更旋轉成直向模式下的頁面配置，針對 ms view state: snapped 的媒體查詢（ Media queries ）也可以讓您變更被貼齊的頁面之配置。

2. 使用這兒所顯示的字詞來替換媒體查詢（ media query ）。在這兒，大多數的變更只是在頁面被貼齊時，給食材原料章節一些新的樣式而已。這些食材原料早就擺放在這兒，您之所以無法看見它們，是因為它們被擺放在非常右邊的地方。新的樣式則將這些食材原料移動到第二個格線列（ grid row ），使它們定位在食譜影像的正下方。

   CSS
   @media screen and (-ms-view-state: snapped ) {
   .itemdetailpage .content {
   overflow-x: hidden;
   overflow-y: auto;
   }

   .itemdetailpage .content article {
   -ms-grid-columns: 300px 1fr;
   -ms-grid-row: 2;
   -ms-grid-rows: 300px auto;
   display: -ms-grid;
   height: 100%;
   margin-left: 20px;
   overflow-x: hidden;
   overflow-y: auto;
   width: 300px;
   }

   .itemdetailpage .content article .item-image {
   width: 280px;
   }

   .itemdetailpage .content article .item-content {
   padding-bottom: 60px;
   }

   .itemdetailpage .content article .ingredients {
   -ms-grid-row: 2;
   -ms-grid-column: 1;
   margin-left: 0px;
   margin-top: 12px;
   }

   .itemdetailpage .content article .ingredients .item-ingredients {
   margin-top: 4px;
   }

   .itemdetailpage .content article .ingredients .item-ingredients .ingredient {
   padding-bottom: 0px;
   font-size: 9pt;
   }
   }

3. 再度執行應用程式，貼齊它，使它佔據畫面的左側，緊接在另一個應用程式的旁邊。然後，進到項目明細頁並確認被貼齊的頁面現在已顯示出食譜的配方成分，如圖 11 所示。
   
   圖 11
   修改後處於貼齊檢視情況下的項目明細

4. 返回 Visual Studio 並停止偵錯。

練習 3 ： 語義式縮放（Semantic Zoom）

許多在觸控螢幕上運作的應用程式讓其使用者能夠透過捏動兩根手指頭的動作來放大和縮小圖面。舉例來說，照片編輯應用程式就能讓您放大和縮小相片，只要您將碰觸螢幕的兩隻手指頭向外、分開移動，就能放大照片；反之，當您將兩隻手指頭向內移進來時，就可以縮小照片。

大多數的縮放都是視覺化縮放，也就是說，它們只能調整螢幕內容物的大小。要將視覺化縮放功能包含在應用程式裡面，其實很簡單。但是， Windows 8 還支持語義式縮放（ Semantic Zoom ）。語義式縮放（ Semantic Zoom ）就不只是調整內容物的大小而已，它還會為內容物做分組歸類，以提供不同的語意檢視。舉例來說，在地圖應用程式裡的語義式縮放功能就可能在使用者做放大動作時，揭露一些額外的細節，例如街道名稱和建築物名稱；反之，在使用者做縮小動作時，則將這些細節刪除掉。

為了幫助您執行語義式縮放，適用於 JavaScript 的 Windows Library （ WinJS ）裡包含有一個 SemanticZoom 控制項。這兒的基本觀念是您提供此控制項兩個檢視方式 — 放大檢視或縮小檢視 — 此控制項就會根據使用者的輸入訊息在兩個檢視方式之間做切換。您不用自己做切換動作，您也不用自己寫手勢識別程式碼，您只要讓兩隻手指頭接觸螢幕並在上面做移入或移出的動作就行。如果您沒有觸控螢幕，您可以按住控制鍵（ Ctrl key ）並同時滾動滑鼠滾輪或按壓 Ctrl + 加號（ Plus Sign ）和Ctrl + 減號（ Minus Sign ），來完成縮放動作。

聽起來很吸引人？那就讓我們來進行語義式縮放功能吧。

任務 1 – 添加 SemanticZoom 控制項到起始頁面

將語義式縮放功能添加到 Contoso 食譜的第一個步驟是宣派一個 SemanticZoom 控制項並將目前已宣派在起始頁面的 ListView 控制項從一個擴充成兩個。

1. 打開 groupedItems.html.

2. 在底部，找到包含一個 ListView 控制項的 SECTION 元素。改寫此 SECTION 元素，使包括一個 SemanticZoom 控制項和兩個 ListView 控制項：一個代表起始頁面的放大檢視，另一個代表縮小檢視。

   HTML
   <section aria-label="Main content" role="main">
   <div id="zoom" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ initiallyZoomedOut: false }" style="height: 100%">
   <div id="zoomedInListView" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
   <div id="zoomedOutListView" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
   </div>
   </section>

   備註：我們正在為起始頁面添加語義式縮放功能，以便讓使用者能縮小檢視而在一個螢幕內看見所有的食譜群組。目前的起始頁面將變成放大檢視，將 SemanticZoom 控制項的 initiallyZoomedOut 屬性設定在 false ，以確保使用者一開始就看見放大檢視。

3. 在類別（ class ）為「項目範本」（ itemtemplate ）的 DIV 元素後面，添加下列陳述式到 groupedItems.htm 。

   HTML
   <div class="zoomedOutItemTemplate" data-win-control="WinJS.Binding.Template">
   <div class="zoomedOutItemContainer" >
   <img class="zoomeOutItemImage" src="#" data-win-bind="src: groupImage; alt: title" />
   <h4 class="zoomedOutGroupTitle" data-win-bind="textContent: title; alt: title"> </h4>
   <div class="zoomedOutItemCount" data-win-bind="textContent: recipesCount;"></div>
   </div>
   </div>

任務 2 – 修改 groupedItems.js

現在，我們需要做一些修改，以便擁有正確的資料來驅動語義式縮放檢視。

1. 打開 groupedItems.js.

2. 以這兒所顯示的字詞來替換 ready 函式和 updateLayout 函式。

   JavaScript
   // This function is called whenever a user navigates to this page. It
   // populates the page elements with the app's data.
   ready: function (element, options) {
   var semanticZoom = element.querySelector("#zoom").winControl;
   var zoomedInListView = element.querySelector("#zoomedInListView").winControl;
   var zoomedOutListView = element.querySelector("#zoomedOutListView").winControl;

   zoomedOutListView.itemTemplate = element.querySelector(".zoomedOutItemTemplate");
   zoomedOutListView.itemDataSource = Data.groups.dataSource;
   zoomedOutListView.groupDataSource = null;
   zoomedOutListView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });

   zoomedInListView.groupHeaderTemplate = element.querySelector(".headertemplate");
   zoomedInListView.itemTemplate = element.querySelector(".itemtemplate");
   zoomedInListView.oniteminvoked = this._itemInvoked.bind(this);

   if (appView.value === appViewState.snapped) {
   // If the app is snapped, configure the zoomed-in ListView
   // to show groups and lock the SemanticZoom control
   zoomedInListView.itemDataSource = Data.groups.dataSource;
   zoomedInListView.groupDataSource = null;
   zoomedInListView.layout = new ui.ListLayout();
   semanticZoom.locked = true;
   }
   else {
   // If the app isn't snapped, configure the zoomed-in ListView
   // to show items and groups and unlock the SemanticZoom control
   zoomedInListView.itemDataSource = Data.items.dataSource;
   zoomedInListView.groupDataSource = Data.groups.dataSource;
   zoomedInListView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
   semanticZoom.locked = false;
   }

   semanticZoom.element.focus();
   },

   // This function updates the page layout in response to viewState changes.
   updateLayout: function (element, viewState, lastViewState) {
   ///
   ///
   ///

   var semanticZoom = element.querySelector("#zoom").winControl;
   var zoomedInListView = element.querySelector("#zoomedInListView").winControl;

   if (appView.value === appViewState.snapped) {
   zoomedInListView.itemDataSource = Data.groups.dataSource;
   zoomedInListView.groupDataSource = null;
   zoomedInListView.layout = new ui.ListLayout();
   semanticZoom.zoomedOut = false;
   semanticZoom.locked = true;
   }
   else {
   zoomedInListView.itemDataSource = Data.items.dataSource;
   zoomedInListView.groupDataSource = Data.groups.dataSource;
   zoomedInListView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });

   semanticZoom.locked = false;

   }
   },

任務 3 – 修改 groupedItems.css

您幾乎可以看見運作中的語義式縮放功能了。首先，我們需要為 ListView 的縮小控制項設定樣式。

1. 打開 groupedItems.css.

2. 在頂部，添加下列陳述式。

   CSS
   #zoomedOutListView .win-surface {
   margin-left: 120px;
   }
   #zoomedOutListView .win-item {
   height: 500px;
   width: 250px;
   }

   #zoomedOutListView .win-container {
   margin-right:30px;
   }

   .zoomedOutItemContainer {
   min-height: 500px;
   height: 100%;
   width: 250px;
   display: -ms-grid;

   -ms-grid-rows: 1fr 130px 400px 1fr;
   -ms-grid-columns: 1fr;
   }

   .zoomeOutItemImage {
   -ms-grid-row-span: 4;
   }

   .zoomedOutGroupImage {
   -ms-grid-row: 3;
   }

   .zoomedOutItemCount {
   -ms-grid-row: 2;
   -ms-grid-column-align: end;
   font-size: 80px;
   color: rgb(250, 243, 214);
   margin: -7px 12px 0px 20px;
   font-weight: 100;
   }

   .zoomedOutGroupTitle {
   -ms-grid-row: 2;
   font-size: 32px;
   color: rgb(250, 243, 214);
   margin: 7px 0px 0px 16px;
   font-weight: 200;
   }

3. 執行應用程式，確認您看見了和以前相同的起始頁面。

4. 將兩隻手指頭擺在螢幕上並向內移（或按壓Ctrl + 減號（ Minus Sign ））來縮小檢視。驗證一下，頁面改變成如圖 12 所顯示的樣子。
   
   圖 12
   縮小後的起始頁面

5. 將兩隻手指頭再擺放在畫面上，不過，這一次是兩隻手指頭往外移，彼此分開（或按壓 Ctrl + 加號）來放大檢視。起始頁面發生哪些變化？

6. 再度縮小檢視，並點擊其中一個食譜群組。驗證一下，您又切換回放大檢視，並且捲動到您所選擇的食譜群組。

7. 返回 Visual Studio 並停止偵錯。

摘要

在本實驗裡，您為 Contoso 食譜做了一些重要的使用者介面（ UI ）相關的強化。您為旋轉後的顯示畫面進行一些配置調整；在應用程式被貼齊的情況下將項目明細頁優化，以顯示更多食譜資料；以及添加語義式縮放功能，以簡化在食譜群組起始頁面之間的航行工作。而且您幾乎不用寫程式程式碼，就能完成以上所有工作。

實驗 1 和 2 的大多數工作都與使用者經驗的創建有關 — 讓頁面在所有方向和模式下都看起來順眼而且正確。現在應該是時候了，可以到後端做一些支持分享和搜尋的事了。 Contoso 食譜也即將與 Windows 和其他 Windows 8 應用程式產生更緊密的整合。

繼續下一個實驗