快速入門：針對不同視窗大小設計應用程式
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
當您將某個應用程式設計成在任何視窗大小看起來都很美觀且能良好運作時，您必須選擇是否要建立額外的配置以補足預設的全螢幕水平配置。 您可以將應用程式設計成支援寬度下限 320 像素，而非預設下限 500 像素，並在應用程式高度大於其寬度時，切換到垂直配置。這些都是選用的設計選擇。
如需了解此功能的運作情形，請參閱應用程式功能，從開始到完成系列: Windows 市集應用程式 UI，從開始到完成
目標: 閱讀完本文之後，您將了解如何將應用程式的寬度下限從 500 像素變更為 320 像素，以及如何變更您的設計，讓應用程式在窄版寬度看起來也很美觀且能良好運作。您也將了解如何設計水平移動瀏覽的應用程式，以便在應用程式高度大於寬度時，隨時變更為垂直配置。
先決條件
使用 JavaScript 建立您的第一個 Windows 市集應用程式
範例：高度大於寬度的視窗配置
本文藉由描述如何在高度大於寬度的視窗配置範例中實作這些選項，示範高格式和窄格式配置的其他設計選項。此範例是以 Microsoft Visual Studio 中的 [格線應用程式] 範本為基礎。
[格線應用程式]**** 範本包含四個頁面：
default(default.html) 會在應用程式啟動後載入groupedItems頁面。groupedItems(pages\groupItems\groupedItems.html) 可讓使用者檢視群組和項目，選取群組標籤以瀏覽群組詳細資料頁面 (groupDetail)，或選取項目以瀏覽全頁項目檢視 (itemDetail)。groupDetail(pages\groupDetail\groupDetail.html) 可讓使用者檢視群組詳細資料和項目，以及選取項目以瀏覽全頁項目檢視 (itemDetail)。itemDetail(pages\itemDetail\itemDetail.html) 代表項目的全頁檢視。
在本文中，您將在每個頁面使用預設配置。我們只會討論 groupDetail 和 groupedItems 頁面 JavaScript 程式碼所需進行的變更。
這裡所用的主要程式碼編寫技巧是查看頁面 offsetWidth 和 offsetHeight 屬性的變更。如果因使用者變更頁面寬度或裝置方向而達到某個寬度和高度值，頁面會變更其控制項的配置和行為。
若要在 Visual Studio 嘗試這項操作，請建立新的 JavaScript Windows 市集 [格線應用程式] 專案，然後依照其餘的指示操作。
定義寬度下限
Windows 市集應用程式的寬度下限預設為 500 像素。應用程式的高度一律會填滿螢幕。應用程式的螢幕高度下限為 768 像素。
如果您的應用程式在窄版寬度運作良好，或者如果多工作業對您的應用程式而言非常重要，而且您希望使用者將該應用程式與其他應用程式保留在相同畫面上，則您可以將寬度下限變更為 320 像素，而非 500 像素。如此一來，使用者可以將應用程式大小流暢地調整為任何大小 (從全螢幕向下調整成寬度為 320 像素)。
您要在 package.appxmanifest 資訊清單檔案中，變更應用程式的寬度下限。若要這樣做，請在 Visual Studio 中完成以下步驟：
開啟
package.appxmanifest資訊清單檔案。資訊清單會在資訊清單設計工具中自動開啟。開啟 [應用程式]**** 索引標籤，尋找 [寬度下限] 欄位。
使用下拉式清單將寬度下限變更為 320 像素****。
如果您以文字編輯器開啟
package.appxmanifest資訊清單檔案，應該會看到做為 VisualElements 元素子項目的 ApplicationView 元素。例如，資訊清單檔案中的新寬度下限看起來就像這樣。<ApplicationView MinWidth="width320" />
現在您的應用程式大小可以向下調整為 320 像素，您必須修改應用程式，讓該應用程式可以在窄版寬度使用。具體而言，您要將應用程式從水平移動瀏覽切換成垂直移動瀏覽。
定義群組和項目檢視行為
在
pages\groupedItems\groupedItems.js檔案中，將此程式碼新增到ui.Pages.define 函式的 ready 方法。這個方法會在所有頁面完成起始和轉譯後進行呼叫。在這個方法中，呼叫稍後即將定義的_initializeLayout函式 (為參考之用，您需要新增的程式碼會由*** START ***和*** END ***註解加以標示)。ui.Pages.define("/pages/groupedItems/groupedItems.html", { // ... ready: function (element, options) { var listView = element.querySelector(".groupeditemslist").winControl; listView.element.focus(); // *** START *** this._initializeLayout(listView); // *** END *** }, // ...在
groupedItems.js檔案中，將此程式碼新增到ui.Pages.define 函式的 updateLayout 方法。每當使用者切換應用程式的配置狀態 (例如窄版、直向和橫向) 就會呼叫這個方法。在這個方法中，設定頁面 ListView 控制項的參考、暫時停用頁面動畫，然後呼叫您稍後才會定義的_initializeLayout函式。ui.Pages.define("/pages/groupedItems/groupedItems.html", { // ... updateLayout: function (element) { /// <param name="element" domElement="true" /> // TODO: Respond to changes in layout. // *** START *** var listView = element.querySelector(".groupeditemslist").winControl; // Don't show page entrance animations when the app switches layouts. var handler = function (e) { listView.removeEventListener("contentanimating", handler, false); e.preventDefault; } listView.addEventListener("contentanimating", handler, false); this._initializeLayout(listView); // *** END *** }, // ...在
groupedItems.js檔案中，將程式碼新增到ui.Pages.define 函式，以定義_initializeLayout函式。這個函式會判斷頁面為窄版、直向或橫向配置，並據此調整頁面的 ListView 控制項。ready 和 updateLayout 方法都會呼叫這個函式。這個函式的功能如下。- 如果頁面的寬度大於 320 像素但小於 500 像素，頁面的 ListView 控制項只會將資料顯示為垂直捲動的群組清單 (500 像素是範例寬度。您可以自行決定要變更配置的寬度。在此範例中，我們選擇 500 像素做為應用程式切換配置的點。若是低於 500 像素的任何寬度，應用程式會使用窄版配置)。
- 如果頁面的寬度小於高度，ListView 控制項會將資料顯示為包含項目的垂直捲動群組清單。
- 否則，ListView 控制項會將資料顯示為包含項目的水平捲動群組格線。
ui.Pages.define("/pages/groupedItems/groupedItems.html", { // ... // *** START *** _initializeLayout: function (listView) { // Narrow layout. if (document.documentElement.offsetWidth < 500) { // Show data as a vertically-scrolling list of groups only. listView.itemDataSource = Data.groups.dataSource; listView.groupDataSource = null; listView.layout = new ui.ListLayout(); } // Portait layout. else if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) { // Show data as as a vertically-scrolling list of groups that contain items. listView.itemDataSource = Data.items.dataSource; listView.groupDataSource = Data.groups.dataSource; listView.layout = new ui.ListLayout(); } // Landscape layout. else { // Show data as a horizontally-scrolling grid of groups contain items. listView.itemDataSource = Data.items.dataSource; listView.groupDataSource = Data.groups.dataSource; listView.layout = new ui.GridLayout(); } }, // *** END *** // ...
定義群組詳細資料和項目詳細資料檢視的行為
在
pages\groupDetail\groupDetail.js檔案中，將此程式碼新增到ui.Pages.define 函式的 updateLayout 方法。每當使用者在直向和橫向配置之間切換應用程式時，就會呼叫這個方法。在這個方法中，設定頁面 ListView 控制項的參考、暫時停用頁面動畫，然後呼叫您稍後才會定義的_initializeLayout函式。同時，捲動 ListView 控制項，讓正確的項目顯示為第一個項目。ui.Pages.define("/pages/groupDetail/groupDetail.html", { // ... updateLayout: function (element) { /// <param name="element" domElement="true" /> // TODO: Respond to changes in layout. // *** START *** var listView = element.querySelector(".itemslist").winControl; // Don't show page entrance animations when the app switches layouts. var handler = function (e) { listView.removeEventListener("contentanimating", handler, false); e.preventDefault(); } listView.addEventListener("contentanimating", handler, false); var firstVisible = listView.indexOfFirstVisible; this._initializeLayout(listView); if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) { listView.indexOfFirstVisible = firstVisible; } // *** END *** }, // ...在
groupDetail.js檔案中，將程式碼新增到ui.Pages.define 函式，以定義_initializeLayout函式。這個函式會判斷頁面為直向或橫向配置，並據此調整頁面的控制項。updateLayout 方法會呼叫這個函式。這個函式的功能如下。- 如果頁面的寬度大於 320 像素但小於 500 像素，頁面的 ListView 控制項只會將資料顯示為垂直捲動的群組清單 (500 像素是範例寬度。您可以自行決定要變更配置的寬度。在此範例中，我們選擇 500 像素做為應用程式切換配置的點。若是低於 500 像素的任何寬度，應用程式會使用窄版配置)。
- 如果頁面的寬度小於高度，ListView 控制項會將資料顯示為垂直捲動清單，且不顯示群組標頭。
- 否則，ListView 控制項會將資料顯示為水平捲動的格線，且群組標頭會顯示在左側。
ui.Pages.define("/pages/groupDetail/groupDetail.html", { // ... // *** START *** _initializeLayout: function (listView) { // Portrait layout. if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) { listView.layout = new ui.ListLayout(); var header = document.getElementsByTagName("header"); header.item(0).style.display = "none"; } // Landscape layout. else { listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" }); var header = document.getElementsByTagName("header"); header.item(0).style.display = "inherit"; } }, // *** END *** // ...
切換配置
現在，您可以看到變更視窗大小時應用程式配置的變化。
- 在 Visual Studio 中，在模擬器啟動應用程式 (若要了解如何啟動，請參閱在模擬器中執行 Windows 市集應用程式)。
- 按一下 [基本觸控模式]。
- 將頁面頂端拖曳到側邊，移動分隔線，讓頁面的寬度成為 500 像素。 資料會顯示為包含項目的垂直捲動群組清單。
- 移動分隔線，讓頁面的寬度成為 320 像素。資料只會顯示為垂直捲動的群組清單。
- 按一下 [順時鐘旋轉]****。資料會顯示為包含項目的垂直捲動群組清單。
- 嘗試點選群組標題、項目標題以及上一頁按鈕，以及變更頁面寬度和裝置方向。
摘要
您現在應該了解如何設計您的應用程式，讓該應用程式在窄格式寬度和高度大於寬度的配置中，看起來很美觀且能良好運作。