Patrón de lista y detalles

  • Artículo

El patrón de lista y detalles tiene un panel de lista (normalmente con una vista de lista) y un panel de detalles para el contenido. Cuando se selecciona un elemento en la lista, se actualiza el panel de detalles. Este patrón se usa con frecuencia para libretas de direcciones y correo electrónico.

API importantes: clase ListView, clase SplitView

Ejemplo del patrón de lista y detalles

Sugerencia

Si quiere usar un control XAML que implemente este patrón automáticamente, se recomienda el control XAML ListDetailsView del kit de herramientas de la comunidad de Windows.

¿Es este el patrón adecuado?

El patrón de lista y detalles funciona bien si quiere:

  • Compilar una aplicación de correo electrónico, una libreta de direcciones o cualquier aplicación que se base en un diseño de detalles de lista.
  • Buscar y priorizar una gran colección de contenido.
  • Permitir la adición y eliminación rápidas de elementos de una lista mientras se trabaja cambiando entre contextos continuamente.

Elegir el estilo adecuado

Al implementar el patrón de lista y detalles, le recomendamos usar el estilo apilado o el estilo en paralelo, según la cantidad de espacio disponible en pantalla.

Ancho de ventana disponible Estilo recomendado
320 epx - 640 epx Apilado
641 epx o más ancho En paralelo

Estilo apilado

En el estilo apilado, solo hay un panel visible cada vez: la lista o los detalles.

Una lista y detalles en el modo apilado

El usuario comienza en el panel de lista y "explora en profundidad" hasta el panel de detalles, seleccionando un elemento en la lista. Para el usuario, parece que las vistas de lista y detalles existen en dos páginas independientes.

Creación de un patrón apilado de lista y detalles

Una forma de crear el patrón apilado de lista y detalles es usar páginas independientes para el panel de lista y el panel de detalles. Coloque la vista de lista en una página, y el panel de detalles en una página independiente.

Partes de la lista y detalles con estilo apilado

En la página de la vista lista, un control de vista de lista funciona bien para presentar listas que pueden contener imágenes y texto.

En la página de vista de detalles, usa el elemento de contenido que sea más apropiado. Si tienes muchos campos independientes, considera la posibilidad de usar un diseño de cuadrícula para organizar los elementos en un formulario.

Para la navegación entre páginas, consulta el historial de navegación y navegación hacia atrás para las aplicaciones de Windows.

Estilo en paralelo

En el estilo en paralelo, los paneles de lista y de detalles están visibles al mismo tiempo.

Patrón de lista y detalles

La lista del panel de lista usa una selección visual para indicar el elemento seleccionado actualmente. Al seleccionar un elemento nuevo en la lista, se actualiza el panel de detalles.

Creación de un patrón de lista y detalles en paralelo

Una forma de crear un patrón de lista y detalles en paralelo es usar el control de vista en dos paneles. Coloque la vista de lista en el panel de vista en dos paneles, y la vista de detalles en el contenido de la vista en dos paneles.

Partes de la vista en dos paneles de la lista y detalles

En el panel de lista, un control de vista de lista funciona bien para presentar listas que pueden contener imágenes y texto.

En el contenido de detalles, usa el elemento de contenido que sea más apropiado. Si tienes muchos campos independientes, considera la posibilidad de usar un diseño de cuadrícula para organizar los elementos en un formulario.

Diseño adaptativo

Para implementar un patrón de lista y detalles para cualquier tamaño de pantalla, cree una interfaz de usuario con capacidad de respuesta y con diseño adaptativo.

Diseño adaptativo de lista y detalles

Creación de un patrón adaptativo de lista y detalles

Para crear un diseño adaptativo, define diferentes VisualStates para la interfaz de usuario y declara puntos de interrupción para los distintos estados con AdaptiveTriggers.

Obtener el código de ejemplo

Los siguientes ejemplos implementan el patrón de lista y detalles con diseños adaptativos, y muestran datos enlazados a recursos estáticos, de bases de datos y en línea:

Sugerencia

Si quiere usar un control XAML que implemente este patrón automáticamente, se recomienda el control XAML ListDetailsView del kit de herramientas de la comunidad de Windows.