你可以通过许多方式来自定义 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,如下面的示例中所示:
#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
添加边距或填充。
默认情况下,组标题的左边距为 70px。如果在显示组时替代 win-surface
,则我们建议你让左边距等于 70px 与你所需的额外边距之和。
基于视区的滚动方向设置视区的样式
你可以使用 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 元素的子元素的大小,如以下示例所示:
HTML<!-- 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 只能为以下两个属性设置属性: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 类作为样式选择器的一部分来自定义其他组件(如项目容器)。
遵循 Windows 8 的类型和布局网格
Windows 8 功能和应用遵循一个公用的类型和布局网格,该网格在整个系统中提供一致的个人设置—有关详细信息,请参阅设置应用页面的布局。 ListView 应当显示根据这个类型和布局网格调整大小并与其对齐的项目。 可通过三种方法确保上述操作正确:
- 可以使用一组预定义的、设计正确而且能够完成上述操作的项模板。有关模板,请参阅网格布局的项模板和列表布局的项模板。
- 你可以使用 Microsoft Visual Studio Grid App。它附带了一个使用网格布局的 ListView。有关详细信息,请参阅适用于 Windows 应用商店应用的 JavaScript 项目模板。
- 你可以阅读设置应用页面的布局一文并创建自己的项模板。