設定 FlipView 及其項目的樣式 (HTML)

發行項
03/04/2016

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

您可以透過多種方式自訂 FlipView。您可以設定 FlipView 本身的樣式、其中包含的項目，或組成這些項目的範本。

先決條件

快速入門：新增 FlipView

可以設定樣式的 FlipView 部分

如同大多數適用於 JavaScript 的 Windows Library 控制項，FlipView 也提供一組可以用來設定控制項特定部分之樣式的 CSS 類別。例如，若要設定 FlipView 控制項的左邊瀏覽按鈕的樣式，您要覆寫 win-leftnav CSS 類別。

下圖為可設定樣式的 FlipView 控制項部分。

可以設定樣式的 FlipView 控制項部分

設定 FlipView 本身的樣式

若要建立 FlipView，請建立 div 元素，並將 data-win-control 屬性設為 "WinJS.UI.FlipView"。您可以將 CSS 樣式套用到這個 div 元素 (主機元素)，如同套用到任何其他元素一樣。實際上，一定要指定主機 div 元素的 width 和 height。

 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

套用基本樣式的 FlipView 控制項

您也可以使用 win-flipview 類別來設定整個 FlipView 的樣式。建立好您的 FlipView 後，這個類別會新增到主機 div 元素。

設定 FlipView 控制項瀏覽按鈕的樣式

FlipView 有四個瀏覽按鈕。當 FlipView 控制項的 orientation 為 "horizontal"，會使用左和右瀏覽按鈕。當 orientation 為 "vertical" 時，會使用上和下瀏覽按鈕。您可以使用下列組件設定 FlipView 控制項瀏覽按鈕的樣式。

win-navbottom
設定下瀏覽按鈕的樣式。
win-navbutton
設定所有瀏覽按鈕的樣式。
win-navleft
設定左瀏覽按鈕的樣式。
win-navright
設定右瀏覽按鈕的樣式。
win-navtop
設定上瀏覽按鈕的樣式。

本範例將左瀏覽按鈕設為紅色，框線設為黑色。

#styledHorizontalFlipview .win-navleft {
    background-color: red;
    border: 2px solid black;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

FlipView 和已設定樣式的左瀏覽按鈕

用來設定瀏覽按鈕樣式的虛擬類別

您可以使用虛擬類別做為選取器，設定瀏覽按鈕處於特定狀態時的按鈕樣式。下列為設定瀏覽按鈕樣式的一些較有用的虛擬類別：

win-navbutton:hover
當使用者將游標放在瀏覽按鈕上但並未按一下予以啟用時，將樣式套用到 FlipView 控制項瀏覽按鈕。

這個範例會定義暫留狀態的瀏覽按鈕樣式。

#styledHorizontalFlipview .win-navbutton:hover {
    background-color: orange;
    border: 2px solid white;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

win-navbutton:active
啟用按鈕時將樣式套用到 FlipView 控制項瀏覽按鈕。瀏覽按鈕會在使用者按下控制項和釋放控制項的這段時間內啟用。如果使用者按下控制項然後將指標拖曳離開按鈕，在使用者釋放指標之前控制項仍為啟用。

這個範例會變更啟用的瀏覽按鈕背景色彩。

#styledHorizontalFlipview .win-navbutton:active {
    background-color: limegreen;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

設定項目的樣式

設定項目樣式的其中一個方法是使用 CSS 來設定範本內 HTML 元素的樣式。

本範例使用 CSS 來設定範本自己的樣式。

.itemStyling p {
    margin-left: 120px;
}

.simpleItemTemplateRoot {
    width: 480px; 
    height: 310px;
}

.simpleItemTemplateImage {
    height: 270px; 
    width: 480px;
}

.simpleItemTemplateText {
    height: 40px; 
    padding: 5px;
}

 <div id="simpleItemTemplate" 
     data-win-control="WinJS.Binding.Template" 
     style="display: none">
    <div class="simpleItemTemplateRoot">
        <img class="simpleItemTemplateImage"
             src="#" 
             data-win-bind="src: picture; alt: title"
             />       
        <div class="simpleItemTemplateText" 
            data-win-bind="innerText: title" >
        </div>     
    </div>
</div>
  
 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

您也可以使用 win-item CSS 類別來設定含有項目之 div 元素的樣式。