Didacticiel : Créer une application WinForms de questionnaire mathématique

Dans cette série de quatre tutoriels, vous générez un questionnaire mathématique. Le questionnaire contient quatre problèmes mathématiques aléatoires auxquels le participant doit répondre dans un temps donné.

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 sur cet IDE, consultez Bienvenue dans l’IDE de Visual Studio.

Dans ce premier tutoriel, vous apprendrez à :

• Créez un projet Visual Studio qui utilise Windows Forms.
• Ajoutez des étiquettes, un bouton et d’autres contrôles à un formulaire.
• Définissez les propriétés des contrôles.
• Enregistrez et exécutez votre projet.

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 un questionnaire mathématique, 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. 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.

   

   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 Installer plus d’outils et de fonctionnalités.

   

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

   

   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 MathQuiz, 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 requis par votre application.

Définir les propriétés du formulaire

Quand vous avez sélectionné votre modèle et nommé votre fichier, Visual Studio ouvre un formulaire pour vous. Cette section vous montre comment modifier certaines propriétés de formulaire.

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

2. Sélectionnez le formulaire, Form1.

3. La fenêtre Propriétés affiche maintenant les propriétés du formulaire. Cette fenêtre Propriétés se trouve généralement dans le coin inférieur droit de Visual Studio. 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 Questionnaire mathématique pour la valeur de Texte, puis sélectionnez Entrée.

   Votre formulaire contient désormais le texte « Questionnaire mathématique » 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. Modifiez la taille du formulaire en spécifiant une largeur de 500 pixels et une hauteur de 400 pixels.

   Vous pouvez redimensionner le formulaire en faisant glisser ses bords ou en faisant glisser la poignée jusqu’à ce que la taille correcte apparaisse comme valeur Taille dans la fenêtre Propriétés. La poignée de glissement est un petit carré blanc situé dans le coin inférieur droit du formulaire. Vous pouvez également redimensionner la taille du formulaire en modifiant les valeurs de la propriété Taille.

6. Remplacez la valeur de la propriété FormBorderStyle par Fixed3D et affectez à la propriété MaximizeBox la valeur False.

   Ces valeurs empêchent les personnes interrogées de redimensionner le formulaire.

Créer la zone de temps restant

Le questionnaire mathématique contient une zone dans le coin supérieur droit. Cette zone affiche le nombre de secondes qui restent dans le questionnaire. Cette section vous montre comment utiliser une étiquette pour cette zone. Vous ajouterez du code pour le minuteur de compte à rebours dans un didacticiel ultérieur de cette série.

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

2. Sélectionnez le contrôle Label dans la Boîte à outils, puis faites-le glisser sur le formulaire.

3. Dans la zone Propriétés, définissez les propriétés suivantes pour l’étiquette :

   • Définissez le (Nom) sur timeLabel.
   • Remplacez AutoSize par False pour pouvoir redimensionner la zone.
   • Remplacez BorderStyle par FixedSingle pour dessiner une ligne autour de la zone.
   • Définissez le taille sur 200, 30.
   • Sélectionnez la propriété Texte, puis sélectionnez la touche Retour arrière pour effacer la valeur Texte.
   • Sélectionnez le signe plus (+) en regard de la propriété Police, puis définissez la taille sur 15,75.

4. Déplacez l’étiquette dans le coin supérieur droit du formulaire. Lorsque des lignes d’espacement bleues apparaissent, utilisez-les pour positionner le contrôle sur le formulaire.

5. Ajoutez un autre contrôle d’étiquette à partir de la boîte à outils et affectez-lui une taille de police de 15,75.

6. Affectez la propriété de Texte de cette étiquette sur Temps restant.

7. Placez l’étiquette de façon à l’aligner juste à gauche de l’étiquette timeLabel.

   

Ajouter des contrôles pour les problèmes d'addition

La première partie du questionnaire est un problème d’addition. Cette section vous montre comment utiliser des étiquettes pour afficher ce problème.

1. Ajoutez un contrôle d’étiquette de la boîte à outils vers le formulaire.

2. Dans la zone Propriétés, définissez les propriétés suivantes pour l’étiquette :

   • Définissez Texte sur ? (point d’interrogation).
   • Définissez AutoSize sur False.
   • Définissez la taille sur 60, 50.
   • Affectez la valeur 18 à la taille de police.
   • Définissez TextAlign sur MiddleCenter.
   • Définissez Location sur 50, 75 pour positionner le contrôle dans le formulaire.
   • Définissez (Name) sur plusLeftLabel.

3. Dans le formulaire, sélectionnez l’étiquette plusLeftLabel que vous avez créée. Copiez l’étiquette en sélectionnant Modifier>Copier ou Ctrl+C.

4. Collez l’étiquette dans le formulaire trois fois en sélectionnant Modifier>Coller ou Ctrl+V trois fois.

5. Disposez les trois nouveaux contrôles Label en ligne à droite du contrôle Label plusLeftLabel.

6. Définissez la propriété Texte de la seconde étiquette sur + (signe plus).

