You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Create a game where a player matches icons, and start by creating a project in Visual Studio by using C# or VB Windows Forms and add layout.
3
+
description: Complete the first steps to creating a game where a player matches icons. Create a project in Visual Studio by using C# or Visual Basic Windows Forms.
4
4
author: anandmeg
5
5
ms.author: meghaanand
6
6
manager: mijacobs
7
7
ms.subservice: general-ide
8
8
ms.topic: tutorial
9
-
ms.date: 02/28/2023
9
+
ms.date: 08/23/2024
10
+
11
+
#customer intent: As a developer, I want to learn about using the Visual Studio IDE to create a Windows Forms application.
10
12
---
11
-
# Tutorial: Create a matching game WinForms app
12
13
13
-
In this series of four tutorials, you build a matching game, where the player matches pairs of hidden icons.
14
+
# Tutorial: Create a Windows Forms matching game app
15
+
16
+
In this series of four tutorials, you create a matching game. The player matches pairs of hidden icons.
14
17
15
-
Use these tutorials to learn about the following tasks in the Visual Studio Integrated Design Environment (IDE).
18
+
Use these tutorials to learn about the following tasks in the Visual Studio integrated development environment (IDE):
16
19
17
20
- Store objects, such as icons, in a <xref:System.Collections.Generic.List%601> object.
18
21
- Use a `foreach` loop in C# or a `For Each` loop in Visual Basic to iterate through items in a list.
19
22
- Keep track of a form's state by using reference variables.
20
-
-Build an event handler to respond to events that you can use with multiple objects.
21
-
-Make a timer that counts down and then fires an event exactly once after being started.
23
+
-Create an event handler to respond to events that you can use with multiple objects.
24
+
-Create a timer that counts down and then fires an event exactly once after it's started.
22
25
23
26
When you finish, you'll have a complete game.
24
27
25
-
28
+
:::image type="content" source="../media/tutorial-windows-forms-create-match-game/match-game-final.png" alt-text="Screenshot of the game that you create. Several matching icons are displayed in a grid.":::
26
29
27
30
In this first tutorial, you learn how to:
28
31
29
32
> [!div class="checklist"]
30
33
> - Create a Visual Studio project that uses Windows Forms.
31
34
> - Add and format a layout element.
32
-
> - Add and format labels to display.
35
+
> - Add and format labels.
33
36
34
37
## Prerequisites
35
38
36
-
You need Visual Studio to complete this tutorial.
37
-
Visit the [Visual Studio downloads page](https://visualstudio.microsoft.com/vs/) for a free version.
39
+
You need Visual Studio to complete this tutorial. Visit the [Visual Studio downloads page](https://visualstudio.microsoft.com/vs/) for a free version.
40
+
41
+
> [!NOTE]
42
+
> This tutorial requires the **Windows Forms App (.NET Framework)** project template. During installation, select the **.NET desktop development** workload:
43
+
>
44
+
> :::image type="content" source="../media/tutorial-windows-forms-timed-math-quiz/install-dot-net-desktop-env.png" alt-text="Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.":::
45
+
>
46
+
> If you already have Visual Studio installed and need to add the template, from the menu, select **Tools** > **Get Tools and Features**, or in the **Create a new project** window, select **Install more tools and features**.
47
+
>
48
+
> :::image type="content" source="../media/tutorial-windows-forms-timed-math-quiz/install-more-tools.png" alt-text="Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.":::
38
49
39
-
## Create your Windows Forms match game project
50
+
## Create a Windows Forms match game project
40
51
41
-
When you create your matching game, the first step is to create a Windows Forms App project.
52
+
The first step of creating your game is to create a Windows Forms App project.
42
53
43
54
1. Open Visual Studio.
44
55
45
-
1.On the start window, select **Create a new project**.
56
+
1.In the start window, select **Create a new project**.
46
57
47
-
58
+
:::image type="content" source="../media/tutorial-windows-forms-create-match-game/create-new-project-dark-theme.png" alt-text="Screenshot of the Create a new project option in the Visual Studio start window.":::
48
59
49
-
1.On the **Create a new project** window, search for *Windows Forms*. Then select **Desktop** from the **All project types** list.
60
+
1.In the **Create a new project** window, search for *Windows Forms*. Then select **Desktop** from the **All project types** list.
50
61
51
62
1. Select the **Windows Forms App (.NET Framework)** template for either C# or Visual Basic, and then select **Next**.
52
63
53
-
54
-
55
-
> [!NOTE]
56
-
> If you don't see the **Windows Forms App (.NET Framework)** template, you can install it from the **Create a new project** window. In the **Not finding what you're looking for?** message, select the **Install more tools and features** link.
57
-
>
58
-
> 
59
-
>
60
-
> Next, in Visual Studio Installer, select **.NET desktop development**.
61
-
>
62
-
> 
63
-
>
64
-
> Select **Modify** in the Visual Studio Installer. You might be prompted to save your work. Next, select **Continue** to install the workload.
65
-
66
-
1. In the **Configure your new project** window, name your project *MatchingGame*, then select **Create**.
64
+
1. In the **Configure your new project** window, name your project **MatchingGame**, and then select **Create**.
67
65
68
-
66
+
:::image type="content" source="../media/tutorial-windows-forms-create-match-game/configure-new-project.png" alt-text="Screenshot of the Configure your new project window.":::
69
67
70
-
Visual Studio creates a solution for your app.
71
-
A solution is a container for all of the projects and files needed by your app.
68
+
Visual Studio creates a *solution* for your app.
69
+
A solution is a container for the projects and files that your app needs.
72
70
73
-
At this point, Visual Studio displays an empty form in the **Windows Form Designer**.
71
+
At this point, Visual Studio displays an empty form in the Windows Forms Designer.
74
72
75
73
## Create a layout for your game
76
74
77
-
In this section, you create the four-by-four grid of the game.
75
+
In this section, you create the four-by-four grid for the game.
78
76
79
-
1.Click on the form to select the Windows Forms Designer. The tab reads **Form1.cs [Design]** for C# or **Form1.vb [Design]** for Visual Basic. In the **Properties** window, set the following form properties.
77
+
1.Select the form to select the Windows Forms Designer. The tab reads **Form1.cs [Design]** for C# or **Form1.vb [Design]** for Visual Basic. In the **Properties** window, set the following form properties.
80
78
81
79
- Change the **Text** property from **Form1** to **Matching Game**. This text appears at the top of the game window.
82
-
- Set the size of the form. You can change it either by setting the **Size** property to **550, 550**, or by dragging the corner of the form until you see the correct size at the bottom of the Visual Studio IDE.
80
+
- Set the size of the form. You can change it either by setting the **Size** property to **550, 550** or by dragging the corner of the form until you see the correct size at the bottom of the Visual Studio IDE.
83
81
84
82
1. Select the **Toolbox** tab on the left side of the IDE.
85
-
If you don't see it, select **View** > **Toolbox** from the menu bar or **Ctrl**+**Alt**+**X**.
83
+
If you don't see it, select **View** > **Toolbox** from the menu bar or select **Ctrl**+**Alt**+**X**.
86
84
87
-
1. Drag a <xref:System.Windows.Forms.TableLayoutPanel> control from the **Containers** category in the toolbox or double-click it.
85
+
1. Drag a <xref:System.Windows.Forms.TableLayoutPanel> control from the **Containers** category in the toolbox, or double-click it.
88
86
Set the following properties for the panel in the **Properties** window.
89
87
90
88
- Set the **BackColor** property to **CornflowerBlue**.
91
-
To do set this property, select the arrow next to the **BackColor** property.
92
-
In the **BackColor** dialog box, select **Web**.
93
-
In the available color names, select **CornflowerBlue**.
89
+
To set this property, select the down arrow next to the **BackColor** property.
90
+
In the resulting dialog box, select **Web**.
91
+
In the list of names, select **CornflowerBlue**.
94
92
95
93
> [!NOTE]
96
-
> The colors are not in alphabetical order, and**CornflowerBlue** is near the bottom of the list.
94
+
> The colors aren't in alphabetical order.**CornflowerBlue** is near the bottom of the list.
97
95
98
-
- Set the **Dock** property to **Fill**from the dropdown list by selecting the large middle button.
96
+
- Set the **Dock** property to **Fill**by selecting the down arrow and then selecting the large middle button.
99
97
This option spreads the table out so that it covers the entire form.
100
98
- Set the **CellBorderStyle** property to **Inset**.
101
99
This value provides visual borders between each cell on the board.
102
100
- Select the triangle button in the upper-right corner of the TableLayoutPanel to display its task menu.
103
101
On the task menu, select **Add Row** twice to add two more rows.
104
102
Then select **Add Column** twice to add two more columns.
105
103
- On the task menu, select **Edit Rows and Columns** to open the **Column and Row Styles** window.
106
-
For each column, select the **Percent** option, and then set each column's width to *25* percent.
107
-
- Select **Rows** from the list at the top of the window, and then set each row's height to 25 percent.
104
+
For each column, select the **Percent** option, and then set each column's width to **25** percent.
105
+
- Select **Rows** from the list at the top of the window, and then set each row's height to **25** percent.
108
106
- When you're done, select **OK** to save your changes.
109
107
110
-
Your TableLayoutPanel is now a four-by-four grid with 16 equally-sized square cells.
108
+
Your TableLayoutPanel is now a four-by-four grid with 16 equallysized square cells.
111
109
These rows and columns are where the icons appear later.
112
110
113
-
111
+
:::image type="content" source="../media/tutorial-windows-forms-create-match-game/match-game-grid.png" alt-text="Screenshot of the Forms tab with a four-by-four grid.":::
114
112
115
-
## Add and format labels to display
113
+
## Add and format labels
116
114
117
-
In this section, you create and format labels to display during the game.
115
+
In this section, you create and format labels that appear during the game.
118
116
119
117
1. Be certain that the TableLayoutPanel is selected in the form editor.
120
118
You should see **tableLayoutPanel1** at the top of the **Properties** window.
@@ -128,7 +126,7 @@ In this section, you create and format labels to display during the game.
128
126
- Set the **BackColor** property of the label to **CornflowerBlue**.
129
127
- Set the **AutoSize** property to **False**.
130
128
- Set the **Dock** property to **Fill**.
131
-
- Set the **TextAlign** property to **MiddleCenter** by choosing the drop-down button next to the property, and then selecting the middle button.
129
+
- Set the **TextAlign** property to **MiddleCenter** by selecting the down arrow button next to the property and then selecting the middle button.
132
130
This value ensures the icon appears in the middle of the cell.
133
131
- Select the **Font** property. An ellipsis (**...**) button appears.
134
132
Select the ellipsis and set the **Font** value to **Webdings**, the **Font Style** to **Bold**, and the **Size** to **48**.
@@ -137,7 +135,7 @@ In this section, you create and format labels to display during the game.
137
135
The upper-left cell of the TableLayoutPanel now contains a black box centered on a blue background.
138
136
139
137
> [!NOTE]
140
-
> Webdings is a font of icons that ships with the Windows operating system.
138
+
> Webdings is an icon font that ships with the Windows operating system.
141
139
> In your matching game, the player matches pairs of icons.
142
140
> This font displays the icons to match.
143
141
> If the Webdings icons don't display properly on the form, set the [**UseCompatibleTextRendering** property](/dotnet/api/system.windows.forms.label.usecompatibletextrendering) of labels on the form to **True**.
@@ -154,11 +152,11 @@ In this section, you create and format labels to display during the game.
154
152
155
153
This step completes the layout for your form.
156
154
157
-
155
+
:::image type="content" source="../media/tutorial-windows-forms-create-match-game/match-game-grid-fill.png" alt-text="Screenshot of the matching game form with 16 black squares.":::
158
156
159
-
## Next steps
157
+
## Next step
160
158
161
-
Advance to the next tutorial to learn how to assign a random icon to each label and add event handlers to labels.
159
+
Go to the next tutorial to learn how to assign a random icon to each label and add event handlers to labels.
162
160
> [!div class="nextstepaction"]
163
161
> [Add icons to your Matching Game](tutorial-windows-forms-match-game-icons.md)
0 commit comments