Étape 1 : créer un projet et ajouter des étiquettes à votre formulaireStep 1: Create a project and add labels to your form

Les premières étapes du développement de ce questionnaire consistent à créer le projet, puis à ajouter des étiquettes, un bouton et d'autres contrôles à un formulaire.As the first steps in developing this quiz, you create the project, and you add labels, a button, and other controls to a form. Vous devez également définir des propriétés pour chaque contrôle que vous ajoutez.You also set properties for each control that you add. Le projet contiendra le formulaire, les contrôles et, ultérieurement dans le didacticiel, du code.The project will contain the form, the controls, and (later in the tutorial) code. Le bouton démarre le questionnaire, les étiquettes affichent les problèmes à résoudre et les autres contrôles montrent les réponses aux problèmes et le temps restant pour terminer le questionnaire.The button starts the quiz, the labels show the quiz problems, and the other controls show the quiz answers and the time that remains to finish the quiz.

Note

Cette rubrique fait partie d'une série de didacticiels sur les concepts de codage de base.This topic is part of a tutorial series about basic coding concepts. Pour obtenir une vue d’ensemble du tutoriel, consultez Tutoriel 2 : créer un questionnaire mathématique chronométré.For an overview of the tutorial, see Tutorial 2: Create a timed math quiz.

Pour créer un projet et définir des propriétés pour un formulaireTo create a project and set properties for a form

  1. Dans la barre de menus, choisissez Fichier > Nouveau > Projet.On the menu bar, choose File > New > Project.

  2. Dans la liste Modèles installés, choisissez C# ou Visual Basic.In the Installed Templates list, choose either C# or Visual Basic.

  3. Dans la liste des modèles, choisissez le modèle Application Windows Forms, nommez-le Questionnaire de mathématiques, puis choisissez le bouton OK.In the list of templates, choose the Windows Forms Application template, name it Math Quiz, and then choose the OK button.

    Un formulaire nommé Form1.cs ou Form1.vb apparaît, selon le langage de programmation que vous avez choisi.A form that's named Form1.cs or Form1.vb appears, depending on the programming language that you chose.

  4. Sélectionnez le formulaire, puis modifiez sa propriété Text en spécifiant Questionnaire de mathématiques.Choose the form, and then change its Text property to Math Quiz.

    La fenêtre Propriétés contient les propriétés du formulaire.The Properties window contains properties for the form.

  5. Modifiez la taille du formulaire en spécifiant une largeur de 500 pixels et une hauteur de 400 pixels.Change the size of the form to 500 pixels wide by 400 pixels tall.

    Vous pouvez redimensionner le formulaire en faisant glisser ses bords jusqu'à ce que la taille correcte apparaisse dans l'angle inférieur gauche de l'environnement de développement intégré (IDE).You can resize the form by dragging its edges until the correct size appears in the lower-left corner of the integrated development environment (IDE). Vous pouvez également modifier les valeurs de la propriété Size.As an alternative, you can change the values of the Size property.

  6. Remplacez la valeur de la propriété FormBorderStyle par Fixed3D et affectez à la propriété MaximizeBox la valeur False.Change the value of the FormBorderStyle property to Fixed3D, and set the MaximizeBox property to False.

    Ces valeurs empêchent les personnes interrogées de redimensionner le formulaire.These values prevent quiz takers from resizing the form.

Pour créer la zone de temps restantTo create the time remaining box

  1. Ajoutez un contrôle Label à partir de la boîte à outils, puis attribuez à sa propriété (Name) la valeur timeLabel.Add a Label control from the Toolbox, and then set the value of its (Name) property to timeLabel.

    Ce contrôle Label deviendra une zone dans l'angle supérieur droit. Elle indiquera le nombre de secondes restantes dans le questionnaire.This label will become a box in the upper-right corner that shows the number of seconds that remain in the quiz.

  2. Remplacez la valeur de la propriété AutoSize par False pour pouvoir redimensionner la zone.Change the AutoSize property to False so that you can resize the box.

  3. Remplacez la valeur de la propriété BorderStyle par FixedSingle pour dessiner une ligne autour de la zone.Change the BorderStyle property to FixedSingle to draw a line around the box.

  4. Affectez à la propriété Size la valeur 200, 30.Set the Size property to 200, 30.

  5. Déplacez le contrôle Label vers l'angle supérieur droit du formulaire. Des lignes d'espacement bleues y apparaîtront.Move the label to the upper-right corner of the form, where blue spacer lines will appear.

    Ces lignes vous aideront à aligner des contrôles dans le formulaire.These lines help you align controls on the form.

  6. Dans la fenêtre Propriétés, choisissez la propriété Text, puis appuyez sur la touche Retour arrière pour effacer sa valeur.In the Properties window, choose the Text property, and then choose the Backspace key to clear its value.

  7. Choisissez le signe plus (+) en regard de la propriété Font, puis remplacez la valeur de la propriété Size par 15,75.Choose the plus sign (+) next to the Font property, and then change the value of the Size property to 15.75.

    Vous pouvez modifier plusieurs propriétés de police, comme l'illustre l'image suivante.You can change several font properties, as the following picture shows.

    Fenêtre Propriétés affichant la taille de policeProperties window showing font size Properties window showing font size

  8. Ajoutez un autre contrôle d’étiquette à partir de la boîte à outils et affectez-lui une taille de police de 15,75.Add another Label control from the Toolbox, and then set its font size to 15.75.

  9. Affectez la valeur Temps restant à la propriété Text.Set the Text property to Time Left.

  10. Placez le contrôle Label de façon à l’aligner juste à gauche du contrôle Label timeLabel.Move the label so that it lines up just to the left of the timeLabel label.

