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

La première étape pour créer un jeu de combinaisons consiste à créer le projet et à ajouter une table à votre formulaire.The first step in creating a matching game is to create the project and add a table to your form. La table permet d'aligner les icônes dans une grille 4x4, de façon ordonnée.The table helps align the icons into an orderly 4x4 grid. Vous définissez également plusieurs propriétés pour améliorer l'apparence de la grille de jeu.You also set several properties to enhance the appearance of the game board.

Pour créer un projet et ajouter une table à votre formulaireTo create a project and add a table to your form

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

  2. Si vous n’utilisez pas Visual Studio Express, vous devez d’abord sélectionner un langage de programmation.If you're not using Visual Studio Express, you need to select a programming language first. Dans la liste Modèles installés, choisissez Visual C# ou Visual Basic.From the Installed Templates list, choose either Visual C# or Visual Basic.

  3. Dans la liste des modèles de projet, choisissez Application Windows Forms, nommez le projet JeuCombinaisons, puis choisissez le bouton OK.In the list of project templates, choose Windows Forms Application, name the project MatchingGame, and then choose the OK button.

  4. Dans la fenêtre Propriétés, définissez les propriétés de formulaire ci-dessous.In the Properties window, set the following form properties.

    1. Modifiez la propriété Text du formulaire en remplaçant Form1 par Matching Game (Jeu de combinaisons).Change the form's Text property from Form1 to Matching Game. Ce texte s'affiche en haut de la fenêtre du jeu.This text appears at the top of the game window.

    2. Définissez la taille du formulaire en spécifiant une largeur de 550 pixels et une hauteur de 550 pixels.Set the size of the form to 550 pixels wide by 550 tall. Pour cela, vous pouvez définir la propriété Size sur 550, 550 ou faire glisser l’angle du formulaire jusqu’à ce que vous voyiez la taille appropriée dans le coin inférieur droit de l’environnement de développement intégré (IDE).You can do this either by setting the Size property to 550, 550, or by dragging the corner of the form until you see the correct size in the lower-right corner of the integrated development environment (IDE).

  5. Affichez la boîte à outils en choisissant l’onglet Boîte à outils à gauche de l’environnement IDE.Display the toolbox by choosing the Toolbox tab on the left side of the IDE.

  6. Faites glisser un contrôle TableLayoutPanel de la catégorie Conteneurs dans la boîte à outils, puis définissez les propriétés suivantes pour celle-ci.Drag a TableLayoutPanel control from the Containers category in the toolbox, and then set the following properties for it.

    1. Affectez la valeur CornflowerBlue à la propriété BackColor.Set the BackColor property to CornflowerBlue. Pour ce faire, ouvrez la boîte de dialogue BackColor en choisissant la flèche déroulante en regard de la propriété BackColor dans la fenêtre Propriétés.To do this, open the BackColor dialog box by choosing the drop-down arrow next to the BackColor property in the Properties window. Ensuite, choisissez l’onglet Web dans la boîte de dialogue BackColor pour afficher la liste des couleurs disponibles.Then, choose the Web tab in the BackColor dialog box to view a list of available color names.

      Note

      Les couleurs ne sont pas dans l'ordre alphabétique et CornflowerBlue se trouve en bas de la liste.The colors are not in alphabetical order, and CornflowerBlue is near the bottom of the list.

    2. Affectez la valeur Fill à la propriété Dock en choisissant le bouton de liste déroulante en regard de la propriété, puis le grand bouton central.Set the Dock property to Fill by choosing the drop-down button next to the property and choosing the large middle button. Ceci permet d'étendre la table afin qu'elle couvre le formulaire entier.This spreads the table out so that it covers the entire form.

    3. Affectez la valeur Inset à la propriété CellBorderStyle.Set the CellBorderStyle property to Inset. Cela place des bordures visuelles entre toutes les cellules de la grille de jeu.This provides visual borders between each cell on the board.

    4. Choisissez le bouton triangulaire dans le coin supérieur droit du TableLayoutPanel pour afficher son menu de tâches.Choose the triangle button in the upper-right corner of the TableLayoutPanel to display its task menu.

    5. Dans la barre des tâches, choisissez deux fois Ajouter une ligne pour ajouter deux lignes supplémentaires, puis choisissez deux fois Ajouter une colonne pour ajouter deux colonnes supplémentaires.On the task menu, choose Add Row twice to add two more rows, and then choose Add Column twice to add two more columns.

    6. Dans la barre des tâches, choisissez Modifier les lignes et les colonnes pour afficher la fenêtre Styles de ligne et de colonne.On the task menu, choose Edit Rows and Columns to open the Column and Row Styles window. Choisissez chacune des colonnes, choisissez la case d’option Pour cent, puis affectez à chaque colonne une largeur égale à 25 % de la largeur totale.Choose each of the columns, choose the Percent option button, and then set each column's width to 25 percent of the total width. Sélectionnez ensuite Lignes dans la zone de liste déroulante en haut de la fenêtre et affectez une hauteur de 25 pour cent à chaque ligne.Then select Rows from the drop-down box at the top of the window, and set each row's height to 25 percent. Une fois terminé, choisissez le bouton OK.When you're done, choose the OK button.

      Votre TableLayoutPanel doit désormais correspondre à une grille 4x4 de seize cellules carrées de même taille.Your TableLayoutPanel should now be a 4x4 grid, with sixteen equally sized square cells. Les images des icônes apparaîtront ultérieurement dans ces lignes et colonnes.These rows and columns are where the icon images will appear later.

  7. Vérifiez que le TableLayoutPanel est sélectionné dans l'éditeur de formulaires.Be certain that the TableLayoutPanel is selected in the form editor. Si c’est le cas, vous devez voir tableLayoutPanel1 en haut de la fenêtre Propriétés.To verify this, you should see tableLayoutPanel1 at the top of the Properties window. S’il n’est pas sélectionné, choisissez TableLayoutPanel sur le formulaire ou dans le contrôle de liste déroulante en haut de la fenêtre Propriétés.If it is not selected, choose the TableLayoutPanel on the form, or choose it in the dropdown control at the top of the Properties window.

    Lorsque le TableLayoutPanel est sélectionné, ouvrez la boîte à outils et ajoutez un contrôle Label (situé dans la catégorie Contrôles communs) dans la cellule supérieure gauche du TableLayoutPanel.While the TableLayoutPanel is selected, open the toolbox and add a Label control (located in the Common Controls category) to the upper-left cell of the TableLayoutPanel. Le contrôle d’étiquette doit maintenant être sélectionné dans l'IDE.The label control should now be selected in the IDE. Définissez les propriétés ci-dessous pour ce contrôle.Set the following properties for it.

    1. Veillez à ce que la propriété BackColor du contrôle Label ait la valeur CornflowerBlue.Be sure that the label's BackColor property is set to CornflowerBlue.

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

    3. Affectez la valeur Fill à la propriété Dock.Set the Dock property to Fill.

    4. Affectez la valeur MiddleCenter à la propriété TextAlign en choisissant le bouton de liste déroulante en regard de la propriété, puis le bouton central.Set the TextAlign property to MiddleCenter by choosing the drop-down button next to the property, and then choosing the middle button. Cela garantit l'affichage de l'icône au milieu de la cellule.This ensures the icon appears in the middle of the cell.

    5. Choisissez la propriété Font.Choose the Font property. Un bouton de sélection () doit s’afficher.An ellipsis (...) button should appear.

    6. Choisissez le bouton de sélection et affectez la valeur Webdings à la propriété Font, la valeur Bold à Font Style et la valeur 72 à Size.Choose the ellipsis button, and set the Font value to Webdings, the Font Style to Bold, and the Size to 72.

    7. Affectez la lettre c à la propriété Text du contrôle Label.Set the Text property of the label to the letter c.

      La cellule supérieure gauche dans le TableLayoutPanel doit désormais contenir un cadre noir centré sur un arrière-plan bleu.The upper-left cell in the TableLayoutPanel should now contain a black box centered on a blue background.

      Note

      La police Webdings est une police d'icônes fournie avec le système d'exploitation Windows.The Webdings font is a font of icons that ships with the Windows operating system. Dans votre jeu de combinaisons, cette police vous permet d'afficher les icônes que le joueur doit associer par paires.In your matching game, the player needs to match pairs of icons, so you use this font to display the icons to match. Au lieu de mettre c dans la propriété Text, essayez d’entrer des lettres différentes pour voir quelles icônes sont affichées.Instead of putting c in the Text property, try entering different letters to see what icons are displayed. Un point d'exclamation est une araignée, un N majuscule est un œil et une virgule un piment rouge.An exclamation point is a spider, an uppercase N is an eye, and a comma is a chili pepper.

  8. Choisissez le contrôle d’étiquette et copiez-le dans la cellule suivante du TableLayoutPanel.Choose your Label control and copy it to the next cell in the TableLayoutPanel. (Appuyez sur Ctrl+C ou, dans la barre de menus, choisissez Modification > Copier.) Ensuite, collez-le.(Choose the Ctrl+C keys, or on the menu bar, choose Edit > Copy.) Then paste it. (Appuyez sur Ctrl+V ou, dans la barre de menus, choisissez Modification > Coller.) Une copie de la première étiquette apparaît dans la deuxième cellule du TableLayoutPanel.(Choose the Ctrl+V keys, or on the menu bar, choose Edit > Paste.) A copy of the first Label appears in the second cell of the TableLayoutPanel. Collez-le à nouveau, et une autre étiquette s'affiche dans la troisième cellule.Paste it again, and another Label appears in the third cell. Continuez à coller des contrôles d’étiquette jusqu'à ce que toutes les cellules soient remplies.Keep pasting Label controls until all of the cells are filled.

    Note

    Si vous effectuez un trop grand nombre de collages, l'IDE ajoute une nouvelle ligne au TableLayoutPanel pour fournir la place nécessaire à l'ajout de votre nouveau contrôle d’étiquette.If you paste too many times, the IDE adds a new row to the TableLayoutPanel so that it has a place to add your new Label control. Vous pouvez l'annuler.You can undo it. Pour supprimer la nouvelle cellule, appuyez sur Ctrl+Z ou, dans la barre de menus, choisissez Modification > Annuler.To remove the new cell, choose the Ctrl+Z keys, or on the menu bar, choose Edit > Undo.

    Votre formulaire est maintenant mis en forme. Il doit ressembler à l'image ci-dessous.Now your form is laid out. It should look like the following picture.

    Formulaire de jeu de combinaisons initial Formulaire de jeu de combinaisons initialInitial matching game form Initial matching game form

Pour continuer ou examinerTo continue or review