Стилизация ListView и его элементов (HTML)

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Есть множество способов настройки объектов ListView. Вы можете задать стиль всего объекта ListView, составляющих его элементов или шаблонов, по которым создаются эти элементы.

Использование классов CSS библиотеки Windows для JavaScript

Подобно другим элементам управления библиотеки Windows для JavaScript, объект 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 и указывайте этот идентификатор в начале селектора 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. Не задавайте поля в элементе div, где размещается ListView, поскольку тогда стиль будет задан неправильно. Для этого используется класс win-surface. Если поле добавляется в классе win-surface, то необходимо изменить высоту ListView с учетом поля. Для задания высоты изменяется стиль элемента div, в котором размещается ListView.

Не добавляйте поля и отступы в win-surface, если используется list layout.

По умолчанию заголовки групп имеют левое поле в 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 со стилизованной поверхностью

Настройка стиля индикатора хода выполнения загрузки

Объект 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 должны иметь одинаковые поля.

Не изменяйте поля и отступы в win-container после того, как началось отображение элементов в ListView.

Настройка стиля заголовка группы

Чтобы задать стиль заголовка группы, переопределите класс 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;
                     
}

Настройка стиля выбранных элементов

По умолчанию выбранные элементы имеют границу выделения. Чтобы задать стиль "заливки" для выбранных элементов, присоедините класс CSS win-selectionstylefilled к объекту ListView.

Для дополнительной настройки внешнего вида выбранных элементов можно переопределить следующие классы.

win-selectionborder

Определяет стиль границы вокруг выбранного элемента.
win-selectionbackground

Определяет стиль фона за выбранными элементами.
win-selectionhint

Определяет стиль маркера выделения — вторую пометку, которая появляется за выбранным элементом. Если вы проведете пальцем по элементу, появится маркер выделения.
win-selectioncheckmark

Пометка на выбранном элементе.
win-selectioncheckmarkbackground

Фон пометки на выбранном элементе.

Класс win-selected можно использовать для настройки стиля других компонентов, таких как контейнер элемента, если элемент уже выбран.

Поделиться через