Procédure pas à pas : mise en route du Concepteur Windows Forms

  • Article

Le Concepteur Windows Forms fournit beaucoup d'outils pour générer des applications Windows Forms. Cette procédure pas à pas illustre comment générer une application à l'aide des divers outils fournis par le concepteur. Cette procédure pas à pas illustre les tâches suivantes :

  • Création d'un projet Windows Forms.

  • Réorganisation de contrôles à l'aide de lignes d'alignement (SnapLines).

  • Accomplissement de tâches de concepteur à l'aide de balises actives.

  • Définition de marges et remplissage pour vos contrôles.

  • Réorganisation de contrôles à l'aide d'un contrôle TableLayoutPanel.

  • Partitionnement de la disposition de votre contrôle en utilisant un contrôle SplitContainer.

  • Navigation dans votre disposition avec la fenêtre Structure du document.

  • Positionnement de contrôles à l'aide de l'affichage des informations de taille et d'emplacement.

  • Définition des valeurs de propriétés à l'aide des fenêtres Propriétés.

Lorsque vous avez terminé, vous disposez alors d'un contrôle personnalisé qui a été assemblé à l'aide de beaucoup de fonctionnalités de disposition disponibles dans le Concepteur Windows Forms. Ce contrôle implémente l'interface utilisateur pour une calculatrice simple. La capture d'écran suivante affiche la disposition générale du contrôle de calculatrice.

Interface utilisateur de la calculatrice

Visite guidée de l'interface utilisateur de la calculatrice

Composants requis

Pour exécuter cette procédure pas à pas, vous devrez :

  • Avoir des autorisations suffisantes pour être en mesure de créer et d'exécuter des projets d'application Windows Forms sur l'ordinateur où Visual Studio est installé.

Notes

Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Création du projet de contrôle personnalisé

La première étape consiste à créer le projet de contrôle DemoCalculator.

Pour créer le projet de contrôle personnalisé

  1. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet pour ouvrir la boîte de dialogue Nouveau projet.

  2. Sélectionnez le modèle de projet Bibliothèque de contrôles Windows dans la liste des projets Visual C#, tapez DemoCalculatorLib dans la zone Nom, puis cliquez sur OK.

  3. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur UserControl1.cs, puis cliquez sur Renommer. Remplacez le nom de fichier par DemoCalculator.cs. Cliquez sur le bouton Oui à la question de savoir si vous souhaitez renommer toutes les références à l'élément de code "UserControl1".

    Le Concepteur Windows Forms affiche actuellement l'aire du concepteur pour le contrôle DemoCalculator. Dans cet affichage, vous pouvez concevoir graphiquement l'apparence de votre contrôle en sélectionnant des contrôles et des composants dans la Boîte à outils et en les plaçant sur l'aire du concepteur. Pour plus d'informations sur les contrôles personnalisés, consultez Variétés de contrôles personnalisés.

Conception de la disposition des contrôles

Le contrôle DemoCalculator contient plusieurs contrôles Windows Forms. Dans cette procédure, vous réorganiserez les contrôles en utilisant quelques-unes des fonctionnalités de développement rapide d'application (RAD, Rapid Application Development) du Concepteur Windows Forms.

