Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
El patrón list/details tiene un panel de lista (normalmente con una vista de lista) y un panel de detalles para el contenido. Cuando se selecciona un elemento de la lista, se actualiza el panel de detalles. Este patrón se usa con frecuencia para las libretas de direcciones y correo electrónico.
API importantes: Clase ListView, Clase SplitView
Sugerencia
Si quieres usar un control XAML que implemente este patrón para ti, te recomendamos el control XAML ListDetailsView del Kit de herramientas de la comunidad de Windows.
¿Este es el patrón correcto?
El patrón de lista y detalles funciona bien si desea:
- Cree 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.
- Busque y priorice una gran colección de contenido.
- Permitir la adición rápida y eliminación de elementos de una lista mientras se trabaja entre contextos.
Elegir el estilo correcto
Al implementar el patrón de lista y detalles, se recomienda usar el estilo apilado o el estilo en paralelo, en función de la cantidad de espacio de pantalla disponible.
| 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 a la vez: la lista o los detalles.
El usuario comienza en el panel de lista y "explora en profundidad" al panel de detalles seleccionando un elemento de la lista. Para el usuario, aparece como si las vistas de lista y detalles existan en dos páginas independientes.
Crear un patrón de lista detallada apilada
Una manera de crear el patrón de lista/detalles apilado 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.
Para la página de vista de lista, un control de vista de lista funciona bien para presentar listas que pueden contener imágenes y texto.
Para la página de vista de detalles, use el elemento de contenido que tenga más sentido. Si tiene muchos campos independientes, considere la posibilidad de usar un diseño grid para organizar los elementos en un formulario.
Para la navegación entre páginas, consulta historial de navegación y navegación hacia atrás para aplicaciones de Windows.
Estilo en paralelo
En el estilo en paralelo, el panel de lista y el panel de detalles están visibles al mismo tiempo.
La lista en el panel de lista tiene un indicador visual de selección para indicar el elemento seleccionado actualmente. Al seleccionar un nuevo elemento en la lista, se actualiza el panel de detalles.
Creación de un patrón de lista y detalles en paralelo
Una manera de crear un patrón de lista y detalles en paralelo es usar el control de vista dividida . Coloque la vista de lista en el panel de vista dividida y la vista de detalles en el contenido de la vista dividida.
Para el panel de lista, un control de vista de lista funciona bien para presentar listas que pueden contener imágenes y texto.
Para obtener los detalles del contenido, use el elemento de contenido que tenga más sentido. Si tiene muchos campos independientes, considere la posibilidad de usar un diseño grid para organizar los elementos en un formulario.
Diseño adaptable
Para implementar un patrón de lista y detalles para cualquier tamaño de pantalla, cree una interfaz de usuario con capacidad de respuesta con un diseño adaptable.
Creación de un patrón de lista o detalles adaptable
Para crear un diseño adaptable, defina diferentes VisualStates para la interfaz de usuario y declare puntos de interrupción para los distintos estados con AdaptiveTriggers.
Obtención del código de ejemplo
Los ejemplos siguientes implementan el patrón de lista y detalles con diseños adaptables y muestran el enlace de datos a recursos estáticos, de base de datos y en línea:
- Ejemplo de maestro/detalle
- Ejemplo de ListView y GridView
- Ejemplo de base de datos de pedidos de clientes
- Ejemplo de lector RSS
Sugerencia
Si quieres usar un control XAML que implemente este patrón para ti, te recomendamos el control XAML ListDetailsView del Kit de herramientas de la comunidad de Windows.
Artículos relacionados
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