7. Définissez la propriété (Name) de l’étiquette sur plusRightLabel.

8. Définissez la propriété Texte sur = (signe égal).

9. Ajoutez un contrôle NumericUpDown de la Boîte à outils dans le formulaire. Vous en apprendrez davantage sur ce type de contrôle ultérieurement.

10. Dans la zone Propriétés, définissez les propriétés suivantes pour le contrôle NumericUpDown :

    • Affectez la valeur 18 à la taille de police.
    • Définissez la largeur sur 100.
    • Définissez le (Name) sur somme.

11. Alignez le contrôle NumericUpDown sur les contrôles d’étiquettes du problème d’addition.

    

Ajouter des contrôles pour les problèmes de soustraction, multiplication et division

Ensuite, ajoutez des étiquettes au formulaire pour les problèmes mathématiques restants.

1. Copiez les quatre contrôles Étiquette et le contrôle NumericUpDown que vous avez créé pour le problème d’ajout. Collez-les dans le formulaire.

2. Déplacez les nouveaux contrôles pour les aligner sous les contrôles d’ajout.

3. Dans la zone Propriétés, définissez les propriétés suivantes pour les nouveaux contrôles :

   • Définissez le (Nom) de la première étiquette de point d’interrogation sur minusLeftLabel.
   • Définissez le texte de la deuxième étiquette sur - (signe moins).
   • Définissez le (Nom) de la deuxième étiquette de point d’interrogation sur minusRightLabel.
   • Définissez (Nom) du contrôle NumericUpDown sur différence.

4. Copiez les contrôles d’addition et collez-les deux fois de plus dans le formulaire.

5. Pour la troisième ligne :

   • Définissez le (Nom) de la première étiquette de point d’interrogation sur timesLeftLabel.
   • Définissez le Texte de la deuxième étiquette sur × (signe de multiplication). Vous pouvez copier le signe de multiplication indiqué dans ce didacticiel pour le coller dans le formulaire.
   • Définissez le (Nom) de la deuxième étiquette de point d’interrogation sur timesRightLabel.
   • Définissez (Nom) du contrôle NumericUpDown sur produit.

6. Pour la quatrième ligne :

   • Définissez le (Nom) de la première étiquette de point d’interrogation sur dividedLeftLabel.
   • Définissez le texte de la deuxième étiquette sur ÷ (signe de division). Vous pouvez copier le signe de division indiqué dans ce didacticiel pour le coller dans le formulaire.
   • Définissez le (Nom) de la deuxième étiquette de point d’interrogation sur dividedRightLabel.
   • Définissez le (Nom) du contrôle NumericUpDown sur quotient.

Ajouter un bouton Démarrer et définir l'ordre des index de tabulation

Cette section vous montre comment ajouter un bouton Démarrer. Vous allez également spécifier l’ordre de tabulation des contrôles. Cet ordre détermine la façon dont le participant au questionnaire se déplace d’un contrôle à l’autre à l’aide de la touche Onglet.

1. Ajoutez un contrôle Button de la Boîte à outils dans le formulaire.

2. Dans la fenêtre Propriétés, définissez les propriétés suivantes du bouton :

   • Définissez le (Nom) sur startButton.
   • Définissez le Texte sur Démarrer le questionnaire.
   • Affectez la valeur 14 à la taille de police.
   • Définissez AutoSize sur True, ce qui permet de redimensionner automatiquement le bouton à une taille adaptée au texte.
   • Définissez TabIndex sur 0. Cette valeur fait du bouton Démarrer le premier contrôle recevant le focus.

3. Centrez le bouton vers le bas du formulaire.

   

4. Dans la zone Propriétés, définissez la propriété TabIndex de chaque contrôle NumericUpDown :

   • Définissez TabIndex du contrôle NumericUpDown somme sur 1.
   • Définissez TabIndex du contrôle NumericUpDown différence sur 2.
   • Définissez TabIndex du contrôle NumericUpDown produit sur 3.
   • Définissez TabIndex du contrôle NumericUpDown quotient sur 4.

Exécuter l’application

Les problèmes mathématiques ne fonctionnent pas encore sur votre questionnaire. Toutefois, vous pouvez toujours exécuter votre application pour vérifier si les valeurs TabIndex fonctionnent comme prévu.

1. Utilisez l'une des méthodes suivantes pour enregistrer votre application :

   • Sélectionnez Ctrl+Maj+S.
   • Dans la barre de menus, sélectionnez Fichier>Enregistrer tout.
   • Dans la barre d’outils, sélectionnez le bouton Enregistrer tout.

2. Utilisez l'une des méthodes suivantes pour exécuter votre application :

   • Sélectionnez 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.

3. Sélectionnez la touche Onglet plusieurs fois pour voir comment le focus se déplace d’un contrôle à l’autre.

Étapes suivantes

Passez au didacticiel suivant pour ajouter des problèmes mathématiques aléatoires et un gestionnaire d’événements à votre questionnaire mathématique.

Didacticiel partie 2 : Ajouter des problèmes mathématiques à une application WinForms de questionnaire mathématique