Tutoriel d'application C# Windows Forms avec exemple

Jusqu'à présent, nous avons vu comment travailler avec C# pour créer des applications basées sur la console. Mais dans un scénario réel, l'équipe utilise normalement Visual Studio et C# pour créer des formulaires Windows ou des applications Web.

Une application Windows Form est une application conçue pour s'exécuter sur un ordinateur. Il ne fonctionnera pas sur un navigateur Web, car il deviendra alors une application Web.

Ce tutoriel se concentrera sur la façon dont nous pouvons créer des applications basées sur Windows. Nous apprendrons également quelques notions de base sur la façon de travailler avec les différents éléments de l'application C# Windows.

Dans ce didacticiel Windows, vous apprendrez-

• Les bases de Windows Forms
• Hello World dans Windows Forms
• Ajouter des contrôles à un formulaire
• Gestion des événements pour les contrôles
• Contrôle d'arborescence et PictureBox

Principes de base de Windows Forms

Une application Windows Forms est une application qui s'exécute sur l'ordinateur de bureau. Une application Windows Forms aura normalement une collection de contrôles tels que des étiquettes, des zones de texte, des zones de liste, etc.

Vous trouverez ci-dessous un exemple d'une simple application Windows Form C#. Il affiche un écran de connexion simple, accessible par l'utilisateur. L'utilisateur saisira les informations d'identification requises, puis cliquera sur le bouton Connexion pour continuer.

Donc un exemple des contrôles disponibles dans l'application ci-dessus

1. Il s'agit d'une collection de contrôles d'étiquette qui sont normalement utilisés pour décrire les contrôles adjacents. Donc, dans notre cas, nous avons 2 zones de texte, et les étiquettes sont utilisées pour dire à l'utilisateur qu'une zone de texte sert à entrer le nom d'utilisateur et l'autre pour le mot de passe.
2. Les 2 zones de texte sont utilisées pour contenir le nom d'utilisateur et le mot de passe qui seront saisis par l'utilisateur.
3. Enfin, nous avons le bouton de contrôle. Le contrôle du bouton aura normalement un code attaché pour effectuer un certain ensemble d'actions. Ainsi, par exemple, dans le cas ci-dessus, nous pourrions faire en sorte que le bouton effectue une action de validation du nom d'utilisateur et du mot de passe saisis par l'utilisateur.

C# Bonjour tout le monde

Voyons maintenant un exemple de la façon dont nous pouvons implémenter une simple application "hello world" dans Visual Studio. Pour cela, nous aurions besoin de mettre en œuvre les étapes mentionnées ci-dessous

Étape 1) La première étape consiste à créer un nouveau projet dans Visual Studio. Après avoir lancé Visual Studio, vous devez choisir l'option de menu Nouveau->Projet.

Étape 2) L'étape suivante consiste à choisir le type de projet en tant qu'application Windows Forms. Ici, nous devons également mentionner le nom et l'emplacement de notre projet.

1. Dans la boîte de dialogue du projet, nous pouvons voir différentes options pour créer différents types de projets dans Visual Studio. Cliquez sur l'option Windows sur le côté gauche.
2. Lorsque nous cliquons sur les options Windows à l'étape précédente, nous pourrons voir une option pour l'application Windows Forms. Cliquez sur cette option.
3. Nous donnerons un nom à l'application. Dans notre cas, il s'agit de DemoApplication. Nous fournirons également un emplacement pour stocker notre application.
4. Enfin, nous cliquons sur le bouton "OK" pour laisser Visual Studio créer notre projet.

Si les étapes ci-dessus sont suivies, vous obtiendrez la sortie ci-dessous dans Visual Studio.

Sortie :-

Vous verrez un concepteur de formulaire affiché dans Visual Studio. C'est dans ce concepteur de formulaires que vous commencerez à créer votre application Windows Forms.

Dans l'explorateur de solutions, vous pourrez également voir la solution DemoApplication. Cette solution contiendra les 2 fichiers de projet ci-dessous

1. Une application Form appelée Forms1.cs. Ce fichier contiendra tout le code de l'application Windows Form.
2. Le programme principal appelé Program.cs est le fichier de code par défaut qui est créé lorsqu'une nouvelle application est créée dans Visual Studio. Ce code contiendra le code de démarrage de l'application dans son ensemble.

Sur le côté gauche de Visual Studio, vous verrez également une boîte à outils. La boîte à outils contient tous les contrôles qui peuvent être ajoutés à un Windows Forms. Des contrôles comme une zone de texte ou une étiquette ne sont que quelques-uns des contrôles qui peuvent être ajoutés à un Windows Forms.

