Step 1: Create a Project and Add a Table to Your Form

The first step in creating a matching game is to create the project and add a table to your form.

To create a project and add a table to your form

1. On the File menu, click New Project.

2. If you’re not using Visual Studio Express, you need to select a language first. From the Installed Templates list, select either C# or Visual Basic.

3. Click the Windows Forms Application icon, and then type MatchingGame as the name.

4. Set the form properties:

   1. Change the form's Text property to Matching Game.

   2. Change the size to 550 pixels wide by 550 tall by using the Size property or dragging until you see the correct size in the lower-left corner of the integrated development environment (IDE).

5. Drag a TableLayoutPanel control from the Toolbox, and then set its properties:

   1. Set the BackColor property to CornflowerBlue. (Select the Web tab in the color picker to see the color names.)

   2. Set the Dock property to Fill by clicking the drop-down button next to the property and clicking the large middle button.

   3. Click the triangle button in the upper-right corner of the TableLayoutPanel to display the task menu.

   4. Click Add Row twice to add two more rows, and then click Add Column twice to add two more columns.

   5. Click Edit Rows and Columns to open the Column and Row Styles window. Select each of the columns, click the Percent button and set each column's width to 25 percent of the total width. Then select Rows from the drop-down box at the top of the window, and set each row's height to 25 percent. Click the OK button.

   Your TableLayoutPanel should now have sixteen equal-size square cells.

6. Be certain that the TableLayoutPanel is selected in the form editor. While it's selected, open the Toolbox and double-click Label to add a Label control to the upper-left square. The Label control should now be selected in the IDE. Set its properties:

   1. Set the BackColor property to CornflowerBlue.

   2. Set the AutoSize property to False.

   3. Set the Dock property to Fill.

   4. Set the TextAlign property to MiddleCenter by clicking the drop-down button next to the property, and then clicking the middle button.

   5. Click the Font property. An ellipsis button should appear.

   6. Click the ellipsis button, and set the font to Webdings 72 point Bold.

   7. Set the Text property to the letter c.

      The upper-left cell in the TableLayoutPanel should now contain a big black box centered on a blue background.

      Note

      The Webdings font is a font of icons that ships with the Microsoft Windows operating system. In your matching game, the player needs to match pairs of icons, so you use this font to display the icons to match. Instead of putting c in the Text property, try entering different letters to see what icons are displayed. An exclamation point is a spider, an uppercase N is an eyeball, and a comma is a chili pepper.

7. Select your Label control and copy it. (Press Ctrl+C or from the Edit menu, click Copy.) Then paste it. (Press Ctrl+V or from the Edit menu, click Paste.) Another label appears in the second cell in the TableLayoutPanel. Paste it again, and another label appears in the third cell. Keep pasting Label controls until all of the cells are filled.

   Note

   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. You can undo it. To remove the new cell, press Ctrl+Z or on the Edit menu, click Undo.

   Now your form is laid out. It should look the following picture.

   Initial matching game form

   

To continue or review

• To go to the next tutorial step, see Step 2: Add a Random Object and a List of Icons.

• To return to the overview topic, see Tutorial 4: Create a Matching Game.