Partager via

Comment : créer une interface utilisateur à plusieurs volets avec des 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 de dossiers , 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 Dock propriété Rightsur , le bord droit du contrôle est ancré sur le bord droit de son contrôle parent. En outre, le bord ancré du contrôle est redimensionné pour correspondre à celui de son contrôle conteneur. Pour plus d’informations sur le fonctionnement de la Dock propriété, consultez How to : Dock Controls on Windows Forms.

Cette procédure se concentre sur l’organisation des SplitContainer contrôles 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 au sein d’un SplitContainer contrôle, qui contient un TreeView contrôle dans le panneau de gauche. Le panneau de droite du SplitContainer contrôle contient un deuxième SplitContainer contrôle avec un ListView contrôle au-dessus d’un RichTextBox contrôle. Ces SplitContainer contrôles 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 (fichier>nouveau>projet>Visual C# ou application Windows Forms Visual Basic>Classic Desktop).>

  2. Faites glisser un SplitContainer contrôle 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 TreeView contrôle de la boîte à outils vers le panneau gauche du SplitContainer contrôle. Dans la fenêtre Propriétés , définissez la Dock propriété Left sur 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 SplitContainer contrôle à partir de la boîte à outils ; placez-le dans le panneau de droite du SplitContainer contrôle que vous avez ajouté à votre formulaire. Dans la fenêtre Propriétés , définissez la Dock propriété sur Fill et la Orientation propriété Horizontalsur .

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

  6. Faites glisser un RichTextBox contrôle de la boîte à outils vers le panneau inférieur du deuxième SplitContainer contrôle. Affectez à la propriété Dock du contrôle RichTextBox la valeur 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 SplitContainer contrôles, 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 TreeView contrôle et ListView les contrôles à un type de source de données. Pour plus d’informations sur la connexion de contrôles aux données, consultez Liaison de données et Windows Forms.

Voir aussi