Tutoriel : Créer un questionnaire mathématique WinForms

Dans cette série de quatre tutoriels, vous créez un questionnaire mathématique. Le questionnaire contient quatre problèmes mathématiques aléatoires auxquels un participant tente de répondre dans un délai spécifié.

L’environnement de développement intégré (IDE) visual Studio fournit les outils dont vous avez besoin pour créer l’application. Pour en savoir plus sur cet IDE, consultez Bienvenue dans l’IDE Visual Studio.

Dans ce premier tutoriel, vous allez apprendre à :

• 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.

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.

Remarque

Ce tutoriel nécessite le modèle de projet application Windows Forms (.NET Framework). Lors de l'installation, sélectionnez la charge de travail de développement de bureau .NET :

Si Visual Studio est déjà installé et que vous devez l’ajouter, dans le menu, sélectionnez Outils>Obtenir des outils et des fonctionnalités, ou dans la fenêtre Créer un projet, sélectionnez l'Installer d’autres outils et fonctionnalités lien.

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

   

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 dont votre application a besoin.

Définir les propriétés du formulaire

Une fois que vous avez sélectionné votre modèle et nommez 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 Windows Forms Designer. L’onglet Concepteur est étiqueté Form1.cs [Création] pour C# ou Form1.vb [Création] pour Visual Basic.

2. Sélectionnez le formulaire, Form1.

3. La fenêtre Propriétés affiche désormais les propriétés du formulaire. Cette fenêtre 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é 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 Questionnaire mathématique pour la valeur de Texte, puis sélectionnez Entrée.

   Votre formulaire comporte désormais le texte « Questionnaire mathématique » dans sa barre de titre.

   Remarque

   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. Remplacez la taille du formulaire par 500 pixels de large par 400 pixels de hauteur.

   Vous pouvez redimensionner le formulaire en faisant glisser ses bords ou en faisant glisser la poignée jusqu’à ce que la taille correcte apparaisse en tant que 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 le formulaire en modifiant les valeurs de la propriété Size.

6. Modifiez la valeur de la propriété FormBorderStyle en Fixed3D et définissez la propriété MaximizeBox sur False.

   Ces valeurs empêchent les participants au quiz 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 ajoutez 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 Afficher>Boîte à outils dans la barre de menus ou 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.
   • Modifiez AutoSize dans False afin de pouvoir redimensionner la boîte.
   • 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’espaceur bleues apparaissent, utilisez-les pour positionner le contrôle sur le formulaire.

5. Ajoutez un autre contrôle Label à partir de la boîte à outils , puis définissez sa taille de police sur 15,75.

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

7. Déplacez l’étiquette de sorte qu’elle s’aligne vers la gauche de l’étiquette timeLabel .

   

Ajouter des contrôles pour l’exercice d’addition

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

1. Ajoutez un contrôle d’étiquette Label à partir 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.
   • Définissez la taille de police sur 18.
   • 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. Organisez les trois nouvelles étiquettes afin qu’elles soient dans une ligne à droite de l’étiquette 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 à partir de la boîte à outils au formulaire. Vous en apprendrez plus 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 :

    • Définissez la taille de police sur 18.
    • Sous MaximumSize, 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, de multiplication et de division

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

1. Copiez les quatre contrôles Label 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 le (Nom) du contrôle NumericUpDown sur différence.

4. Copiez les contrôles d’ajout et collez-les deux fois 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 à partir de ce didacticiel et le coller dans le formulaire.
   • Définissez le (Nom) de la deuxième étiquette de point d’interrogation sur timesRightLabel.
   • Définissez le (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 à partir de ce didacticiel et 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 spécifiez également l’ordre de tabulation des contrôles. Cet ordre détermine la façon dont l'utilisateur du quiz passe d’un contrôle à l’autre à l’aide de la touche Tabulation.

1. Ajoutez un contrôle Button à partir de la boîte à outils au formulaire.

2. Dans la zone 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.
   • Définissez la taille de police sur 14.
   • Définissez AutoSize sur True, ce qui entraîne le redimensionnement automatique du bouton pour qu’il s’adapte 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 près du bas du formulaire.

   

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

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

Exécuter votre 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 de TabIndex fonctionnent comme vous vous y attendez.

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.

Étape suivante

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

Tutoriel 2 : Ajouter des problèmes mathématiques à une application WinForms de quiz mathématique