Pour concevoir la disposition du contrôle

  1. Dans le Concepteur Windows Forms, modifiez le contrôle DemoCalculator de façon à lui donner une plus grande taille en cliquant sur la poignée de redimensionnement dans le coin inférieur droit et en la faisant glisser en bas et à droite. Dans le coin inférieur droit de Visual Studio, recherchez les informations de taille et d'emplacement des contrôles. Réglez la taille du contrôle sur une largeur de 500 et une hauteur de 400 en consultant les informations de taille pendant que vous redimensionnez le contrôle.

  2. Dans la Boîte à outils, cliquez sur le nœud Conteneurs pour l'ouvrir. Sélectionnez le contrôle SplitContainer et faites-le glisser sur l'aire du concepteur.

    Le SplitContainer est placé sur l'aire du concepteur du contrôle DemoCalculator.

    Notes

    Le contrôle SplitContainer s'ajuste pour correspondre à la taille du contrôle DemoCalculator. Examinez la fenêtre Propriétés pour consulter les paramètres de propriétés du contrôle SplitContainer. Recherchez la propriété Dock. Sa valeur est Fill, qui signifie que le contrôle SplitContainer ajustera toujours sa taille aux limites du contrôle DemoCalculator. Redimensionnez le contrôle DemoCalculator pour vérifier ce comportement.

  3. Dans la fenêtre Propriétés, remplacez la valeur de la propriété Dock par None.

    Le contrôle SplitContainer ramène sa taille aux dimensions de la taille par défaut. Sa taille ne suit plus la taille du contrôle DemoCalculator.

  4. Cliquez sur le glyphe de balise active (Glyphe de balise active) dans le coin supérieur droit du contrôle SplitContainer. Cliquez sur Ancrer dans le conteneur parent pour attribuer à la propriété Dock la valeur Fill.

    Le contrôle SplitContainer s'ancre aux limites du contrôle DemoCalculator.

    Notes

    Plusieurs contrôles offrent des balises actives afin de faciliter la conception. Pour plus d'informations, consultez Procédure pas à pas : exécution de tâches courantes à l'aide de balises actives dans les contrôles Windows Forms.

  5. Cliquez sur la bordure verticale entre les panneaux et faites-la glisser à droite, afin que l'essentiel de l'espace soit occupé par le panneau gauche.

    Le SplitContainer divise le contrôle DemoCalculator en deux panneaux, avec une bordure mobile qui les sépare. Le panneau gauche contiendra les boutons et l'écran de la calculatrice, et le panneau droit affichera un enregistrement des opérations arithmétiques exécutées par l'utilisateur.

  6. Dans la fenêtre Propriétés, remplacez la valeur de la propriété BorderStyle par Fixed3D.

  7. Dans la Boîte à outils, cliquez sur le nœud Contrôles communs pour l'ouvrir. Sélectionnez le contrôle ListView et faites-le glisser dans le panneau droit du contrôle SplitContainer.

  8. Cliquez sur le glyphe de balise active du contrôle ListView. Dans le panneau des balises actives, remplacez le paramètre View par Details.

  9. Dans le panneau des balises actives, cliquez sur Modifier les colonnes.

    La boîte de dialogue Éditeur de la collection ColumnHeader s'ouvre.

  10. Dans la boîte de dialogue Éditeur de la collection ColumnHeader, cliquez sur le bouton Ajouter pour ajouter une colonne au contrôle ListView. Remplacez la valeur de la propriété Text de la colonne par Historique. Cliquez sur OK pour créer la colonne.

  11. Dans le panneau des balises actives, cliquez sur Ancrer dans le conteneur parent, puis cliquez sur le glyphe de balise active pour fermer le panneau des balises actives.

  12. À partir du nœud Conteneurs dans la Boîte à outils, faites glisser un contrôle TableLayoutPanel dans le panneau gauche du contrôle SplitContainer.

    Le contrôle TableLayoutPanel apparaît sur la surface du concepteur avec son panneau des balises actives ouvert. Le contrôle TableLayoutPanel réorganise ses contrôles enfants dans une grille. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un TableLayoutPanel. Le contrôle TableLayoutPanel contiendra l'écran et les boutons du contrôle DemoCalculator.

  13. Cliquez sur Modifier les lignes et les colonnes dans le panneau des balises actives.

    La boîte de dialogue Styles de ligne et de colonne s'ouvre.

  14. Cliquez sur le bouton Ajouter jusqu'à ce que cinq colonnes soient affichées. Sélectionnez les cinq colonnes, puis cliquez sur la case d'option Pour cent dans la zone Type de taille. Attribuez à Pour cent la valeur 20. Chaque colonne a ainsi la même largeur.

  15. Dans la zone déroulante Afficher, cliquez sur Lignes.

  16. Cliquez sur le bouton Ajouter jusqu'à ce que cinq lignes soient affichées. Sélectionnez les cinq lignes, puis cliquez sur la case d'option Pour cent dans la zone Type de taille. Attribuez à Pour cent la valeur 20. Chaque ligne a ainsi la même hauteur.

  17. Cliquez sur OK pour accepter vos modifications, puis cliquez sur le glyphe de balise active pour fermer le panneau des balises actives.

  18. Dans la fenêtre Propriétés, remplacez la valeur de la propriété Dock par Fill.

