Tutoriel : Créer une application de visionneuse d’images Windows Forms dans Visual Studio

  • Article

Dans cette série de trois tutoriels, vous allez créer une application Windows Forms qui charge une image et l’affiche. L’environnement de conception intégré (IDE) de Visual Studio fournit les outils dont vous avez besoin pour créer l’application. Pour en apprendre davantage, consultez Bienvenue dans l’environnement IDE de Visual Studio.

Dans ce premier tutoriel, vous apprendrez à :

  • Créer un projet Visual Studio qui utilise Windows Forms
  • Ajouter un élément de disposition
  • Exécuter votre application

Prérequis

Pour suivre ce tutoriel, vous avez besoin de Visual Studio. Reportez-vous à la page des téléchargements de Visual Studio pour obtenir une version gratuite.

Créer un projet Windows Forms

Lorsque vous créez une visionneuse d’images, la première étape consiste à créer un projet d’application Windows Forms.

  1. Ouvrez Visual Studio.

  2. Dans la fenêtre de démarrage, sélectionnez Créer un projet.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Dans la fenêtre Créer un projet, recherchez Windows Forms. Sélectionnez ensuite Bureau dans la liste Type de projet.

  4. Sélectionnez le modèle Application Windows Forms (.NET Framework) pour C# ou Visual Basic, puis sélectionnez Suivant.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Note

    Si vous ne voyez pas le modèle Application Windows Forms (.NET Framework), vous pouvez l’installer à partir de la fenêtre Créer un projet. Dans le message Vous ne trouvez pas ce que vous cherchez ?, sélectionnez le lien Installer plus d’outils et de fonctionnalités.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Ensuite, dans Visual Studio Installer, sélectionnez Développement .NET Desktop.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Sélectionnez Modifier dans Visual Studio Installer. Vous serez peut-être invité à enregistrer votre travail. Ensuite, sélectionnez Continuer pour installer la charge de travail.

  5. Dans la fenêtre Configurer votre nouveau projet, nommez votre projet PictureViewer, puis sélectionnez Créer.

  1. Ouvrez Visual Studio.

  2. Dans la fenêtre de démarrage, sélectionnez Créer un projet.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Dans la fenêtre Créer un projet, recherchez Windows Forms. Sélectionnez ensuite Bureau dans la liste Type de projet.

  4. Sélectionnez le modèle Application Windows Forms (.NET Framework) pour C# ou Visual Basic, puis sélectionnez Suivant.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Note

    Si vous ne voyez pas le modèle Application Windows Forms (.NET Framework), vous pouvez l’installer à partir de la fenêtre Créer un projet. Dans le message Vous ne trouvez pas ce que vous cherchez ?, sélectionnez le lien Installer plus d’outils et de fonctionnalités.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Ensuite, dans Visual Studio Installer, sélectionnez Développement .NET Desktop.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Sélectionnez Modifier dans Visual Studio Installer. Vous serez peut-être invité à enregistrer votre travail. Ensuite, sélectionnez Continuer pour installer la charge de travail.

  5. Dans la fenêtre Configurer votre nouveau projet, nommez votre projet PictureViewer, puis sélectionnez Créer.

    Screenshot shows the Configure your new project dialog box.

Visual Studio crée une solution pour votre application. Une solution est un conteneur pour tous les projets et fichiers requis par votre application.

À ce stade, Visual Studio affiche un formulaire vide dans le Concepteur Windows Forms.

Ajouter un élément de disposition

