Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Directrices y lista de comprobación para controles ListView (aplicaciones de la Tienda Windows)

Sigue estas directrices para agregar controles ListView a tu aplicación de la Tienda Windows.

¿Es este el control que necesito?

Usa el control ListView para presentar una recopilación de datos como una serie de elementos para los usuarios de tus aplicaciones. Por ejemplo, usa un control ListView para presentar una lista de correos electrónicos, los artículos de una cesta de la compra, una lista de imágenes de la biblioteca de imágenes y resultados de búsqueda.

Usa un control ListView cuando quieras hacer lo siguiente:

  • Presentar datos en grupos
  • Permitir que el usuario seleccione uno o más elementos
  • Personalizar la carga de los datos
  • Proporcionar opciones de teclado y selección
  • Editar de manera dinámica la lista de elementos y obtener animaciones integradas
  • Personalizar los elementos con plantillas u otorgar a los elementos sus propios eventos
  • Tener elementos con diferentes tamaños

No uses un control ListView como control de diseño general. Para crear un diseño de tipo tabla o de cuadrícula, usa el diseño CSS, como diseño de cuadrícula o diseño de caja flexible ("flexbox"). (Para obtener más información acerca de los diseños CSS, consulta Elección de un diseño CSS3 para la aplicación).

Es correcto colocar botones dentro de los elementos ListView, pero no uses un control ListView para crear barras de herramientas de comandos, como una barra de herramientas de botones para cortar, copiar y pegar comandos. En lugar de ello, usa varios controles de botón dispuestos en paralelo.

Uso del patrón de interacción adecuado

Los controles ListView de Windows se usan de cuatro maneras diferentes: para mostrar una biblioteca de contenido, para mostrar datos de maestro y detalles, como un selector, o para mostrar datos estáticos. Cuando usas el control ListView de una de estas maneras, los usuarios esperan que siga uno de estos patrones de interacción:

  • Patrón de biblioteca de contenido

    Usa este patrón al mostrar una colección (o una biblioteca) de contenido. Se suele usar al presentar elementos multimedia, como imágenes o vídeos.

    Biblioteca de contenido

    En una biblioteca de contenido, la principal acción del usuario es pulsar un elemento para invocar una acción. La mayoría de las bibliotecas admiten la selección de elementos con un nuevo gesto táctil denominado deslizamiento transversal.

    Para que el control ListView siga el patrón de biblioteca de contenido, configúralo de esta manera:

  • Patrón de maestro y detalles (también conocido como de vista en dos paneles)

    Cuando usas el patrón de maestro y detalles, usas el panel de maestro de ListView. El panel maestro muestra una lista de elementos que el usuario puede seleccionar. Puedes usar otro control como el panel de detalles, que muestra información adicional del elemento seleccionado. Cuando el usuario selecciona un elemento en el panel de maestro, este se muestra en el panel de detalles.

    Aplicación de correo electrónico que usa el patrón de maestro y detalles

    Para asegurarte de que ListView se comporta como el panel maestro en el panel de maestro y detalles, configúralo de esta manera:

    • selectionMode: "single" o "multi". Usa "single" para selección individual.

    • tapBehavior: "directSelect".

    • swipeBehavior: "none" para selección individual, "select" para varias selecciones.

    Puedes encadenar varios controles ListView juntos para crear jerarquías de maestro y detalles complejas.

  • Patrón de selector

    Usa el patrón de selector cuando la acción principal del usuario sea seleccionar y la capacidad de invocar un elemento al pulsar no sea importante.

    ListView que muestra el patrón de selector

    En este patrón de interacción, se usa la pulsación para seleccionar, además del deslizamiento transversal. Para crear un control ListView con interacción de tipo selector, usa los siguientes valores:

  • Patrón estático

    Usa este patrón cuando quieras usar el control ListView únicamente como una forma de presentar contenido y la mayor parte de los tipos de interacción estén deshabilitados. Este patrón es útil para colecciones de elementos que son de solo lectura y que no se pueden activar ni se puede navegar hasta ellas. En el modo estático se usan los siguientes valores:

Directrices generales

