Aplicación de estilos a ListView y sus elementos (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Un ListView se puede personalizar de muchas maneras. Puedes aplicar un estilo al propio ListView, a los elementos que contiene o a las plantillas que forman esos elementos.

Usar las clases de la biblioteca de Windows para JavaScript

A diferencia de otros controles de la biblioteca de Windows para JavaScript, ListView ofrece un conjunto de clases que puedes invalidar para personalizar su aspecto. En las siguientes secciones se describe cómo usar estas clases para personalizar ListView.

Aplicar estilos a ListView

Antes de tratar cómo aplicar estilos a los elementos de ListView, veamos cómo aplicar estilos al propio ListView. Estas son las clases primarias que se usan para aplicar estilos a ListView:

• win-listview: aplica estilo a todo el ListView.
• win-viewport: aplica estilo a la ventanilla. Aquí es donde se muestra la barra de desplazamiento si es necesario.
• win-surface: aplica estilo al área desplazable de ListView. Cuando la superficie es mayor que la ventanilla, la ventanilla muestra barras de desplazamiento.

Este es un ejemplo de un ListView típico que contiene elementos agrupados.

En la siguiente imagen se muestra el mismo ListView con sus elementos win-listview, win-viewport y win-surface resaltados:

Recomendaciones generales de estilos

Asigna siempre un identificador a tu ListView e incluye ese identificador al comienzo de tu selector CSS, como en este ejemplo:

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

El control ListView tiene muchos estilos predeterminados. Si intentas invalidar uno de los estilos y no ves ningún efecto, puede que tu selector CSS no sea lo suficientemente específico como para invalidar los estilos predeterminados.

Aplicar estilo a todo el control ListView

Si quieres agregar una imagen de fondo fija al control ListView que se muestre detrás de los elementos que hay dentro, o si quieres aplicar un borde a todo el control, invalida la clase win-listview. En este ejemplo se agrega una imagen de fondo y un borde rojo a ListView.

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Este es el aspecto que ListView tiene ahora:

Márgenes de estilos en un ListView

Usa la clase win-surface para aplicar márgenes en el ListView. No apliques márgenes al elemento div que hospeda el ListView, porque no se le aplicará correctamente el estilo. En su lugar, usa win-surface. Si agregas un margen a win-surface, asegúrate de ajustar la altura del ListView según corresponda. La altura se establece al aplicar un estilo al elemento div que hospeda el ListView.

No agregues márgenes ni espaciado interno a win-surface cuando uses un list layout.

De manera predeterminada, los encabezados de grupo tienen un margen izquierdo de 70px. Si invalidas win-surface al mostrar grupos, te recomendamos que dejes el margen izquierdo de 70px más el margen adicional que quieras.

Aplicar estilos a la ventanilla en función de su dirección de desplazamiento

Puedes usar las clases win-horizontal y win-vertical para aplicar estilos a ListView cuando se desplaza horizontalmente o verticalmente. En este ejemplo se agrega un margen izquierdo a la ventanilla cuando el ListView se puede desplazar horizontalmente.

#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

En el ejemplo siguiente, se quita el margen izquierdo cuando el ListView se puede desplazar verticalmente. Es habitual darle a ListView una orientación vertical cuando el estado de visualización está ajustado.

#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
} 

Aplicar estilos a todo el área de desplazamiento

Para aplicar un estilo a la parte desplazable de ListView, invalida la clase win-surface. En este ejemplo se aplica una imagen de fondo a ListView que se desplaza cuando el usuario se desplaza por los elementos.

#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
} 

Aplicar estilos al indicador de progreso de carga

El ListView muestra un indicador progress cuando se cargan elementos. Puedes aplicar un estilo a este indicador si invalidas la clase win-progress. En este ejemplo, se oculta el indicador progress.

#myListView .win-listview .win-progress{
    display: none;
}

Aplicar estilos a elementos y grupos