Pour ajouter des contrôles pour les problèmes d'additionTo add controls for the addition problems

  1. Ajoutez un contrôle d’étiquette à partir de la boîte à outils, puis attribuez à sa propriété Text la valeur ?Add a Label control from the Toolbox, and then set its Text property to ? (point d’interrogation).(question mark).

  2. Affectez à la propriété AutoSize la valeur False.Set the AutoSize property to False.

  3. Affectez à la propriété Size la valeur 60, 50.Set the Size property to 60, 50.

  4. Affectez la valeur 18 à la taille de police.Set the font size to 18.

  5. Affectez à la propriété TextAlign la valeur MiddleCenter.Set the TextAlign property to MiddleCenter.

  6. Affectez à la propriété Location la valeur 50, 75 pour positionner le contrôle dans le formulaire.Set the Location property to 50, 75 to position the control on the form.

  7. Affectez à la propriété (Name) la valeur plusLeftLabel.Set the (Name) property to plusLeftLabel.

  8. Sélectionnez l’étiquette plusLeftLabel, puis appuyez sur Ctrl+C ou choisissez Copier dans le menu Edition.Choose the plusLeftLabel label, and then choose either the Ctrl+C keys or Copy on the Edit menu.

  9. Collez l’étiquette trois fois en appuyant sur les touches Ctrl+V, ou en choisissant Coller dans le menu Edition.Paste the label three times by choosing either the Ctrl+V keys or Paste on the Edit menu.

  10. Disposez les trois nouveaux contrôles Label en ligne à droite du contrôle Label plusLeftLabel.Arrange the three new labels so that they are in a row to the right of the plusLeftLabel label.

    Vous pouvez utiliser les lignes d'espacement pour définir l'écartement et les aligner.You can use the spacer lines to space them out and line them up.

  11. Affectez à la propriété Text du deuxième contrôle Label la valeur + (signe plus).Set the value of the second label's Text property to + (plus sign).

  12. Affectez à la propriété (Name) du troisième contrôle Label la valeur plusRightLabel.Set the value of the third label's (Name) property to plusRightLabel.

  13. Affectez à la propriété Text du quatrième contrôle Label la valeur = (signe égal).Set the value of the fourth label's Text property to = (equal sign).

  14. Ajoutez un contrôle NumericUpDown à partir de la boîte à outils, puis affectez-lui une taille de police de 18 et une largeur de 100.Add a NumericUpDown control from the Toolbox, set its font size to 18, and set its width to 100.

    Vous en apprendrez davantage sur ce type de contrôle ultérieurement.You'll learn more about this kind of control later.

  15. Alignez le contrôle NumericUpDown sur les contrôles d’étiquettes du problème d’addition.Line up the NumericUpDown control with the Label controls for the addition problem.

  16. Modifiez la propriété (Name) du contrôle NumericUpDown en lui affectant la valeur sum (somme).Change the value of the (Name) property for the NumericUpDown control to sum.

    Vous avez créé la première ligne, comme l'illustre l'image suivante.You've created the first row, as the following picture shows.

    Première ligne du questionnaire mathématique Première ligne du questionnaire mathématiqueFirst row of math quiz First row of math quiz