Remplissage du contrôle

Maintenant que la disposition du contrôle est définie, vous pouvez remplir le contrôle DemoCalculator avec des boutons et un affichage.

Pour remplir le contrôle

  1. Dans la Boîte à outils, double-cliquez sur l'icône du contrôle TextBox.

    Un contrôle TextBox est placé dans la première cellule du contrôle TableLayoutPanel.

  2. Dans la fenêtre Propriétés, remplacez la valeur de la propriété du contrôle ColumnSpan de TextBox par 5.

    Le contrôle TextBox se déplace à une position qui est centrée dans sa ligne.

  3. Affectez à la propriété Anchor du contrôle TextBox les valeurs Left, Right.

    Le contrôle TextBox se développe horizontalement pour couvrir les cinq colonnes.

  4. Affectez à la propriété TextAlign du contrôle TextBox la valeur Right.

  5. Dans la fenêtre Propriétés, développez le nœud de propriété Font. Attribuez à Size la valeur 14, et attribuez à Bold la valeur true au contrôle TextBox.

  6. Sélectionnez le contrôle TableLayoutPanel.

  7. Dans la Boîte à outils, double-cliquez sur l'icône Button.

    Un contrôle Button est placé dans la première cellule ouverte du contrôle TableLayoutPanel.

  8. Dans la Boîte à outils, double-cliquez sur l'icône Button quatre autres fois pour remplir la deuxième ligne du contrôle TableLayoutPanel.

  9. Sélectionnez les cinq contrôles Button en cliquant sur eux tout en maintenant la touche MAJ enfoncée. Appuyez sur CTRL+C pour copier les contrôles Button vers le Presse-papiers.

  10. Appuyez trois fois sur CTRL+V pour coller des copies des contrôles Button dans les lignes restantes du contrôle TableLayoutPanel.

  11. Sélectionnez les 20 contrôles Button en cliquant sur eux tout en maintenant la touche MAJ enfoncée.

  12. Dans la fenêtre Propriétés, remplacez la valeur de la propriété Dock par Fill.

    Tous les contrôles Button s'ancrent pour remplir leurs cellules conteneur.

  13. Dans la fenêtre Propriétés, développez le nœud de propriété Margin. Attribuez à All la valeur 5.

    Tous les contrôles Button sont dimensionnés à une taille plus petite pour créer une plus grande marge entre eux.

  14. Sélectionnez button10 et button20, puis appuyez sur SUPPR pour les supprimer de la disposition.

  15. Sélectionnez button5 et button15, puis remplacez la valeur de leur propriété RowSpan par 2. Ce seront les boutons Effacer et = pour le contrôle DemoCalculator.

Lorsque votre contrôle ou formulaire est rempli avec plusieurs contrôles, vous pouvez trouver qu'il est plus facile de naviguer dans votre disposition avec la fenêtre Structure du document.

