Partager via

Guide pratique pour créer une interface utilisateur multipane avec Windows Forms

  • Article

En organisant des contrôles sur un formulaire, vous pouvez créer une interface utilisateur à plusieurs volets 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é. Si vous définissez la propriété Dock sur Right, le bord droit du contrôle est ancré sur le bord droit de son contrôle parent. En outre, le bord du contrôle qui est ancré est redimensionné pour correspondre à celui de son contrôle conteneur. Pour plus d’informations sur le fonctionnement de la propriété Dock, consultez How to : Dock Controls on 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.

formulaire conçu pour ressembler à une fenêtre de messagerie Outlook.

Pour créer cette interface utilisateur, vous placez tous les contrôles dans un contrôle SplitContainer. Le SplitContainer contient un contrôle TreeView dans le panneau de gauche et un autre SplitContainer sur le panneau de droite. La deuxième SplitContainer contient un contrôle ListView en haut et un contrôle RichTextBox en bas.

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.

Disposition du contrôle

Le tableau suivant décrit comment les contrôles sont configurés pour imiter Microsoft Outlook :

Contrôle Propriété Valeur
SplitContainer Nom splitContainer1
Bassin Fill
TabIndex 4
Largeur du séparateur 4
DistanceDuSéparateur 100
Contrôles de Panel1 Ajoutez le contrôle treeView1 à ce panneau.
Panel2.Controls Ajoutez le contrôle splitContainer2 à ce panneau.
TreeView Nom treeView1
Bassin Fill
TabIndex 0
Nœuds Ajouter un nouveau nœud nommé Node0
SplitContainer Nom splitContainer2
Bassin Fill
TabIndex 1
LargeurDuDiviseur 4
Distance de séparation 150
Orientation Horizontal
Panel1.Commandes Ajoutez le contrôle listView1 à ce panneau.
Panel2.Controls Ajoutez le contrôle richTextBox1 à ce panneau.
ListView Nom listView1
Bassin Fill
TabIndex 2
Articles Ajoutez un nouvel élément et définissez le texte sur item1.
RichTextBox Nom richTextBox1
Bassin Fill
Index d'onglet 3
Texte richTextBox1

Voir aussi