共用方式為

快速入門：定義應用程式配置 (HTML)

  • 發行項

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

您可以為任何視窗大小或方向定義應用程式配置。

如需了解此功能的運作情形，請參閱應用程式功能，從開始到完成系列: Windows 市集應用程式 UI，從開始到完成

目標: 閱讀完本文之後，您將能深入了解如何使用 HTML、階層式樣式表 (CSS) 及 JavaScript 來建立流暢的 UI，並讓 UI 看來美觀且能良好運作。

先決條件

  • 先思考如何設計您的應用程式。

    您可以在定義願景中了解如何規劃和設計 Windows 執行階段應用程式。

  • 熟悉 Windows 8.1 中可調整大小的視窗。

    您可以在配置和縮放的 UX 指導方針中深入了解檢視狀態。

  • 了解 CSS 媒體查詢。

    媒體查詢定義於全球資訊網協會 (W3C) 媒體查詢規格。您可以在我們的 CSS 媒體查詢範例中查看進行中的媒體查詢。

  • 了解如何使用階層式樣式表層級 3 (CSS3) 進階配置功能，特別是 CSS3 格線對齊。

    您可以在 CSS 中了解 CSS3 進階配置功能和格線對齊。

含有 CSS 的調適型配置範例

本文藉由描述如何在含有 CSS 的調適型配置範例中實作配置，以說明定義應用程式配置時所包含的基本概念。這個範例是模擬天氣的應用程式，會顯示當天天氣以及十天的預測。它會示範如何使用 CSS 和 HTML、CSS 格線、ListView 控制項及 CSS 媒體查詢，以建立流暢的應用程式配置。

深入討論之前，先讓我們了解含有 CSS 的調適型配置範例結構。應用程式是由三個 HTML 頁面所組成。第一個頁面是稱為 App.html 的頂層頁面，會定義應用程式 UI 項目的主要表面。其中包含返回按鈕、標題和子標題、應用程式功能表、應用程式列按鈕，以及顯示內容的區域 (下列影像中的白色區域)。

範例應用程式的主頁面

其他兩個 HTML 頁面 (Current.html 和 TenDay.html) 會定義顯示於主頁面內容區域中的內容結構。Current.html 頁面會顯示當天天氣的詳細資料：

目前的天氣頁面

TenDay.html 頁面會顯示十天預測的詳細資料：

十天預測頁面

我們會將重點放在含有 CSS 的調適型配置範例的部分，其中會定義應用程式主頁面的配置，以及十天預測的配置。

這是在 10.6 吋顯示器以下列方式顯示十天預測時應用程式主頁面的外觀：全螢幕直向和橫向解析度為 1366 x 768、與另一個應用程式並列、重新調整為窄版配置和寬版配置。

直向、橫向、窄版和寬版配置

確定應用程式會填滿可用的螢幕區域

設計良好的應用程式會充分利用所有可用螢幕區域的 UI 表面。首先，應用程式需要針對各種不同尺寸大小的裝置硬體規格、解析度及方向進行調整，看似是一項困難的挑戰。幸運的是，CSS 可以很容易做到這一點。

若要確定應用程式會充分利用所有可用的螢幕區域：

  1. 使用 div 元素做為頁面上所有其他 UI 元素的頂層容器。

    <body>
    <div class="win-ui-dark appGrid">
        <!-- TODO: Define page structure here. -->
    </div>
</body>

  2. 使用 CSS 屬性 (vw 和 vh)，設定與檢視區相對之 div 的 width 和 height 屬性。例如，使用 100vw (檢視區寬度) 和 100vh (檢視區高度) 來填滿檢視區，如下所示。

    .appGrid {
    width: 100vw;
    height: 100vh;
    /* TODO: Add other styles here. */
}

    vw 和 vh 可以為任何元素指定，無論階層有多深。因為檢視區的大小內容不會改變，所以不需要考慮繼承的大小。

    注意  這個範例將 width 和 height 屬性設為 100%。

     

定義主頁面的基本配置

當您配置應用程式 UI 時，最好從橫向開始。定義橫向配置之後，就可以輕易地讓它適應直向和窄寬度配置。

使用 HTML 來定義頁面的 UI 項目