Vous trouverez ci-dessous une capture d'écran de l'apparence de la boîte à outils.

Étape 3) Dans cette étape, nous allons maintenant ajouter une étiquette au formulaire qui affichera "Hello World". Dans la boîte à outils, vous devrez choisir le contrôle Label et le faire simplement glisser sur le formulaire.

Une fois que vous avez fait glisser l'étiquette sur le formulaire, vous pouvez voir l'étiquette intégrée sur le formulaire comme indiqué ci-dessous.

Étape 4) L'étape suivante consiste à accéder aux propriétés du contrôle et à modifier le texte en "Hello World".

Pour accéder aux propriétés d'un contrôle, vous devez cliquer avec le bouton droit sur le contrôle et choisir l'option de menu Propriétés

• Le panneau des propriétés s'affiche également dans Visual Studio. Ainsi, pour le contrôle de l'étiquette, dans le contrôle des propriétés, accédez à la section Texte et saisissez "Hello World".
• Chaque contrôle possède un ensemble de propriétés qui décrivent le contrôle.

Si vous suivez toutes les étapes ci-dessus et exécutez votre programme dans Visual Studio, vous obtiendrez la sortie suivante

Sortie :-

Dans la sortie, vous pouvez voir que le Windows Form est affiché. Vous pouvez également voir "Hello World" s'afficher sur le formulaire.

Ajouter des contrôles à un formulaire

Nous avions déjà vu comment ajouter un contrôle à un formulaire lorsque nous avons ajouté le contrôle label dans la section précédente pour afficher "Hello World".

Examinons les autres contrôles disponibles pour les formulaires Windows et voyons certaines de leurs propriétés communes.

Dans notre application de formulaire Windows dans les exemples C#, nous allons créer un formulaire qui aura les fonctionnalités suivantes.

1. La possibilité pour l'utilisateur de saisir son nom et son adresse.
2. Une option permettant de choisir la ville dans laquelle l'utilisateur réside
3. La possibilité pour l'utilisateur de saisir une option pour le sexe.
4. Une option pour choisir un cours que l'utilisateur souhaite apprendre. Il y aura des choix pour C# et ASP.Net

Examinons donc chaque contrôle en détail et ajoutons-les pour créer le formulaire avec les fonctionnalités mentionnées ci-dessus.

Zone de groupe

Une zone de groupe est utilisée pour regrouper logiquement les contrôles dans une section. Prenons un exemple si vous aviez une collection de contrôles pour entrer des détails tels que le nom et l'adresse d'une personne. Idéalement, il s'agit des détails d'une personne, vous voudriez donc avoir ces détails dans une section distincte du formulaire. A cet effet, vous pouvez disposer d'une zone de groupe. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous

Étape 1) La première étape consiste à faire glisser le contrôle Groupbox sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) Une fois la groupbox ajoutée, accédez à la fenêtre des propriétés en cliquant sur le contrôle de la groupbox. Dans la fenêtre des propriétés, accédez à la propriété Texte et remplacez-la par "Détails de l'utilisateur".

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Dans la sortie, vous pouvez clairement voir que la Groupbox a été ajoutée au formulaire. Vous pouvez également voir que le texte de la zone de groupe a été remplacé par "Détails de l'utilisateur".

Contrôle des libellés

Vient ensuite le contrôle des étiquettes. Le champ label permet d'afficher un texte ou un message à l'utilisateur sur le formulaire. Le contrôle d'étiquette est normalement utilisé avec d'autres contrôles. Des exemples courants sont ceux où une étiquette est ajoutée avec le contrôle de zone de texte.

L'étiquette indique à l'utilisateur ce qu'il est censé remplir dans la zone de texte. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous allons ajouter 2 étiquettes, l'une qui s'appellera "nom" et l'autre appelée "adresse". Elles seront utilisées conjointement avec les contrôles de zone de texte qui seront ajoutés dans la section ultérieure.

Étape 1) La première étape consiste à faire glisser le contrôle d'étiquette sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous. Assurez-vous de faire glisser le contrôle d'étiquette 2 fois afin que vous puissiez en avoir un pour le "nom" et l'autre pour l'"adresse".

Étape 2) Une fois l'étiquette ajoutée, accédez à la fenêtre des propriétés en cliquant sur le contrôle de l'étiquette. Dans la fenêtre des propriétés, accédez à la propriété Text de chaque contrôle d'étiquette.

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Vous pouvez voir les contrôles d'étiquette ajoutés au formulaire.