Votre application de visionnage d’images contient une zone d’image, une case à cocher et quatre boutons, que vous ajouterez dans le tutoriel suivant. L’élément de disposition contrôle leur emplacement dans le formulaire. Cette section vous montre comment modifier le titre de votre formulaire, redimensionner le formulaire et ajouter un élément de disposition.

  1. Dans votre projet, sélectionnez le Concepteur Windows Forms. L’onglet indique Form1.cs [Conception] pour C# ou Form1.vb [Conception] pour Visual Basic.

  2. Sélectionnez n’importe où dans Form1.

  3. La fenêtre Propriétés affiche maintenant les propriétés du formulaire. La fenêtre Propriétés se trouve généralement dans le coin inférieur droit de Visual Studio. Cette section contrôle diverses propriétés, telles que la couleur de premier plan et d’arrière-plan, le texte de titre qui apparaît en haut du formulaire et la taille du formulaire.

    Si vous ne voyez pas Propriétés, sélectionnez Affichage>Fenêtre Propriétés.

  4. Recherchez la propriété Texte dans la fenêtre Propriétés. Suivant la façon dont la liste est triée, vous devrez peut-être la faire défiler. Entrez la valeur Visionneuse d’images, puis choisissez Entrée.

    Votre formulaire contient désormais le texte Visionneuse d’images dans sa barre de titre.

    Notes

    Vous pouvez afficher les propriétés par catégorie ou par ordre alphabétique. Utilisez les boutons de la fenêtre Propriétés pour aller et venir.

  5. Sélectionnez à nouveau le formulaire. Sélectionnez la poignée de dimensionnement inférieure droite du formulaire. La poignée est un petit carré blanc situé dans le coin inférieur droit du formulaire.

    Screenshot shows the Forms window with the Drag handle in the lower right.

    Faites glisser la poignée pour redimensionner le formulaire et le rendre plus large et un peu plus grand. Si vous regardez la fenêtre Propriétés, la propriété Taille a changé. Vous pouvez également modifier la taille du formulaire en modifiant la propriété Taille.

  6. Sur le côté gauche de l’environnement IDE de Visual Studio, sélectionnez l’onglet Boîte à outils. Si vous ne le voyez pas, sélectionnez Affichage>Boîte à outils dans la barre de menus ou Ctrl+Alt+X.

  7. Sélectionnez le petit symbole en forme de triangle à côté de Conteneurs pour ouvrir le groupe.

    Screenshot shows the Containers group in the Toolbox tab.

  8. Double-cliquez sur TableLayoutPanel dans Boîte à outils. Vous pouvez également faire glisser un contrôle de la boîte à outils vers le formulaire. Le contrôle TableLayoutPanel apparaît dans votre formulaire.

    Screenshot show the form with the TableLayoutPanel control added.

    Note

    Après avoir ajouté TableLayoutPanel, si une fenêtre intitulée Tâches TableLayoutPanel apparaît à l’intérieur de votre formulaire, cliquez n’importe où dans le formulaire pour la fermer.

  9. Sélectionnez TableLayoutPanel. Vous pouvez vérifier quel contrôle est sélectionné en examinant la fenêtre Propriétés.

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  10. Quand TableLayoutPanel est sélectionné, recherchez la propriété Dock, qui a la valeur None. Sélectionnez la flèche déroulante, puis sélectionnez Remplir, qui est le grand bouton au milieu du menu déroulant.

    Screenshot shows the Properties window with Fill selected.

    L’ancrage fait référence à la façon dont une fenêtre est attachée à une autre fenêtre ou zone.

    TableLayoutPanel remplit maintenant la totalité du formulaire. Si vous redimensionnez à nouveau le formulaire, le TableLayoutPanel reste ancré et se redimensionne automatiquement pour s'adapter aux nouvelles dimensions.

  11. Dans le formulaire, sélectionnez TableLayoutPanel. Un petit bouton en forme de triangle noir se trouve dans le coin supérieur droit.

    Sélectionnez ce triangle pour afficher la liste des tâches du contrôle.

    Screenshot shows TableLayoutPanel tasks.

  12. Sélectionnez Modifier les lignes et les colonnes pour afficher la boîte de dialogue Styles de ligne et de colonne.

  13. Sélectionnez Colonne1 et définissez sa taille sur 15 %. Veillez à ce que le bouton Pourcentage soit sélectionné.

  14. Sélectionnez Colonne2 et affectez-lui la valeur 85 %.

    Screenshot shows TableLayoutPanel column and row styles.

  15. Dans Afficher en haut de la boîte de dialogue Styles de ligne et de colonne, sélectionnez Lignes. Affectez les valeurs 90 pour cent à Ligne1 et 10 pour cent à Ligne2. Sélectionnez OK pour enregistrer vos modifications.

    Votre élément TableLayoutPanel a désormais une grande ligne en haut, une petite ligne en bas, une petite colonne à gauche et une grande colonne à droite.

    Screenshot shows the form with resized TableLayoutPanel.

Votre disposition est terminée.

Notes

Avant d’exécuter votre application, enregistrez votre application en choisissant le bouton Enregistrer tout dans la barre d’outils. Vous pouvez également enregistrer votre application en choisissant Fichier>Enregistrer tout dans la barre de menus ou en appuyant sur Ctrl+Maj+S. Il est conseillé d'enregistrer votre travail régulièrement.

Exécuter l’application

Quand vous créez un projet d’application Windows Forms, vous générez un programme qui s’exécute. À ce stade, votre application Visionneuse d’images ne fait pas grand-chose. Pour l’instant, elle affiche une fenêtre vide avec Visionneuse d’images dans la barre de titre.

Pour exécuter l’application, procédez comme suit.

  1. Appliquez l'une des méthodes suivantes :

    • Sélectionnez la touche F5.
    • Dans la barre de menus, sélectionnez Débogage>Démarrer le débogage.
    • Dans la barre d’outils, sélectionnez le bouton Démarrer.

    Visual Studio exécute votre application. Une fenêtre avec le titre Visionneuse d’images s’affiche.

    Screenshot shows the Windows Forms app running.

    Examinez la barre d’outils de l’environnement IDE de Visual Studio. Des boutons supplémentaires apparaissent dans la barre d’outils lorsque vous exécutez une application. Ces boutons vous permettent d’effectuer des opérations comme arrêter et démarrer votre application, et vous aident à repérer les erreurs éventuelles.

    Screenshot shows the Debugging toolbar where you can stop the app.

  2. Utilisez l'une des méthodes suivantes pour arrêter votre application :

    • Dans la barre d’outils, sélectionnez le bouton Arrêter le débogage.
    • Dans la barre de menus, sélectionnez Débogage>Arrêter le débogage.
    • À partir du clavier, entrez Maj+F5.
    • Sélectionnez X dans le coin supérieur de la fenêtre Visionneuse d’images.

    Lorsque vous exécutez votre application à partir de l’environnement IDE de Visual Studio, elle est appelée débogage. Vous exécutez votre application pour rechercher et corriger les bogues. Vous suivez la même procédure pour exécuter et déboguer d'autres programmes. Pour en savoir plus sur le débogage, consultez Présentation du débogueur.

Étapes suivantes

Passez au tutoriel suivant pour apprendre à ajouter des contrôles à votre programme Visionneuse d’images.

Tutoriel partie 2 : Ajouter des contrôles à votre visionneuse d’images