應用程式 UI 通常包含如下的項目：瀏覽按鈕、標題、功能表、控制項等。新增這些 UI 項目，以做為頁面頂層 div 元素的子 HTML 元素。

下列 HTML 定義含有 CSS 的調適型配置範例應用程式頂層頁面的 UI 項目。項目包含返回按鈕、標題和子標題、應用程式功能表、主要內容區域，以及應用程式列按鈕。

<body>
    <div class="win-ui-dark appGrid">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron">&#xE099</span></span>
                <span class="win-type-x-large pagesubtitle">Rainer</span>
            </h1>
        </header>
        <div id="headerFlyout" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
        </div>
        <div class="appViewContentMask">
            <div class="appViewContent">
                <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
                <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
            </div>
        </div>
    </div>
    <div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
    </div>
</body>

使用 CSS 格線，在 HTML 頁面上放置 UI 項目

達成流暢且可調整的 UI 配置的其中一個最好方法是使用 CSS 格線。這是因為格線可以自動延伸來填滿系統提供給它的空間，而它會公開一組豐富的屬性，使其可以輕易地為不同視窗大小量身打造 UI 配置。由於格線中元素的位置與指定它們的順序無關 — 也就是說，它們的位置純粹是透過 CSS 來指定，而不是依照它們在 HTML 標記中的順序來決定 — 您很容易就能為元素在不同畫面大小或不同方向中指定不同的排列方式，甚至可以避免在部分配置中完整顯示某些元素。

配置主頁面

  1. 含有 CSS 的調適型配置範例應用程式會將 CSS 格線套用到 App.html 頁面的頂層 div，做法是設定 div -ms-grid 的 display 屬性。這個頂層格線會定義將 UI 項目放置於應用程式主頁面上的整體結構。

  2. 接著，範例應用程式會藉由設定 -ms-grid-columns 和 -ms-grid-rows 屬性的值，以定義格線的欄與列。

    下列 CSS 程式碼會將格線套用到範例主頁面上的頂層 div。 這個格線是用來定位組成應用程式標頭 (返回按鈕、標題和子標題，以及應用程式功能表) 的項目，以及設定主要內容區域的位置。

    .appGrid {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 120px 1fr; 

    /* Other properties omitted for clarity. */

}

    上述 CSS 程式碼會建立含有兩欄與兩列的格線。第一欄為 120 個像素寬，而第二欄為一個「分數單位」寬。 這表示欄寬會自動延伸，以填滿第一欄未佔據的可用空間。列是使用類似的方式來定義。

    這個圖例顯示格線如何分割應用程式的主頁面。

    主頁面格線

  3. 接著，含有 CSS 的調適型配置範例會藉由將每個項目指派給格線中特殊的儲存格，以設定 UI 項目的位置。若要那樣做，範例會將 -ms-grid-column 和 -ms-grid-row 屬性套用到頁面上的元素。CSS 格線支援數種其他屬性，可以用來將項目放置在與儲存格界限相對的地方，並允許橫跨多欄或多列。若要深入了解，請參閱格線配置。

    下列 CSS 程式碼會將範例應用程式主頁面的 header 元素放置在頂層格線的欄 1、列 1 中，並允許該元素橫跨格線的這兩欄。 此程式碼也會在頂層格線的欄 1、列 1 中建立「子」格線。子格線可用來放置組成標頭 (返回按鈕、標題和子標題，以及應用程式功能表) 的個別項目。

    header[role=banner] {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 2;

    /* Child grid for positioning header items.*/
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 1fr;
}

    上述程式碼會建立下列影像中以藍色強調顯示之區域中的格線。

    範例應用程式標頭的子格線

    含有 CSS 的調適型配置範例會使用巢狀 div 元素來定義主要內容區域，當天預測和十天的預測都會出現在其中：

    <div class="appViewContentMask">
    <div class="appViewContent">
        <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
        <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
    </div>
</div>

    請注意，在上述範例中，適用於 JavaScript 的 Windows Library HtmlControl 控制項可用來動態包含當天和十天預測的 HTML 頁面。如需深入了解 WinJS 控制項，請參閱快速入門：新增 WinJS 控制項與樣式。

    下列 CSS 程式碼會 appViewContentMask div 放置在頂層格線的欄 2、列 2。它也會設定屬性，以確定內容會填滿整個格線儲存格，任何儲存格中無法容納的內容都會隱藏。

    .appViewContentMask {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Other properties omitted for clarity. */

}

    下列 CSS 程式碼會將 appViewContent div 放入子格線，這個子格線包含可以填滿 appViewContentMask div 所定義區域的單一儲存格。使用子格線可以在檢視狀態變更應用程式的大小或方向時輕鬆地重新編排內容。

    
