html原生listview,设置 ListView 及其各项的样式 (HTML)

设置 ListView 及其各项的样式 (HTML)

03/04/2016

本文内容

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

你可以通过许多方式来自定义 ListView。你可以为 ListView 本身、它所包含的项目或者构成这些项目的模板设置样式。

使用适用于 JavaScript 的 Windows 库 CSS 类

与其他适用于 JavaScript 的 Windows 库控件一样，ListView 提供一组类，你可以替代这些类来自定义该控件的外观。后面的几个部分介绍如何使用这些类来自定义 ListView。

设置 ListView 本身的样式

在介绍如何为 ListView 中的项目设置样式之前，让我们回顾一下如何为 ListView 本身设置样式。下面是可用来为 ListView 设置样式的主类：

win-listview：为整个 ListView 设置样式。

win-viewport：为视区设置样式。必要时，滚动条将显示在视区中。

win-surface：为 ListView 的可滚动区域设置样式。当图面大于视区时，视区中会显示滚动条。

下面是包含分组项的典型 ListView 的示例。

下图显示的是同一个 ListView，但是它的 win-listview、win-viewport 和 win-surface 部分呈突出显示状态：

一般性样式建议

始终为 ListView 分配一个 ID，并在 CSS 选择器的开头包括该 ID，如下面的示例中所示：

#myList