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

The first step in creating a maze game is to create the project and add a Panel container to the form.

For a video version of this topic, see Tutorial 2: Create a Maze in Visual Basic - Video 1 or Tutorial 2: Create a Maze in C# - Video 1.

To create a project and add a Panel container

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 Maze as the name.

4. Set the form properties:

   1. Resize your form by using your pointer to drag the lower-right corner. Watch the lower-right corner of the integrated development environment (IDE). The size of the form appears in the status bar. Keep dragging until your form is 650 pixels wide and tall. You can build a smaller or bigger maze, so make the form any size you want.

      Size in status bar

      

   2. After your form is the right size, set the Text property to Maze.

   3. So that the user cannot resize the form, set the FormBorderStyle property to Fixed3D.

   4. Disable the Maximize button in the form's title bar by setting the MaximizeBox property to False.

   Now you have a form that's a fixed size, which the user can't maximize.

   Note

   When you create a new form, it's set up by default to let the user resize it in two ways: The user can either drag the sides or corners of the form or click the Maximize button to maximize the form. If you want to be sure a user can't resize your form, disable both of these options. Setting the FormBorderStyle property to any of the fixed styles prevents the user from resizing it, but the user can still click the Maximize button. That's why you also need to disable the MaximizeBox property.

   Next, you want to create a playing field, where you build the maze. You use a Panel control for that. A panel is a type of container control that lets you lay out a group of controls. Unlike some of the other containers (like the TableLayoutPanel container and the FlowLayoutPanel container), a panel doesn't rearrange the controls that it contains. That gives you the freedom to position the controls wherever you want, but unlike the TableLayoutPanel or FlowLayoutPanel, a panel isn't helpful when the user resizes the window.

5. Go to the Containers group in the Toolbox and double-click Panel to add a panel to your form. When your panel is selected, you should see a move handle icon in its upper-left corner, which appears as follows.

   Move handle

   

6. Drag the panel until it's a small distance away from the upper-left corner of the form. As you drag it, you should notice a useful feature of the IDE: As soon as the panel is a certain distance from the top or the left edge of the form, it snaps into place, and a blue spacer line appears between the edge of the panel and the edge of the form. You can use this to easily align your panel so that its edges are all exactly the same distance from the edge of the form. As soon as you see the top and left blue spacer lines, release the mouse button to drop the panel in place. The blue spacer lines appear as follows.

   Blue spacer lines

   

   Drag the lower-right drag handle until the panel snaps into place on the right and bottom.

7. Because you want the user to see the edge of the maze, you need to give it a visible border. Select the panel and set its BorderStyle property to Fixed3D.

8. Save the project by clicking the Save All toolbar button, which appears as follows.

   Save All button

   

9. To run your program, press F5 or click the Start Debugging toolbar button, which appears as follows.

   Start Debugging toolbar button

   

   When running, your form should look like the following picture.

   Initial maze form

   

10. Before going to the next tutorial step, stop your program by either closing the form or clicking the Stop Debugging toolbar button on the Debug toolbar. (The IDE stays in read-only mode while your program runs.)

To continue or review

• To go to the next tutorial step, see Step 2: Build Your Maze Using Labels.

• To return to the overview topic, see Tutorial 2: Create a Maze.