Pour naviguer à l'aide de la fenêtre Structure du document

  1. Dans le menu Affichage, pointez sur Autres fenêtres, puis cliquez sur Structure du document.

    La fenêtre Structure du document affiche une arborescence du contrôle DemoCalculator et de ses contrôles constitutifs. Les contrôles conteneur comme le SplitContainer affichent leurs contrôles enfants en tant que sous-nœuds dans l'arborescence. Vous pouvez également renommer des contrôles en place à l'aide de la fenêtre Structure du document.

  2. Dans Structure du document, cliquez avec le bouton droit surbutton1, puis cliquez sur Renommer. Remplacez son nom par sevenButton.

  3. À l'aide de la fenêtre Structure du document, remplacez le nom des contrôles Button généré par le concepteur par le nom de production en fonction de la liste suivante :

    • button1 par sevenButton

    • button2 par eightButton

    • button3 par nineButton

    • button4 par divisionButton

    • button5 par clearButton

    • button6 par fourButton

    • button7 par fiveButton

    • button8 par sixButton

    • button9 par multiplicationButton

    • button11 par oneButton

    • button12 par twoButton

    • button13 par threeButton

    • button14 par subtractionButton

    • button15 par equalsButton

    • button16 par zeroButton

    • button17 par changeSignButton

    • button18 par decimalButton

    • button19 par additionButton

  4. À l'aide des fenêtres Structure du document et Propriétés, modifiez la valeur de la propriété Text de chaque nom de contrôle Button en fonction de la liste suivante :

    • Affectez à la propriété de texte du contrôle sevenButton la valeur 7

    • Affectez à la propriété de texte du contrôle eightButton la valeur 8

    • Affectez à la propriété de texte du contrôle nineButton la valeur 9

    • Affectez à la propriété de texte du contrôle divisionButton la valeur /

    • Affectez à la propriété de texte du contrôle clearButton la valeur Clear

    • Affectez à la propriété de texte du contrôle fourButton la valeur 4

    • Affectez à la propriété de texte du contrôle fiveButton la valeur 5

    • Affectez à la propriété de texte du contrôle sixButton la valeur 6

    • Affectez à la propriété de texte du contrôle multiplicationButton la valeur *

    • Affectez à la propriété de texte du contrôle oneButton la valeur 1

    • Affectez à la propriété de texte du contrôle twoButton la valeur 2

    • Affectez à la propriété de texte du contrôle threeButton la valeur 3

    • Affectez à la propriété de texte du contrôle subtractionButton la valeur -

    • Affectez à la propriété de texte du contrôle equalsButton la valeur =

    • Affectez à la propriété de texte du contrôle zeroButton la valeur 0

    • Affectez à la propriété de texte du contrôle changeSignButton la valeur +/-

    • Affectez à la propriété de texte du contrôle decimalButton la valeur .

    • Affectez à la propriété de texte du contrôle additionButton la valeur +

  5. Sur l'aire du concepteur, sélectionnez tous les contrôles Button en cliquant dessus tout en maintenant la touche MAJ enfoncée.

  6. Dans la fenêtre Propriétés, développez le nœud de propriété Font. Attribuez à Size la valeur 14 et à Bold la valeur true pour tous les contrôles Button.

    Cela termine la conception du contrôle DemoCalculator. Il ne reste plus qu'à fournir la logique de calculatrice.

Implémentation des gestionnaires d'événements

Les boutons sur le contrôle DemoCalculator ont des gestionnaires d'événements qui peuvent être utilisés pour implémenter une grande partie de la logique de calculatrice. Le Concepteur Windows Forms vous permet d'implémenter les stubs de tous les gestionnaires d'événements pour tous les boutons avec un seul double-clic.

Pour implémenter des gestionnaires d'événements

  1. Sur l'aire du concepteur, sélectionnez tous les contrôles Button en cliquant dessus tout en maintenant la touche MAJ enfoncée.

  2. Double-cliquez sur l'un des contrôles Button.

    L'éditeur de code s'ouvre aux gestionnaires d'événements générés par le concepteur.

Test du contrôle

Dans la mesure où le contrôle DemoCalculator hérite de la classe UserControl, vous pouvez tester son comportement avec le conteneur de test UserControl. Pour plus d'informations, consultez Comment : tester le comportement d'un UserControl au moment de l'exécution.

Pour tester le contrôle

  • Appuyez sur F5 pour générer et exécuter le contrôle DemoCalculator dans le conteneur de test UserControl.

    Cliquez sur la bordure entre les panneaux SplitContainer et faites-la glisser vers la gauche et la droite. Le TableLayoutPanel et tous ses contrôles enfants se redimensionnent pour tenir dans l'espace disponible.

Utilisation du contrôle sur un formulaire

Le contrôle DemoCalculator peut être utilisé dans d'autres contrôles composites ou sur un formulaire. La procédure suivante décrit son utilisation.

