C#:Création d’une application graphique

C#:Création d’une application graphique

creation appliucation graphique

  • L’interface graphique, appelée communément la GUI (pour Graphical User Interface), est le lien entre l’utilisateur et la machine.
  • Dans Visual C#, la méthode la plus rapide et la plus pratique pour créer une interface utilisateur pour une application Windows consiste à utiliser le Concepteur Windows Forms et la boîte à outils.
  • Il y a trois étapes de base pour créer des interfaces utilisateur pour les applications Windows Forms :
    • Ajout de contrôles à l’aire de conception.
    • Définition des propriétés initiales pour les contrôles.
    • Écriture de gestionnaires pour les événements spécifiés.
 


C#:Création d’une application graphique

Création de projet

      Visual studio

    1. Ouvrez Visual studio
    2. Dans le menu Fichier, pointez Nouveau, puis cliquez sur Projet.
    3. La boîte de dialogue Nouveau projet s’ouvre.
    4. Dans le volet Types de projets, cliquez sur Visual C#.
    5. Dans le volet Modèles, cliquez sur l’icône Application Application Windows Forms.
    6. Assurez-vous que le champ Emplacement fait bien référence à votre dossier
    7. Dans le champ Nom, saisissez ProjetBonjour.
    8. Dans le champ Solution, assurez-vous que Créer une nouvelle solution est sélectionné.
    9. Cette action crée une nouvelle solution qui contiendra le projet. Vous pouvez aussi employer la commande Ajouter à la solution, qui ajoute le projet à la solution ProjetBonjour.
    10. Cliquez sur OK.
    11. Création de projet

    Remarques

    • le projet ProjetBonjour dans la solution ProjetBonjour :
    • [Program.cs] est la classe principale du projet
    • [Form1.cs] est le fichier source qui va gérer le comportement de la fenêtre
    • [Form1.Designer.cs] est le fichier source qui va encapsuler l’information sur les composants de la fenêtre
    • Le fichier [Form1.cs] en mode “conception” (design)
    • L’application générée peut être exécutée par (Ctrl-F5). La fenêtre [Form1] s’affiche. On peut la déplacer, la redimensionner et la fermer. On a donc les éléments de base d’une fenêtre graphique.
