Visual studio : GUI

Contents

Nous allons réaliser notre première application GUI en C#.

Pour cet exemple, nous allons utiliser Visual Studio Express, et réaliser un petit explorateur de classes.

Nous devons donc afficher une fenêtre, qui comporte un menu pour sélectionner le fichier exécutable dont nous désirons explorer les classes, et un composant qui nous permettra d'afficher l'arborescence de ces dernières.

GUI en C# avec Visual Studio Express (tutorial animé)

Nous allons créer un nouveau projet pour notre application graphique en C#. Pour cela, après avoir démarré l'application Visual Studio Express, nous devons sélectionner dans le menu File l'option New Project...

Ensuite, nous sélectionnons Windows Application, et nous pouvons spécifier le nom du projet.
Voici un exemple de fichiers automatiquement générés par Visual Studio Express.

Structure de la sauvegarde d'un projet Gui avec Visual Studio Express C#

Nous pouvons modifier le titre de la fenêtre comme nous pouvons le voir dans le premier exemple animé : quand la fenêtre en mode design est sélectionnée, nous pouvons cliquer sur l'onglet Properties, puis modifier la valeur qui correspond à l'attribut text dans la rubrique apearance.

Remarques

Si l'onglet Properties n'est pas présent, nous pouvons l'afficher au moyen d'un clic droit sur la fenêtre en mode design, et sélectionner Properties dans ce menu contextuel.

Tant que nous voyons ce menu, nous pouvons utiliser l'option View Code pour afficher le code généré par l'IDE.

La valeur Form1 que nous pouvons lire dans l'attribut name de la rubrique Design est le nom qui sera utilisé dans le code généré. Nous devons éviter de modifier ce nom; soit nous spécifions au départ un nom plus approprié, soit nous utilisons les possibilités de remaniement du code(refactoring) que nous verrons plus tard.

Codes

Voici les différents codes générés  :

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Data;
  5. using System.Drawing;
  6. using System.Text;
  7. using System.Windows.Forms;
  8. namespace ClassExplorer
  9. {
  10. 	public partial class Form1 : Form
  11. 	{
  12. 		public Form1()
  13. 		{
  14. 			InitializeComponent();
  15. 		}
  16. 	}
  17. }
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Windows.Forms;
  4. namespace ClassExplorer
  5. {
  6. 	static class Program
  7. 	{
  8. 		/// <summary>
  9. 		/// The main entry point for the application.
  10. 		/// </summary>
  11. 		[STAThread]
  12. 		static void Main()
  13. 		{
  14. 			Application.EnableVisualStyles();
  15. 			Application.SetCompatibleTextRenderingDefault(false);
  16. 			Application.Run(new Form1());
  17. 		}
  18. 	}
  19. }
  1. namespace ClassExplorer
  2. {
  3. 	partial class Form1
  4. 	{
  5. 	/// <summary>
  6. 	/// Required designer variable.
  7. 	/// </summary>
  8. 	private System.ComponentModel.IContainer components = null;
  9. 	/// <summary>
  10. 	/// Clean up any resources being used.
  11. 	/// </summary>
  12. 	/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
  13. 	protected override void Dispose(bool disposing)
  14. 	{
  15. 		if (disposing && (components != null))
  16. 		{
  17. 			components.Dispose();
  18. 		}
  19. 		base.Dispose(disposing);
  20. 	}
  21. 	#region Windows Form Designer generated code
  22. 	/// <summary>
  23. 	/// Required method for Designer support - do not modify
  24. 	/// the contents of this method with the code editor.
  25. 	/// </summary>
  26. 	private void InitializeComponent()
  27. 	{
  28. 		this.SuspendLayout();
  29. 		// 
  30. 		// Form1
  31. 		// 
  32. 		this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
  33. 		this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
  34. 		this.ClientSize = new System.Drawing.Size(292, 273);
  35. 		this.Name = "Form1";
  36. 		this.Text = "My Class Explorer";
  37. 		this.ResumeLayout(false);
  38. 	}
  39. 	#endregion
  40. 	}
  41. }

Ceci nous permet de générer une fenêtre vide, dont le titre est "My Class Explorer" (même pas un petit hello world...).
Nous pouvons remarquer que Visual Studio utilise le mot clé partial pour placer le code de la classe dans plusieurs fichiers distincts.

Nous allons voir dans les pages suivantes comment ajouter les différents composants nécessaires à notre application.

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 28/09/2006, last modified the 26/10/2018
Source of the printed document:https://www.gaudry.be/en/csharp-gui-visual.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.