设置 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。

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

ListView 的主要组成部分

一般性样式建议

始终为 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

为 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。

设置加载进度指示器的样式

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 只能为以下两个属性设置属性：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;           
}

其组标题设置了样式的 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 类作为样式选择器的一部分来自定义其他组件（如项目容器）。

通过