Zone de texte

Une zone de texte est utilisée pour permettre à un utilisateur de saisir du texte sur l'application Windows en C#. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous allons ajouter 2 zones de texte au formulaire, une pour le Nom et l'autre pour l'adresse à saisir pour l'utilisateur

Étape 1) La première étape consiste à faire glisser le contrôle de la zone de texte sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) Une fois les zones de texte ajoutées, accédez à la fenêtre des propriétés en cliquant sur le contrôle de la zone de texte. Dans la fenêtre des propriétés, accédez à la propriété Nom et ajoutez un nom significatif à chaque zone de texte. Par exemple, nommez la zone de texte de l'utilisateur en tant que txtName et celle de l'adresse en tant que txtAddress. Une convention et une norme de dénomination doivent être établies pour les contrôles car il devient plus facile d'ajouter des fonctionnalités supplémentaires à ces contrôles, ce que nous verrons plus tard.

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Dans la sortie, vous pouvez clairement voir que les zones de texte ont été ajoutées au formulaire.

Zone de liste

Une liste déroulante est utilisée pour présenter une liste d'éléments sur le formulaire Windows. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous allons ajouter une zone de liste au formulaire pour stocker certaines villes.

Étape 1) La première étape consiste à faire glisser le contrôle de la zone de liste sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) Une fois la list box ajoutée, accédez à la fenêtre des propriétés en cliquant sur le contrôle de la list box.

1. Tout d'abord, modifiez la propriété du contrôle de zone de liste, dans notre cas, nous l'avons changé en lstCity
2. Cliquez sur la propriété Items. Cela vous permettra d'ajouter différents éléments qui peuvent apparaître dans la zone de liste. Dans notre cas, nous avons sélectionné les articles "collection".
3. Dans l'éditeur de collections de chaînes, qui s'affiche, saisissez les noms des villes. Dans notre cas, nous avons saisi "Mumbai", "Bangalore" et "Hyderabad".
4. Enfin, cliquez sur le bouton "OK".

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Dans la sortie, vous pouvez voir que la Listbox a été ajoutée au formulaire. Vous pouvez également voir que la zone de liste a été remplie avec les valeurs de la ville.

Bouton radio

Un bouton radio est utilisé pour présenter une liste d'éléments parmi lesquels l'utilisateur peut en choisir un. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons un bouton radio pour une option homme/femme.

Étape 1) La première étape consiste à faire glisser le contrôle "radiobutton" sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous.

Étape 2) Une fois le Radiobutton ajouté, accédez à la fenêtre des propriétés en cliquant sur le contrôle Radiobutton.

1. Tout d'abord, vous devez modifier la propriété de texte des deux commandes Radio. Allez dans les fenêtres de propriétés et changez le texte en mâle d'un bouton radio et le texte de l'autre en femelle.
2. De même, changez la propriété name des deux radiocommandes. Allez dans la fenêtre des propriétés et changez le nom en "rdMale" d'un bouton radio et en "rdfemale" pour l'autre.

Une fois que vous apportez les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Vous verrez les boutons radio ajoutés au formulaire Windows.

Case à cocher

Une case à cocher est utilisée pour fournir une liste d'options dans laquelle l'utilisateur peut choisir plusieurs choix. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons 2 cases à cocher à nos formulaires Windows. Ces cases à cocher permettront à l'utilisateur de choisir s'il souhaite apprendre C# ou ASP.Net.

Étape 1) La première étape consiste à faire glisser le contrôle de la case à cocher sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) Une fois la case à cocher ajoutée, accédez à la fenêtre des propriétés en cliquant sur le contrôle Case à cocher.

Dans la fenêtre des propriétés,

1. Tout d'abord, vous devez modifier la propriété text des deux contrôles de case à cocher. Accédez aux fenêtres de propriétés et modifiez le texte en C# et ASP.Net.
2. De même, changez la propriété name des deux radiocommandes. Allez dans la fenêtre des propriétés et changez le nom en chkC d'une case à cocher et en chkASP pour l'autre.

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Bouton

Un bouton est utilisé pour permettre à l'utilisateur de cliquer sur un bouton qui lancerait alors le traitement du formulaire. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous. Nous ajouterons un simple bouton appelé "Soumettre" qui sera utilisé pour soumettre toutes les informations sur le formulaire.

Étape 1) La première étape consiste à faire glisser le contrôle du bouton sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) Une fois le Button ajouté, accédez à la fenêtre des propriétés en cliquant sur le champ Button.

