Tutoriel : Créer une application Windows Forms visionneuse d’images (.NET Framework)

Dans cette série de trois didacticiels, vous créez une application Windows Forms qui charge une image et l’affiche. Visual Studio Integrated Design Environment (IDE) fournit les outils dont vous avez besoin pour créer l’application.

Dans ce premier tutoriel, vous allez apprendre à :

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

Pour créer une application Windows Forms avec .NET, suivez le tutoriel Créer une application Windows Forms avec .NET. Consultez le guide bureau sur Windows Forms .NET pour en savoir plus.

Conditions préalables

• Vous avez besoin de Visual Studio pour suivre ce didacticiel. Visitez la page de téléchargements Visual Studio pour une version gratuite.
• Charge de travail développement de bureaux .NET. Pour vérifier ou installer cette charge de travail dans Visual Studio, sélectionnez Tools>Obtenir des outils et des fonctionnalités. Pour plus d’informations, consultez Modifier les charges de travail ou les composants individuels.

Créer votre 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.

   

3. Dans la fenêtre Créer un projet, recherchez Windows Forms. Ensuite, sélectionnez Desktop dans la liste type de projet.

4. Sélectionnez le modèle Windows Forms App (.NET Framework), pour soit C# soit Visual Basic, puis sélectionnez suivant.

   

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

   

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

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

Ajouter un élément de disposition

Votre application d’affichage d’image contient une zone d’image, une case à cocher et quatre boutons que vous ajoutez le tutoriel suivant. L’élément de disposition contrôle son emplacement sur 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 lit Form1.cs [Création] pour C# ou Form1.vb [Création] pour Visual Basic.

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

3. La fenêtre Propriétés affiche désormais les propriétés du formulaire. La fenêtre Propriétés se trouve généralement en bas à droite de Visual Studio. Cette section contrôle différentes propriétés, telles que le premier plan et la couleur 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é Text dans la fenêtre propriétés . Selon la façon dont la liste est triée, vous devrez peut-être faire défiler vers le bas. Entrez la valeur Visionneuse d’images, puis choisissez Entrer.

   Votre formulaire comporte 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 basculer d'avant en arrière.

5. Sélectionnez à nouveau le formulaire. Sélectionnez la poignée de dimensionnement inférieure droite du formulaire. La poignée, représentée par un petit carré blanc, se trouve dans le coin inférieur droit du formulaire.

   

   Faites glisser la poignée pour redimensionner le formulaire afin que le formulaire soit plus large et un peu plus grand. Si vous examinez la fenêtre Propriétés, la propriété Taille est différente. Vous pouvez également modifier la taille du formulaire en modifiant la propriété Size.

6. Sur le côté gauche de l’IDE Visual Studio, sélectionnez l’onglet boîte à outils. Si vous ne le voyez pas, sélectionnez Afficher>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.

   

8. Double-cliquez sur TableLayoutPanel dans la 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.

   

   Notes

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

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

   

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.

    

    L'ancrage fait référence à la manière dont une fenêtre est attachée à une autre fenêtre ou zone.

    TableLayoutPanel remplit désormais l’intégralité du formulaire. Si vous redimensionnez à nouveau le formulaire, le TableLayoutPanel reste ancré et se redimensionne pour s’adapter.

11. Dans le formulaire, sélectionnez le TableLayoutPanel. Dans le coin supérieur droit, il y a un petit bouton de triangle noir.

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

    

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 %. Vérifiez que l’option Pourcentage est sélectionnée.

14. Sélectionnez Colonne2 et définissez-la sur 85 %.

    

15. Dans Afficher en haut de la boîte de dialogue Styles de ligne et de colonne, sélectionnez Lignes. Définissez ligne1 sur 90 % et ligne2 à 10 %. Sélectionnez OK pour enregistrer vos modifications.

    Votre TableLayoutPanel possède désormais une grande ligne supérieure, une petite ligne inférieure, une petite colonne gauche et une colonne de droite importante.

    

Votre mise en page est terminée.

Notes

Avant d’exécuter votre application, enregistrez votre application en choisissant le bouton Enregistrer tout barre d’outils. Vous pouvez également enregistrer votre application en choisissant Fichier>Tout enregistrer dans la barre de menus, ou en appuyant sur Ctrl+Maj+S. Il est recommandé d’économiser tôt et souvent.

Exécuter votre application

Lorsque vous créez un projet d’application Windows Forms, vous créez 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. Utilisez 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.

   

   Examinez la barre d’outils de l’IDE Visual Studio. D’autres boutons apparaissent dans la barre d’outils lorsque vous exécutez une application. Ces boutons vous permettent de faire des choses telles que arrêter et démarrer votre application, et vous aider à suivre les erreurs.

   

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’IDE 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 Premier aperçu du débogueur.

Étape suivante

Passez au tutoriel suivant pour apprendre à ajouter des contrôles à votre programme Picture Viewer.

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