Modèle liste/détails

Le modèle liste/détails comporte un volet de liste (généralement avec un affichage liste) et un volet d’informations pour le contenu. Lorsqu’un élément de la liste est sélectionné, le volet détails est mis à jour. Ce modèle est fréquemment utilisé pour le courrier électronique et les carnets d’adresses.

API importantes : classe ListView, classe SplitView

Exemple de modèle de détails de liste

Conseil / Astuce

Si vous souhaitez utiliser un contrôle XAML qui implémente ce modèle pour vous, nous vous recommandons le contrôle XAML ListDetailsView à partir du Kit de ressources communauté Windows.

C’est le bon modèle ?

Le modèle liste/détails fonctionne bien si vous souhaitez :

Créez une application de messagerie, un carnet d’adresses ou une application basée sur une disposition de détails de liste.
Recherchez et hiérarchisez une grande collection de contenu.
Autorisez l'ajout et la suppression rapides d'éléments d'une liste tout en travaillant de manière itérative entre les contextes.

Choisir le style approprié

Lors de l’implémentation du modèle liste/détails, nous vous recommandons d’utiliser le style empilé ou le style côte à côte, en fonction de la quantité d’espace d’écran disponible.

Largeur de la fenêtre disponible	Style recommandé
320 epx-640 epx	Empilé
641 epx ou plus large	Côte à côte

Style empilé

Dans le style empilé, un seul volet est visible à la fois : la liste ou les détails.

Détail de la liste en mode empilé

L’utilisateur commence au volet de liste et « explore » le volet d’informations en sélectionnant un élément dans la liste. Pour l’utilisateur, il apparaît comme si les vues de liste et de détails existent sur deux pages distinctes.

Créer un modèle de liste et de détails empilés

L’une des façons de créer le modèle de liste/détails empilé consiste à utiliser des pages distinctes pour le volet de liste et le volet d’informations. Placez l’affichage de liste sur une page et le volet détails d’une page distincte.

Pièces pour le détail de la liste en style empilé

Pour la page d’affichage de liste, un contrôle d’affichage de liste fonctionne bien pour présenter des listes qui peuvent contenir des images et du texte.

Pour la page d’affichage des détails, utilisez l’élément de contenu le plus judicieux. Si vous avez beaucoup de champs distincts, envisagez d’utiliser une disposition Grid pour organiser des éléments dans un formulaire.

Pour la navigation entre les pages, consultez l’historique de navigation et la navigation vers l’arrière pour les applications Windows.

Style côte à côte

Dans le style côte à côte, le volet de liste et le volet d’informations sont visibles en même temps.

Modèle de liste/détail

La liste dans le volet de liste a un visuel de sélection pour indiquer l’élément actuellement sélectionné. La sélection d’un nouvel élément dans la liste met à jour le volet d’informations.

Créer un schéma de liste/détails côte à côte

Une façon de créer un modèle de liste/détails côte à côte consiste à utiliser le contrôle d’affichage fractionné . Placez l’affichage liste dans le volet d’affichage fractionné et l’affichage détails dans le contenu de l’affichage fractionné.

$parties d’affichage fractionnées de liste des détails$

Pour le volet de liste, un contrôle d’affichage de liste fonctionne bien pour présenter des listes qui peuvent contenir des images et du texte.

Pour le contenu des détails, utilisez l’élément de contenu qui est le plus judicieux. Si vous avez beaucoup de champs distincts, envisagez d’utiliser une disposition Grid pour organiser des éléments dans un formulaire.

Disposition adaptative

Pour implémenter un modèle de liste/détails pour n’importe quelle taille d’écran, créez une interface utilisateur réactive avec une disposition adaptative.

Disposition des détails de liste adaptative

Créer un modèle de liste/détails adaptatif

Pour créer une disposition adaptative, définissez différents VisualStates pour votre interface utilisateur et déclarez des points d’arrêt pour les différents états avec AdaptiveTriggers.

Obtenir l’exemple de code

Les exemples suivants implémentent le modèle liste/détails avec des dispositions adaptatives et illustrent la liaison de données aux ressources statiques, de base de données et en ligne :