Partager via

Guide pratique pour créer une interface utilisateur multipane avec Windows Forms à l’aide du concepteur

  • Article

Dans la procédure suivante, vous allez créer une interface utilisateur multipane similaire à celle utilisée dans Microsoft Outlook, avec une liste Dossier, un volet Messages et un volet Aperçu. Cette disposition s’effectue principalement par le biais de contrôles d’ancrage avec le formulaire.

Lorsque vous ancrez un contrôle, vous déterminez le bord du conteneur parent auquel un contrôle est attaché. Par conséquent, si vous définissez la propriété Dock sur Right, le bord droit du contrôle sera ancré à celui de son contrôle parent. En outre, le bord ancré du contrôle est redimensionné pour correspondre à celui du contrôle conteneur. Pour plus d’informations sur le fonctionnement de la propriété Dock, consultez Aide et Astuces : contrôles d’ancrage sur Windows Forms.

Cette procédure se concentre sur l’organisation des SplitContainer et les autres contrôles du formulaire, et non sur l’ajout de fonctionnalités pour que l’application imite Microsoft Outlook.

Pour créer cette interface utilisateur, vous placez tous les contrôles dans un contrôle SplitContainer, qui contient un contrôle TreeView dans le panneau gauche. Le panneau de droite du contrôle SplitContainer contient un deuxième contrôle SplitContainer avec un contrôle ListView au-dessus d’un contrôle RichTextBox. Ces contrôles SplitContainer permettent un redimensionnement indépendant des autres contrôles sur le formulaire. Vous pouvez adapter les techniques de cette procédure pour créer des interfaces utilisateur personnalisées de votre propre choix.

Pour créer une interface utilisateur de style Outlook au moment du design

  1. Créez un projet d’application Windows (File>New>Project>Visual C# ou Visual Basic>Classic Desktop>Application Windows Forms).

  2. Faites glisser un contrôle SplitContainer de la boîte à outils vers le formulaire. Dans la fenêtre Propriétés, définissez la propriété Dock sur Fill.

  3. Faites glisser un contrôle TreeView de la boîte à outils vers le panneau gauche du contrôle SplitContainer. Dans la fenêtre Propriétés, définissez la propriété Dock sur Left en cliquant sur le panneau de gauche dans l’éditeur de valeurs affiché lorsque la flèche vers le bas est cliqué.

  4. Faites glisser un autre contrôle SplitContainer à partir de la boîte à outils ; placez-le dans le panneau droit du contrôle SplitContainer que vous avez ajouté à votre formulaire. Dans la fenêtre propriétés de , définissez la propriété sur et la propriété sur .

  5. Faites glisser un contrôle ListView de la boîte à outils vers le panneau supérieur du deuxième contrôle SplitContainer que vous avez ajouté à votre formulaire. Définissez la propriété Dock du contrôle ListView sur Fill.

  6. Faites glisser un contrôle RichTextBox de la boîte à outils vers le panneau inférieur du deuxième contrôle SplitContainer. Définissez la propriété Dock du contrôle RichTextBox sur Fill.

    À ce stade, si vous appuyez sur F5 pour exécuter l’application, le formulaire affiche une interface utilisateur en trois parties, similaire à celle de Microsoft Outlook.

    Remarque

    Lorsque vous placez le pointeur de la souris sur l’un des séparateurs dans les contrôles SplitContainer, vous pouvez redimensionner les dimensions internes.

À ce stade, dans le développement d’applications, vous avez conçu une interface utilisateur sophistiquée. L’étape suivante consiste à programmer l’application elle-même, peut-être en connectant le contrôle TreeView et les contrôles ListView à un type de source de données. Pour plus d’informations sur la connexion de contrôles à des données, consultez Liaison de données et Windows Forms.

Voir aussi