Estas son algunas de las directrices generales que debes seguir cuando uses ListView.

  • Los elementos en el mismo control ListView deben tener el mismo comportamiento

    Si un elemento de un control ListView realiza una acción cuando el usuario lo pulsa, todos los elementos del control ListView deben realizar una acción cuando el usuario los pulse.

  • Si tu lista está dividida en grupos, usa SemanticZoom

    El control SemanticZoom permite que los usuarios naveguen fácilmente por estas listas que están divididas en grupos.

    La vista acercada usa un diseño y muestra encabezados de grupo y elementos individuales.

    Vista acercada de una lista de fondos de inversión

    La vista alejada solo muestra los encabezados de grupo:

    Vista alejada de una lista de fondos de inversión

  • Suprime las marcas de verificación de selección en los escenarios de selección individual

    Cuando el control selectionMode se establece en "single", no se muestran las marcas de verificación de selección.

    Por ejemplo, en una vista de maestro y detalles, suprime la marca de verificación en la vista de maestro cuando se encuentra en modo de selección individual. Para obtener un ejemplo, consulta la Muestra de interactividad para personalizar ListView HTML.

Directrices para diseños de lista y cuadrícula

La Biblioteca de Windows para JavaScript proporciona dos tipos de diseños para el control ListView: un diseño de lista y un diseño de cuadrícula. (También puedes crear tus propios diseños personalizados).

Diseño de lista

El diseño de lista muestra una columna individual, usa un orden de lectura de arriba a abajo y siempre se desplaza con un movimiento panorámico o verticalmente. El diseño de lista no muestra información de grupo, como encabezados de grupo o límites de grupo.

ListView que usa un diseño de lista

El diseño de lista es adecuado para la vista de maestro en una vista de maestro y detalles. También es una buena opción cuando tu aplicación se encuentra en una vista acoplada o cuando quieres ahorrar espacio. Funciona bien en orientaciones verticales y cuando no necesitas organizar elementos en grupos.

Por ejemplo, en aplicaciones comunes de correo electrónico a menudo verás una lista de carpetas en el lateral de la pantalla. La lista de carpetas es una buena opción para usar un control ListView con un diseño de lista.

Diseño de cuadrícula

El diseño de cuadrícula siempre permite movimientos panorámicos horizontales, y los elementos se disponen en un orden de lectura de arriba a abajo y de izquierda a derecha.

ListView que usa un diseño de cuadrícula

El diseño de cuadrícula se ajusta mejor para mostrar bibliotecas de contenido. Los diseños de cuadrícula generalmente ocupan más espacio que los diseños de lista.

El diseño de cuadrícula permite agrupar elementos. Hay dos situaciones principales en las que la agrupación resulta ventajosa: cuando el conjunto de elementos es muy grande o cuando existe una agrupación natural de los elementos (por ejemplo, una colección de canciones agrupadas en distintos álbumes). Cuando se proporcionan grupos se organiza la colección, lo cual permite a los usuarios orientarse mejor.

Directrices para usar encabezados de grupo interactivos

Al usar encabezados de grupo interactivos en un control ListView, registra la pulsación de las teclas Ctrl + Alt + G y úsala para desplazar a los usuarios al grupo para el elemento actualmente especificado.

Administrar el diseño de un control ListView en una vista acoplada

En Windows 8, las aplicaciones se pueden acoplar a uno de los laterales de la pantalla, lo que limita su ancho a 320 píxeles. Asimismo, cuando se desacoplan, el ancho de la aplicación será mucho más grande, lo que permitirá mostrar mucho más contenido.

  • Si tu ListView usa un diseño de cuadrícula, cámbialo a un diseño de lista cuando tu aplicación esté acoplada.

  • Si tu ListView contiene grupos, muestra los grupos cuando cambies a un diseño de lista. Cuando el usuario pulsa un grupo, actualiza el control ListView para que se muestren los elementos del grupo y proporciona un botón Atrás que permita al usuario volver a la visualización del grupo. Puedes usar el control SemanticZoom para proporcionar esta funcionalidad.

  • Una manera de ahorrar espacio cuando tu aplicación está acoplada es cambiar el modo en que se muestran los elementos en el control ListView. Puedes usar consultas de medios para actualizar CSS automáticamente o puedes cambiar a un control itemTemplate diferente cuando la aplicación pase al modo acoplado. Si actualizas el estilo CSS, debes llamar al método forceLayout del control ListView para que muestre los cambios correctamente.
  • Justo antes de que se acople la aplicación, almacena el valor indexOfFirstVisible del control ListView y restáuralo cuando se desacople la aplicación para que el usuario no pierda la posición en la lista.

Para obtener más información acerca de las vistas acopladas, consulta las Directrices para vistas acopladas y rellenas.

Temas relacionados

Inicio rápido: Agregar un control ListView
Directrices para vistas acopladas y rellenas
Muestra de interactividad para personalizar ListView HTML

 

 

Mostrar:
© 2018 Microsoft