El control ListView contiene grupos y elementos.

• Cada grupo se incluye en un encabezado de grupo, representado por la clase win-groupheader.
• Cada elemento se incluye en un contenedor de elementos, representado por la clase win-container.

Aplicar estilos a un elemento

Existen dos maneras de aplicar estilos a elementos de ListView. Puedes aplicar estilos a la plantilla de elemento o puedes invalidar la clase win-container. En la plantilla, hay algo que siempre debes hacer: establecer el tamaño de los elementos. Si no lo haces, es posible que no puedas obtener el diseño que quieres.

Para establecer el tamaño de los elementos:

• Si estás usando un WinJS.Binding.Template, establece el tamaño del elemento secundario de WinJS.Binding.Template, como se muestra en el ejemplo:

  <!-- 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>
  

• Si estás usando una función de plantilla, establece el ancho y el alto de cualquier elemento DOM devuelto por la función..

Aplicar estilos al contenedor de elementos

Para aplicar un estilo al contenedor de elementos, invalida la clase win-container. En este ejemplo se agrega un margen a cada contenedor de elementos.

#myListView .win-listview .win-container{
    margin: 2px;
}

Hay solo dos propiedades a las que puedes aplicar estilo en win-container: margin y background.

Para hacer un elemento transparente, establece el color de fondo en transparente. En este ejemplo se hace un elemento transparente:

#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}

Aplicar estilos a márgenes y al espaciado interno de elementos

Para agregar espaciado entre elementos, establece un margen en la clase win-container. No te recomendamos agregar espaciado interno a los elementos para crear espacio entre ellos; en su lugar, usa un margen. Todos los elementos en el mismo control ListView deben tener el mismo margen.

No cambies el margen o el espaciado interno en win-container después de que el control ListView haya comenzado a mostrar elementos.

Aplicar estilos al encabezado de grupo

Para aplicar un estilo al encabezado de grupo, invalida la clase win-groupheader. En este ejemplo se agrega un fondo gris a los encabezados de grupo.

#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}    

Aplicar estilo a interacciones de elementos

Aplicar estilos a un elemento en el estado de movimiento del mouse

Cuando el usuario mueve el puntero sobre un elemento, el elemento entra en el estado de movimiento del mouse. Para cambiar el estilo de un elemento en este estado, usa la seudoclase hover. En este ejemplo se cambia el fondo y el contorno de un elemento sobre el que se mueve el mouse.

#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}  

Aplicar estilos a elementos que tienen el foco

Para aplicar estilos a un elemento que tiene el foco, usa la clase win-focus como parte del selector de estilos al aplicar estilos al contenedor de elementos. Para aplicar un estilo al contorno con foco, usa la clase win-focusedoutline. En este ejemplo se cambia el contorno con foco a una línea discontinua roja.

#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

Aplicar estilos a elementos seleccionados

De manera predeterminada, los elementos seleccionados muestran un borde de selección. Si quieres que tus elementos seleccionados tengan el aspecto "relleno", adjunta la clase CSS win-selectionstylefilled a tu ListView.

Para personalizar más la apariencia de los elementos seleccionados, puedes invalidar estas clases:

• win-selectionborder

  Aplica estilos al borde alrededor del elemento seleccionado.

• win-selectionbackground

  Aplica estilos al fondo de los elementos seleccionados.

• win-selectionhint

  Aplica estilos a la sugerencia de selección, una segunda marca de verificación que aparece detrás del elemento seleccionado. Al deslizar rápidamente el elemento, se muestra la sugerencia de selección.

• win-selectioncheckmark

  La marca de verificación en un elemento seleccionado.

• win-selectioncheckmarkbackground

  El fondo de la marca de verificación en un elemento seleccionado.

También puedes agregar la clase win-selected como parte del selector de estilo para personalizar otros componentes, como el contenedor de elementos, cuando se selecciona un elemento.