共用方式為


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

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

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

使用適用於 JavaScript CSS 類別的 Windows Library

如同其他適用於 JavaScript 的 Windows Library 控制項,ListView 也提供一組您可以覆寫的類別來自訂其外觀及操作方式。下列幾節描述如何使用這些類別自訂 ListView

設定 ListView 本身的樣式

在我們探討如何設定 ListView 中項目的樣式時,讓我們先了解如何設定 ListView 本身的樣式。以下是您用來設定 ListView 樣式的主要類別:

  • win-listview:設定整個 ListView 的樣式。
  • win-viewport:設定檢視區的樣式。這是捲軸的顯示位置 (如有需要)。
  • win-surface:設定 ListView 可捲動區域的樣式。當表面大於檢視區時,檢視區會顯示捲軸。

以下是典型 ListView 的範例,包含群組項目。

含有群組項目的 ListView。

下一個圖例顯示相同的 ListView,但反白 win-listviewwin-viewportwin-surface 組件:

ListView 的主要元件

一般樣式設定建議事項

一律指派識別碼給 ListView,並且在 CSS 選取器開頭包含此識別碼,如本範例所示:

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

ListView 控制項有許多預設樣式。如果您嘗試覆寫其中一個樣式但卻未見到任何效果,有可能是您的 CSS 選取器不夠明確,因而未能覆寫預設樣式。

設定整個 ListView 控制項的樣式

如果您要將固定的背景影像新增到顯示在內部項目後面的 ListView 控制項,或者如果要將框線套用到整個控制項,請覆寫 win-listview 類別。這個範例會為 ListView 提供影像背景以及紅色框線。

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

這裡是 ListView 現在看起來的樣子:

包含框線和背景影像的 ListView

設定 ListView 的邊界樣式

使用 win-surface 類別套用 ListView 的邊界。不要在主控 ListViewdiv 元素套用邊界,因為無法正確設定其樣式。改用 win-surface。如果增加 win-surface 的邊界,請務必據以調整 ListView 的高度。 設定高度的方式為設定主控 ListViewdiv 元素的樣式。

使用 list layout 時,請不要增加 win-surface 的邊界或邊框距離。

依照預設,群組標頭的左邊界為 70 像素。如果您在顯示群組時覆寫 win-surface,建議您將左邊界設為 70 像素,再加上想要的額外邊界。

根據檢視區的捲動方向設定樣式

您可以使用 win-horizontalwin-vertical 類別,在水平或垂直捲動 ListView 時套用樣式。 這個範例會在 ListView 可以水平捲動時,將左邊界新增到檢視區。

#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

下一個範例會在 ListView 可以垂直捲動時,移除左邊界。在貼齊檢視狀態時,一般都是提供垂直方向的 ListView


#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
} 

設定整個可捲動區域的樣式

若要設定 ListView 可捲動部分的樣式,請覆寫 win-surface 類別。這個範例會在使用者捲動項目時,將捲動的背景影像套用到 ListView


#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
} 

具有已設定樣式表面的 ListView

設定載入進度指示器的樣式

ListView 會在載入項目時,顯示 progress 指示器。 您可以透過覆寫 win-progress 類別來設定這個指示器的樣式。這個範例會隱藏 progress 指示器。

#myListView .win-listview .win-progress{
    display: none;
}

設定項目與群組的樣式

ListView 包含群組和項目。

  • 每個群組都會以 win-groupheader 類別的方式包含在群組標頭中。
  • 每個項目都會以 win-container 類別的方式包含在項目容器中。

ListView 的群組標頭與容器元件

設定項目的樣式

ListView 中有兩種設定項目樣式的方式。您可以將樣式套用到項目範本,或者覆寫 win-container 類別。您必須在範本中設定項目的大小。如果沒有設定項目的大小,可能無法取得您要的配置。

設定項目的大小:

  • 如果您要使用 WinJS.Binding.Template,請設定 WinJS.Binding.Template 元素子系的大小,如以下範例所示:

    <!-- The WinJS.Binding.Template element. -->
    <div id="templateExample" data-win-control="WinJS.Binding.Template">
    
        <!-- This is the root element. Be sure to set its width and height. -->
        <div style="width: 120px; height: 125px;">
    
    
            <img src="#" data-win-bind="alt: title; src: picture"
                style="width: 60px; height: 60px;" />
            <div>
                <h4 data-win-bind="innerText: title">
                </h4>
    
                <h6 data-win-bind="innerText: text">
                </h6>
            </div>
        </div>
    </div>
    
  • 如果您要使用範本函式,則設定您的函式傳回的任何 DOM 元素的寬度和高度。

設定項目容器的樣式

若要設定項目容器的樣式,請覆寫 win-container 類別。本範例會在每個項目的容器增加邊界。

#myListView .win-listview .win-container{
    margin: 2px;
}

您只能針對 win-container 的以下兩個屬性設定樣式:marginbackground

若要讓項目變透明,請將背景色彩設為透明。本範例將項目變為透明:

#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}

設定項目邊界和邊框距離的樣式

若要在項目之間增加間距,請在 win-container 類別設定邊界。我們建議不要透過增加項目的邊框距離來建立項目之間的間距;請改為使用邊界。同一個 ListView 中之所有項目的邊界都必須相同。

ListView 開始顯示項目之後,請不要變更 win-container 的邊界或邊框距離。

設定群組標頭的樣式

若要設定群組標頭的樣式,請覆寫 win-groupheader 類別。本範例會對群組標頭增加灰色的背景。

#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}    

具有已設定群組標頭樣式的 ListView

設定項目互動的樣式

設定暫留狀態下的項目樣式

當使用者將指標移到項目上時,該項目會進入暫留狀態。若要變更暫留狀態下的項目樣式,請使用 hover 虛擬類別。這個範例會變更暫留項目的背景和外框。

#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}  

暫留狀態下包含項目的 ListView

設定擁有焦點的項目樣式

若要設定擁有焦點的項目樣式,請在設定項目容器的樣式時,使用 win-focus 類別做為樣式選取器的一部分。若要設定焦點外框的樣式,請使用 win-focusedoutline 類別。本範例會將已設定焦點的外框變更為紅色虛線。

#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

設定所選項目的樣式

依照預設,選取的項目會顯示所選框線。若要讓選取的項目能有「填滿」外觀,請將 win-selectionstylefilled CSS 類別附加到 ListView

若要進一步自訂所選項目的外觀,可以覆寫以下類別:

  • win-selectionborder

    設定所選項目周圍的框線樣式。

  • win-selectionbackground

    設定所選項目的背景樣式。

  • win-selectionhint

    設定選取提示的樣式,也就是所選項目後面出現的另一個核取記號。撥動項目就可以看到選取提示。

  • win-selectioncheckmark

    所選項目上的核取記號。

  • win-selectioncheckmarkbackground

    所選項目上核取記號的背景。

您也可以新增 win-selected 類別做為樣式選取器的一部分,以便在選取項目時自訂其他元件 (例如項目容器)。