Création du projet

La première étape consiste à créer le projet d'application. Vous utiliserez ce projet pour générer l'application qui illustre le contrôle personnalisé.

Pour créer le projet

  1. Dans le menu Fichier, pointez sur Ajouter, puis cliquez sur Nouveau projet pour ouvrir la boîte de dialogue Nouveau projet.

  2. Sélectionnez le modèle de projet d'application Windows dans la liste des projets Visual C#, tapez DemoCalculatorTest dans la zone Nom, puis cliquez OK.

  3. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier Références, puis cliquez sur Ajouter une référence pour ouvrir la boîte de dialogue Ajouter une référence.

  4. Cliquez sur l'onglet Nom du projet, puis double-cliquez sur votre projet DemoCalculatorLib pour ajouter la référence au projet de test.

  5. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur DemoCalculatorTest, puis cliquez sur Définir comme projet de démarrage.

  6. Dans le Concepteur Windows Forms, augmentez la taille du formulaire à approximativement 700 x 500.

Utilisation de votre contrôle dans la disposition du formulaire

Pour utiliser le contrôle DemoCalculator dans une application, vous devez le placer sur un formulaire.

Pour utiliser votre contrôle dans la disposition du formulaire

  1. Dans la Boîte à outils, développez le nœud DemoCalculatorLib Components.

  2. Faites glisser le contrôle DemoCalculator de la Boîte à outils sur votre formulaire. En maintenant le bouton de la souris enfoncé, laissez la Boîte à outils se fermer, puis déplacez le glyphe qui représente votre contrôle à l'angle supérieur gauche du formulaire. Lorsque le glyphe est près des bordures du formulaire, vous verrez apparaître les lignes d'alignement (SnapLines). Ceux-ci indiquent la distance de la propriété Padding du formulaire et la propriété Margin du contrôle. Déposez le contrôle à l'emplacement indiqué par les lignes d'alignement (SnapLines).

    Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide des lignes d'alignement (SnapLines).

  3. Faites glisser un contrôle Button à partir de la Boîte à outils et déposez-le sur le formulaire.

  4. Déplacez le contrôle Button dans le contrôle DemoCalculator et notez où les lignes d'alignement (SnapLines) apparaissent. Vous pouvez aligner précisément et facilement vos contrôles à l'aide de cette fonctionnalité. Supprimez le contrôle Button lorsque vous avez terminé.

  5. Cliquez avec le bouton droit sur le contrôle DemoCalculator, puis cliquez sur Propriétés.

  6. Affectez à la propriété Dock la valeur Fill.

  7. Sélectionnez le formulaire, puis développez le nœud propriété Padding. Modifiez la valeur de Tout en 20.

    La taille du contrôle DemoCalculator est réduite pour recevoir la nouvelle valeur Padding du formulaire.

  8. Redimensionnez le formulaire en faisant glisser les diverses poignées de redimensionnement aux différentes positions. Observez comment le contrôle DemoCalculator est redimensionné pour s'adapter.

Étapes suivantes

Cette procédure pas à pas a illustré comment construire l'interface utilisateur pour une calculatrice simple. Vous pouvez étendre ses fonctionnalités des façons suivantes :

  • Implémentez la logique de calculatrice. Cela peut paraître simple, mais il y a des complexités intéressantes associées aux transitions d'état de la calculatrice.

  • Empaquetez l'application Calculatrice pour le déploiement. Pour plus d'informations, consultez Comment : publier une application ClickOnce.

Voir aussi

Tâches

Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un TableLayoutPanel
Procédure pas à pas : ajout de balises actives à un composant Windows Forms
Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide des lignes d'alignement (SnapLines)
Procédure pas à pas : remplissage automatique de la boîte à outils avec des composants personnalisés
Comment : tester le comportement d'un UserControl au moment de l'exécution
Dépannage de la création de contrôles et de composants
Dépannage du développement au moment du design

Concepts

Variétés de contrôles personnalisés

Autres ressources

Création d'un nouveau Windows Form