html listview 实现原理,設定 ListView 及其項目的樣式 (HTML)

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

03/04/2016

本文內容

[ 本文的目標對象是撰寫 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，但反白 win-listview、win-viewport 和 win-surface 組件：

一般樣式設定建議事項

一律指派識別碼給 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 的邊界樣式

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

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

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

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

您可以使用 win-horizontal 和 win-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 會在載入項目時，顯示 progress 指示器。 您可以透過覆寫 win-progress 類別來設定這個指示器的樣式。這個範例會隱藏 progress 指示器。

#myListView .win-listview .win-progress{

display: none;

}

設定項目與群組的樣式

ListView 包含群組和項目。

每個群組都會以 win-groupheader 類別的方式包含在群組標頭中。

每個項目都會以 win-container 類別的方式包含在項目容器中。

設定項目的樣式

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

設定項目的大小：

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

style="width: 60px; height: 60px;" />

如果您要使用範本函式，則設定您的函式傳回的任何 DOM 元素的寬度和高度。

設定項目容器的樣式

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

#myListView .win-listview .win-container{

margin: 2px;

}

您只能針對 win-container 的以下兩個屬性設定樣式：margin 和 background。

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

#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;

}

設定項目互動的樣式

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

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

#myListView .win-container:hover {

background-color: red;

outline: orange solid 5px;

}

設定擁有焦點的項目樣式

若要設定擁有焦點的項目樣式，請在設定項目容器的樣式時，使用 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 類別做為樣式選取器的一部分，以便在選取項目時自訂其他元件 (例如項目容器)。