.appViewContent {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

    CSS 程式碼會將內容區域的格線指派至以藍色強調顯示的區域：

    範例應用程式內容區域中的格線

定義十天預測的基本配置

十天預測是使用 WinJS ListView 控制項來管理和顯示的項目集合。 每個項目都包含一個影像和一組字串，字串中包括日期、高溫和低溫、體感溫度，以及下雪機率：

十天預測的項目配置：

下列 HTML 頁面會定義十天預測中項目的 UI。含有 CSS 的調適型配置範例使用 WinJS 範本和資料繫結，提供資料給 ListView 控制項。這個主題的重點在於配置您的 UI，所以我們將不會在此處討論範本和資料繫結。如果您想要深入了解範本和資料繫結，請參閱如何使用範本繫結資料。

<body>
    <div class="tenDayPage">
        <div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
            <div class="tenDayGrid">
                <div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
                </div>
                <div class="tenDayImg">
                    <img data-win-bind="src: imgSrc" />
                </div>
                <div class="win-type-x-large tenDayHighLow">
                    <span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
                    <span>/</span>  
                    <span class="tenDayLow" data-win-bind="innerHTML: low"></span>
                </div>
                <div class="tenDayFeelsLike">
                    <span>Feels like </span>
                    <span data-win-bind="innerHTML: feelsLike"></span>
                </div>
                <div class="tenDayChanceOfSnow">
                    <span>Chance of snow is </span>
                    <span data-win-bind="innerHTML: chanceOfSnow"></span>
                </div>
            </div>
        </div>
        <div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
    </div>
</body>

請注意，上述範例會使用特殊的 WinJS CSS classes for typography，為日期和高/低溫度字串設定超大字型大小。這就是 class="win-type-x-large" 在 tenDayDate 和 tenDayHighLow div 元素中所代表的意義。

範例應用程式會使用下列 CSS 程式碼，以確定 TenDay.html 頁面及其 ListView 控制項會填滿父容器 (應用程式主頁面的內容區域)。

/* Size Page to full size of parent container */
.tenDayPage
{
    height: 100%;
}

/* List View Control */
.tenDayListView
{
    width: 100%;
    height: 100%;
}

使用 CSS 媒體查詢來套用檢視特定的配置與樣式

藉由使用 CSS 媒體查詢，您可以輕易地根據視窗大小來定義不同的樣式，以套用到應用程式中的 HTML 項目。您可以針對每個不同的配置使用個別的媒體查詢，也可以結合媒體查詢，將相同的樣式組套用到多個配置。我們將在此處說明含有 CSS 的調適型配置範例用來配置其主頁面和十天預測中之項目的媒體查詢。

配置窄版配置的主頁面

如果您使用範本應用程式，將會注意到 UI 項目的大小和配置在直向、橫向及重新調整為寬版的配置之間並沒有太大變化。不過，如果應用程式的寬度重新調整為少於 500 像素，您會看到下列變更：

  • 應用程式標頭中的 UI 項目會變得較小。
  • 配置會從兩欄與兩列變更為單欄，其中標頭會佔據第一列，而主要內容區域會佔據第二列。

窄版和寬版配置的標頭配置差異

這些變更是透過 CSS 媒體查詢來套用，這個 CSS 媒體查詢會定義不同的樣式組，特別針對窄寬度加以定義：

@media (max-width:499px) {
    .appGrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 120px 1fr;
        width: 100%;
        height: 100%;
    }

    header[role=banner] {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-columns: 60px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            margin-left: 20px;
            margin-top: 75px;
        }

        header[role=banner] .titlearea {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            margin-top: 69px;
            max-width: 260px;
        }

    .appViewContentMask {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

在上述 CSS 程式碼中，–ms-grid-columns 屬性的新值會將應用程式的主要格線 (appGrid) 從兩欄變更為一欄。CSS 程式碼也會為應用程式標頭中的項目定義新的子格線，並將標頭項目放置在新格線中。最後，程式碼會將內容區域 (appViewContentMask) 從舊格線的欄 2、列 2 移動到新格線的欄 1、列 2。

配置窄版配置的十天預測

當您將應用程式的寬度重新調整為少於 500 像素時，會注意到十天預測中個別項目的配置變化。 當寬度大於 500 像素，會使用單欄格線垂直配置項目。當寬度小於 500 像素，會切換為使用兩欄格線水平配置項目。

下列影像顯示十天預測中的項目在不同配置中看起來的樣子。

窄版和寬版配置的項目配置差異

為了完成各種不同的配置，範例會根據目前的檢視狀態，使用 CSS 媒體查詢來套用樣式。範例會定義一組所有檢視狀態通用的樣式，以及另一組僅適用於寬度小於 500 像素的配置：

/* Styles that are common across all view states */
    .tenDayGrid
    {
        width: 190px;
        height: 250px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: (auto)[5];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 5;
    }
}

/* Define the template for the width less than 500px */
@media (max-width:499px)
{
    .tenDayDate
    {
        font-weight: 600;
    }

    .tenDayDate > .day
    {
       font-weight: 200;
    }

    .tenDayHighLow
    {
        font-weight: 300;
    }

    .tenDayFeelsLike, .tenDayChanceOfSnow
    {
        font-weight: 300;
    }

    .tenDayGrid
    {
        width: 250px;
        height: 150px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: auto 1fr;
        -ms-grid-rows: (auto)[4];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 2;
        -ms-grid-row: 3;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 4;
    }
}

視需要使用 JavaScript 來處理視窗重新調整大小事件

最好是使用 CSS 和媒體查詢定義，盡可能定義應用程式的配置數目。不過，有時您需要使用 JavaScript 來處理 CSS 無法處理的配置問題。

例如，範例應用程式會使用 WinJS ListView 控制項，以顯示十天預測中的項目，並根據應用程式寬度，在清單和格線模式之間切換 ListView。當範例應用程式為 500 像素或更寬時，ListView 會使用格線模式，以垂直和水平方式來調整項目以填滿父容器。 當應用程式小於 500 像素時，ListView 會使用清單模式，以垂直清單來安排項目。

若要在 JavaScript 中建立檢視特定的配置，請為視窗重新調整大小事件登錄事件接聽程式。在事件接聽程式程式碼中，查詢 clientWidth 屬性，並據以設定配置。

在下列範例中，含有 CSS 的調適型配置範例會將 ListView 設定為格線模式。如果視窗寬度小於 500 像素，ListView 會變更為清單模式。應用程式的事件接聽程式會接聽重新調整大小事件，然後查詢 clientWidth 屬性並據此變更 ListView。

function ready(element, options) { 
        element.winControl = this; 
        var that = this; 
        WinJS.UI.process(element).done(function () { 
            that.listView = element.querySelector(".tenDayListView").winControl; 
            var itemTemplate = element.querySelector(".tenDayTemplate"); 
            var listViewLayout = new WinJS.UI.GridLayout(); 
 
            if (document.body.clientWidth <= 499) { 
                listViewLayout = new WinJS.UI.ListLayout(); 
            } 
            else { 
                element.style.opacity = "0"; 
            } 
 
            // ... 
 
            window.addEventListener("resize", tenDayResize, false); 
        }); 
    } 
 
    function tenDayResize(e) { 
 
        var listview = document.querySelector(".tenDayListView").winControl; 
 
        if (document.body.clientWidth <= 499) { 
            if (!(listview.layout instanceof WinJS.UI.ListLayout)) { 
                listview.layout = new WinJS.UI.ListLayout(); 
            } 
        } 
        else { 
            if (listview.layout instanceof WinJS.UI.ListLayout) { 
                listview.layout = new WinJS.UI.GridLayout(); 
            } 
        } 
    }

摘要

您現在應該了解如何使用 HTML、CSS 及 JavaScript 為您的應用程式建立流暢的 UI，這類 UI 在所有視窗大小中看起來美觀且能良好運作。

相關主題

含有 CSS 的調適型配置範例

CSS 媒體查詢範例

Windows 8 的實機操作實驗室

開發閱讀器應用程式

媒體查詢規格

ListView 控制項

Internet Explorer 10 開發人員指南