Pour ajouter des contrôles pour les problèmes de soustraction, multiplication et divisionTo add controls for the subtraction, multiplication, and division problems

  1. Copiez les cinq contrôles du problème d'addition (autrement dit, les quatre contrôles Label et le contrôle NumericUpDown), puis collez-les.Copy all five controls for the addition problem (the four Label controls and the NumericUpDown control), and then paste them.

    Le formulaire contient cinq nouveaux contrôles, encore sélectionnés.The form contains five new controls, which are still selected.

  2. Positionnez tous les contrôles en les alignant sous les contrôles d'addition.Move all of the controls into place so that they line up below the addition controls.

    Vous pouvez utiliser les lignes d'espacement pour laisser suffisamment d'espace entre les deux lignes.You can use the spacer lines to give enough distance between the two rows.

  3. Modifiez la propriété Text du deuxième contrôle Label en lui affectant la valeur - (signe moins).Change the value of the Text property for the second label to - (minus sign).

  4. Nommez le premier contrôle Label point d’interrogation minusLeftLabel.Name the first question-mark label minusLeftLabel.

  5. Nommez le second contrôle Label point d’interrogation minusRightLabel.Name the second question-mark label minusRightLabel.

  6. Nommez le contrôle NumericUpDown différence.Name the NumericUpDown control difference.

  7. Collez les cinq contrôles deux fois de plus.Paste the five controls two more times.

  8. Pour la troisième ligne, nommez le premier contrôle Label timesLeftLabel, remplacez la valeur de la propriété Text du deuxième contrôle Label par × (signe de multiplication), nommez le troisième contrôle Label timesRightLabel et nommez le contrôle NumericUpDown product (produit).For the third row, name the first label timesLeftLabel, change the second label's Text property to × (multiplication sign), name the third label timesRightLabel, and name the NumericUpDown control product.

  9. Pour la quatrième ligne, nommez le premier contrôle Label dividedLeftLabel, remplacez la valeur de la propriété Text du deuxième contrôle Label par ÷ (symbole de division), nommez le troisième contrôle Label dividedRightLabel et nommez le contrôle NumericUpDown quotient.For the fourth row, name the first label dividedLeftLabel, change the second label's Text property to ÷ (division sign), name the third label dividedRightLabel, and name the NumericUpDown control quotient.

    Note

    Vous pouvez copier les signes de multiplication (×) et de division (÷) indiqués dans ce didacticiel pour les coller dans le formulaire.You can copy the multiplication sign × and the division sign ÷ from this tutorial and paste them onto the form.

Pour ajouter un bouton de démarrage et définir l'ordre des index de tabulationTo add a start button and set the tab-index order

  1. Ajoutez un contrôle Button à partir de la boîte à outils, puis affectez à sa propriété (Name) la valeur startButton.Add a Button control from the Toolbox, and then set its (Name) property to startButton.

  2. Affectez la valeur Démarrer le questionnaire à la propriété Text.Set the Text property to Start the quiz.

  3. Affectez la valeur 14 à la taille de police.Set the font size to 14.

  4. Affectez la valeur True à la propriété AutoSize, ce qui permet de redimensionner automatiquement le bouton à une taille adaptée au texte.Set the AutoSize property to True, which causes the button to automatically resize to fit the text.

  5. Centrez le bouton vers le bas du formulaire.Center the button near the bottom of the form.

  6. Affectez à la propriété TabIndex du contrôle startButton la valeur 1.Set the value of the TabIndex property for the startButton control to 1.

    Note

    La propriété TabIndex définit l’ordre des contrôles lorsque la personne répondant au questionnaire appuie sur la touche Tab.The TabIndex property sets the order of the controls when the quiz taker chooses the Tab key. Pour voir son fonctionnement, ouvrez une boîte de dialogue quelconque (par exemple, dans la barre de menus, choisissez Fichier > Ouvrir), puis appuyez plusieurs fois sur la touche Tab.To see how it works, open any dialog box (for example, on the menu bar, choose File > Open), and then choose the Tab key a few times. Notez que le curseur passe d'un contrôle à l'autre chaque fois que vous appuyez sur la touche Tab.Watch how your cursor moves from control to control each time that you choose the Tab key. Un programmeur a choisi l'ordre en créant le formulaire.A programmer decided the order when creating that form.

  7. Affectez à la propriété TabIndex du contrôle NumericUpDown de somme la valeur 2, à celle du contrôle de différence la valeur 3, à celle du contrôle de produit la valeur 4 et à celle du contrôle quotient la valeur 5.Set the value of the TabIndex property for the NumericUpDown sum control to 2, for the difference control to 3, for the product control to 4, and for the quotient control to 5.

    Le formulaire doit ressembler à l'illustration ci-dessous.The form should look like the following illustration.

    Formulaire de questionnaire mathématique initial Formulaire de questionnaire mathématique initialInitial math quiz form Initial math quiz form

  8. Pour vérifier si la propriété TabIndex fonctionne comme prévu, enregistrez et exécutez le programme en appuyant sur la touche F5 ou en choisissant Déboguer > Démarrer le débogage dans la barre de menus, puis appuyez plusieurs fois sur la touche Tab.To verify whether the TabIndex property works as you expect, save and run your program by choosing the F5 key, or by choosing Debug > Start Debugging on the menu bar, and then choose the Tab key a few times.

Pour continuer ou examinerTo continue or review