Création de l’interface utilisateur

    Form

  1. Cliquez sur l’onglet Boîte à outils qui apparaît à gauche du formulaire dans la fenêtre Concepteur.
  2. La Boîte à outils apparaît, masquant partiellement le formulaire et affichant les divers composants et contrôles que vous pouvez placer dans un formulaire Windows.
  3. Sélectionnez la forme dans la fenêtre Propriétés
    • Modifiez la propriété Name du contrôle Forms en frmBonjour.
    • Modifiez la propriété Size du contrôle Forms en 406; 188.
    • Modifiez la propriété Text du contrôle Forms en Bonjour.

    Label

  4. Dans la sectionContrôoles Commun, cliquez sur Label, puis cliquez sur la partie visible du formulaire.
  5. Un contrôle Label est ajouté au formulaire (vous le déplacerez à l’emplacement souhaité dans un moment), et la Boîte à outils disparaît.
  6. Le contrôle Label du formulaire ne se trouve peut-être pas exactement où vous le souhaitez. Vous pouvez cliquer sur les contrôles que vous avez ajoutés à un formulaire et les faire glisser pour les repositionner. Grâce à cette technique, déplacez le contrôle Label pour le placer vers le coin supérieur gauche du formulaire (un positionnement exact n’est pas important pour cette application).
  7. Fenêtre Propriétés

  8. Dans le menu Affichage, cliquez sur Fenêtre Propriétés.La fenêtre Propriétés apparaît en bas à droite de l’écran, sous l’Explorateur de solutions (si elle n’est pas déjà affichée). La fenêtre Propriétés offre un autre moyen de modifier les propriétés des éléments d’un formulaire, ainsi que les autres éléments d’un projet. Elle est sensible au contexte, ce qui signifie qu’elle affiche les propriétés de l’élément actuellement sélectionné. Quand on clique sur la barre de titre du formulaire affiché dans la fenêtre Concepteur, la fenêtre Propriétés affiche les propriétés du formulaire. Si l’on clique sur le contrôle Label, la fenêtre affiche alors les propriétés du contrôle Label. Si vous cliquez n’importe où ailleurs dans le formulaire, la fenêtre Propriétés affiche les propriétés d’un élément mystérieux appelé grid (grille). Un grid agit comme un conteneur pour les éléments d’un formulaire WPF, et vous pouvez utiliser le grid, entre d’autres choses, pour indiquer la manière dont les éléments d’un formulaire doivent être alignés et regroupés.
  9. Cliquez sur le contrôle Label du formulaire. Dans la fenêtre Propriétés, recherchez la section Texte. En utilisant les propriétés de cette section, vous pouvez spécifier la police et la taille de la police du contrôle Label, mais pas le texte qui est affiché dans le contrôle Label.
  10. Modifiez la propriété Font en 14, puis cliquez sur la barre de titre du formulaire. La taille du texte du contrôle Label change, bien que le label ne soit plus assez grand pour afficher le texte. Rétablissez la valeur de la propriété Font à 12. Note Le texte affiché dans le contrôle Label peut ne pas se redimensionner immédiatement dans la fenêtre Concepteur. Le problème se réglera lorsque vous générerez et exécuterez l’application, ou lorsque vous fermerez et ouvrirez le formulaire dans la fenêtre Concepteur.
  11. création d'application graphique
  12. Faites défiler la description XAML du formulaire dans le volet en bas vers la droite, et examinez les propriétés du contrôle Label. Le contrôle Label comporte une balise .
  13. Modifiez le texte Label (juste avant la balise fermante) en Saisissez votre nom, comme le montre l’image suivante.
  14. Cliquez sur le formulaire dans la fenêtre Concepteur, puis affichez de nouveau la Boîte à outils
  15. TextBox

  16. Dans la Boîte à outils, cliquez sur TextBox, puis cliquez sur le formulaire. Un contrôle TextBox est ajouté au formulaire. Déplacez le contrôle TextBox de manière à ce qu’il soit directement en dessous du contrôle Label.
  17. A Retenir

    Lorsque vous déplacez un contrôle dans un formulaire, les poignées d’alignement apparaissent automatiquement lorsque le contrôle est aligné verticalement et horizontalement avec d’autres contrôles. Cela vous permet de voir rapidement si les contrôles sont bien alignés.

  18. Lorsque le contrôle TextBox est sélectionné:
    • Modifiez la propriété Name du contrôle TextBox en TxtUtilisateur.
    • Modifiez la propriété BorderStyle du contrôle TextBox en FixedSingle.
    • Modifiez la propriété Multiline du contrôle TextBox en true.
    • Modifiez la propriété Size du contrôle TextBox en 236; 33.
    • Modifiez la propriété Location du contrôle TextBox en 66; 55.
    • Modifiez la propriété Font du contrôle TextBox en:
      • Name: Stencil
      • Size:12
      • Bold:True
    • Modifiez la propriété Text du contrôle Button en &Ok.

    Button

  19. Affichez à nouveau la Boîte à outils, cliquez sur Button, puis cliquez sur le formulaire. Déplacez le contrôle Button à droite du contrôle TextBox en veillant à ce qu’il soit aligné horizontalement avec la zone de texte.
  20. En utilisant la fenêtre Propriétés:
    • Modifiez la propriété Name du contrôle Button en BtnOk.
    • Modifiez la propriété Size du contrôle Button en 121; 43.
    • Modifiez la propriété FlatStyle du contrôle Button en Flat.
    • Modifiez la propriété Location du contrôle TextBox en 113; 94.
    • Modifiez la propriété Font du contrôle Button en:
      • Name: Stencil
      • Size:12
      • Bold:True
    • Modifiez la propriété Text du contrôle Button en &Ok.
  21. Cliquez sur le formulaire dans la fenêtre Concepteur, puis affichez la fenêtre Propriétés, modifiez la propriété Text du contrôle Forms en Bonjour.
  22. Le formulaire devrait désormais ressembler à ceci :
  23. C#:Création d’une application graphique
  24. Dans le menu Générer, cliquez sur Générer la solution, et vérifiez que le projet se génère avec succès.
  25. Dans le menu Déboguer, cliquez sur Exécuter sans débogage.L’application devrait s’exécuter et afficher votre formulaire. Vous pouvez saisir votre nom dans la zone de texte et cliquer sur OK, mais rien ne se produit encore. Vous devez ajouter du code pour gérer l’événement Click du bouton OK, ce dont nous allons nous occuper un peu plus tard.
  26. Cliquez sur le bouton Fermer (le X dans le coin supérieur droit du formulaire) pour fermer le formulaire et retourner dans Visual Studio.
  27. Applications générée c#
La fenêtre Code

    But du code

  • Le but du code que vous pouvez voir dans cette classe est de vous permettre d’ajouter vos propres méthodes pour gérer la logique de votre application, comme ce qui se passe lorsque l’utilisateur appuie sur le bouton BtnOK par exemple.
  • Vous pouvez aussi afficher le fichier code C# d’un formulaire en faisant un double clic n’importe où dans la fenêtre Concepteur puis en cliquant sur Afficher le code.
  • Vous pouvez aussi afficher le fichier code C# d’un contrôle spécifique pour écrire du code.
  • Écriture du code du bouton OK

    1. Faites un double-clic sur le bouton OK du formulaire.
    2. Ajoutez le code imprimé en gras à la méthode BtnOk_Click :
    3. MessageBox.Show(“Bonjour” + TxtUtilisateur.Text);
    4. Dans le menu Déboguer, cliquez sur Démarrer .
    5. Lorsque le formulaire apparaît, saisissez votre nom dans la zone de texte, puis cliquez sur OK. Une boîte de dialogue apparaît et vous salue en vous appelant par votre nom

Sommaire du cours c#