1. Tout d'abord, vous devez modifier la propriété text du contrôle du bouton. Allez dans la fenêtre des propriétés et changez le texte en "soumettre".
2. De même, modifiez la propriété name du contrôle. Allez dans la fenêtre des propriétés et changez le nom en "btnSubmit".

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

Félicitations, vous avez maintenant votre premier Windows Form de base en place. Passons maintenant au sujet suivant pour voir comment nous pouvons gérer les événements pour les contrôles.

Gestion des événements C# pour les contrôles

Lorsque vous travaillez avec un formulaire Windows, vous pouvez ajouter des événements aux contrôles. Un événement est quelque chose qui se produit lorsqu'une action est effectuée. L'action la plus courante consiste probablement à cliquer sur un bouton d'un formulaire. Dans C# Windows Forms, vous pouvez ajouter du code qui peut être utilisé pour effectuer certaines actions lorsqu'un bouton est enfoncé sur le formulaire.

Normalement, lorsqu'un bouton est enfoncé sur un formulaire, cela signifie qu'un traitement doit avoir lieu.

Examinons l'un des événements et comment il peut être géré avant de passer au scénario d'événement de bouton.

L'exemple ci-dessous présentera un événement pour le contrôle Listbox. Ainsi, chaque fois qu'un élément est sélectionné dans le contrôle de la liste déroulante, une boîte de message doit apparaître indiquant l'élément sélectionné. Effectuons les étapes suivantes pour y parvenir.

Étape 1) Double-cliquez sur la Listbox dans le concepteur de formulaires. En faisant cela, Visual Studio ouvrira automatiquement le fichier de code pour le formulaire. Et il ajoutera automatiquement une méthode d'événement au code. Cette méthode d'événement sera déclenchée chaque fois qu'un élément de la liste déroulante est sélectionné.

Ci-dessus se trouve l'extrait de code qui est automatiquement ajouté par Visual Studio, lorsque vous double-cliquez sur le contrôle de zone de liste sur le formulaire. Ajoutons maintenant la section de code ci-dessous à cet extrait de code, pour ajouter la fonctionnalité requise à l'événement listbox.

1. Il s'agit de la méthode de gestionnaire d'événements qui est automatiquement créée par Visual Studio lorsque vous double-cliquez sur le contrôle de zone de liste. Vous n'avez pas à vous soucier de la complexité du nom de la méthode ou des paramètres passés à la méthode.
2. Ici, nous obtenons le SelectedItem via la propriété lstCity.SelectedItem. N'oubliez pas que lstCity est le nom de notre contrôle Listbox. Nous utilisons ensuite la méthode GetItemText pour obtenir la valeur réelle de l'élément sélectionné. Nous attribuons ensuite cette valeur à la variable de texte.
3. Enfin, nous utilisons la méthode MessageBox pour afficher la valeur de la variable texte à l'utilisateur.

Une fois que vous apportez les modifications ci-dessus et exécutez le programme dans Visual Studio, vous verrez la sortie suivante

Sortie :-

À partir de la sortie, vous pouvez voir que lorsqu'un élément de la zone de liste est sélectionné, une boîte de message apparaît. Cela affichera l'élément sélectionné dans la liste déroulante.

Examinons maintenant le contrôle final qui est la méthode de clic sur le bouton. Encore une fois, cela suit la même philosophie. Double-cliquez simplement sur le bouton dans le concepteur de formulaires et il ajoutera automatiquement la méthode pour le gestionnaire d'événements de bouton. Ensuite, il vous suffit d'ajouter le code ci-dessous.

1. Il s'agit de la méthode de gestionnaire d'événements qui est automatiquement créée par Visual Studio lorsque vous double-cliquez sur le contrôle du bouton. Vous n'avez pas à vous soucier de la complexité du nom de la méthode ou des paramètres passés à la méthode.
2. Ici, nous obtenons des valeurs saisies dans la zone de texte du nom et de l'adresse. Les valeurs peuvent être extraites de la propriété text de la zone de texte. Nous attribuons ensuite les valeurs à 2 variables, nom et adresse en conséquence.
3. Enfin, nous utilisons la méthode MessageBox pour afficher les valeurs de nom et d'adresse à l'utilisateur.

Une fois que vous apportez les modifications ci-dessus et exécutez le programme dans Visual Studio, vous verrez la sortie suivante

Sortie :-

1. Tout d'abord, saisissez une valeur dans le champ du nom et de l'adresse.
2. Cliquez ensuite sur le bouton Soumettre

