Patrón de lista y detalles
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
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.
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.
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.
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.
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.
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:
- Ejemplo de maestro y detalles
- Muestra de ListView y GridView
- Ejemplo de base de datos de pedidos de clientes
- Ejemplo de lector RSS
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.