Une fois que vous aurez cliqué sur le bouton Soumettre, une boîte de message apparaîtra et vous montrera correctement ce que vous avez entré dans la section des détails de l'utilisateur.

Contrôle d'arborescence et PictureBox

Il y a 2 autres contrôles que nous pouvons regarder, l'un est le "Contrôle de l'arbre" et l'autre est le "Contrôle de l'image". Examinons des exemples de la manière dont nous pouvons mettre en œuvre ces contrôles

Contrôle de l'arborescence

- Le contrôle d'arborescence est utilisé pour répertorier les éléments dans une arborescence. Le meilleur exemple est probablement lorsque nous voyons l'Explorateur Windows lui-même. La structure des dossiers dans l'Explorateur Windows ressemble à une structure arborescente.

Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous.

Étape 1) La première étape consiste à faire glisser le contrôle Tree sur le formulaire Windows à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) L'étape suivante consiste à commencer à ajouter des nœuds à la collection d'arbres afin qu'ils puissent apparaître dans l'arbre en conséquence. Tout d'abord, suivons les sous-étapes ci-dessous pour ajouter un nœud racine à la collection d'arbres.

1. Accédez à la boîte à outils des propriétés du contrôle de l'arborescence. Cliquez sur la propriété du nœud. Cela fera apparaître l'éditeur TreeNode
2. Dans l'éditeur TreeNode, cliquez sur le bouton Ajouter une racine pour ajouter un nœud racine à la collection d'arbres.
3. Ensuite, modifiez le texte du nœud racine et fournissez le texte en tant que racine et cliquez sur le bouton "OK". Cela ajoutera le nœud racine.

Étape 3) L'étape suivante consiste à commencer à ajouter les nœuds enfants à la collection d'arbres. Suivons les sous-étapes ci-dessous pour ajouter un nœud racine enfant à la collection d'arbres.

1. Tout d'abord, cliquez sur le bouton Ajouter un enfant. Cela vous permettra d'ajouter des nœuds enfants à la collection Tree.
2. Pour chaque nœud enfant, modifiez la propriété de texte. Continuez à répéter l'étape précédente et cette étape et ajoutez 2 nœuds supplémentaires. À la fin, vous aurez 3 nœuds comme indiqué ci-dessus, avec le texte comme Étiquette, Bouton et Case à cocher respectivement.
3. Cliquez sur le bouton OK

Une fois que vous avez apporté les modifications ci-dessus, vous verrez la sortie suivante.

Sortie :-

Vous pourrez voir l'arborescence ajoutée au formulaire. Lorsque vous exécutez l'application de formulaire Windows, vous pouvez développer le nœud racine et voir les nœuds enfants dans la liste.

Contrôle de la zone d'image

Ce contrôle est utilisé pour ajouter des images au Winforms C#. Voyons comment nous pouvons implémenter cela avec un exemple ci-dessous.

Étape 1) La première étape consiste à faire glisser le contrôle PictureBox sur le formulaire Windows C# à partir de la boîte à outils, comme indiqué ci-dessous

Étape 2) L'étape suivante consiste à attacher une image au contrôle de zone d'image. Cela peut être fait en suivant les étapes ci-dessous.

1. Tout d'abord, cliquez sur la propriété Image du contrôle PictureBox. Une nouvelle fenêtre apparaîtra.
2. Dans cette fenêtre, cliquez sur le bouton Importer. Cela sera utilisé pour attacher une image au contrôle picturebox.
3. Une boîte de dialogue apparaîtra dans laquelle vous pourrez choisir l'image pour attacher la boîte à images
4. Cliquez sur le bouton OK

Une fois que vous apportez les modifications ci-dessus, vous verrez la sortie suivante

Sortie :-

À partir de la sortie, vous pouvez voir qu'une image est affichée sur le formulaire.

Résumé

• Un formulaire Windows dans une application C# est un formulaire qui s'exécute sur le bureau d'un ordinateur. Visual Studio Form avec C# peut être utilisé pour créer une application Windows Forms.
• Des contrôles peuvent être ajoutés aux formulaires Windows C# via la boîte à outils de Visual Studio. Des contrôles tels que des étiquettes, des cases à cocher, des boutons radio, etc. peuvent être ajoutés au formulaire via la boîte à outils.
• On peut également utiliser des contrôles avancés comme le contrôle de l'arborescence et le contrôle PictureBox.
• Les gestionnaires d'événements sont utilisés pour répondre aux événements générés à partir des contrôles. Le plus courant est celui ajouté pour l'événement de clic sur le bouton.