Skip to content

Commit 7196537

Browse files
Merge pull request #5519 from TerryGLee/tglee-winform
add new WinForms "Hello World" tutorial for C#
2 parents e28c496 + cf1302f commit 7196537

10 files changed

+203
-23
lines changed

docs/get-started/csharp/index.yml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ metadata:
88
description: Create C# apps by using Visual Studio.
99
ms.custom: seodec18
1010
ms.topic: landing-page
11-
ms.date: 09/20/2019
11+
ms.date: 09/27/2019
1212
author: ghogen
1313
ms.author: ghogen
1414
manager: jillfra
@@ -41,12 +41,14 @@ landingContent:
4141
url: tutorial-console.md
4242
- text: Create a web app
4343
url: tutorial-aspnet-core.md
44-
- text: Create your first ASP.NET Core app
44+
- text: Create an ASP.NET Core app
4545
url: tutorial-aspnet-core-ef-step-01.md
4646
- text: Create a Universal Windows Platform app
4747
url: tutorial-uwp.md
4848
- text: Create a Windows Desktop app
4949
url: tutorial-wpf.md
50+
- text: Create a Windows Forms app
51+
url: ../../ide/create-csharp-winform-visual-studio.md
5052
- text: Learn about the C# language
5153
url: /dotnet/csharp/tutorials/intro-to-csharp/
5254

26.3 KB
Loading
73 KB
Loading
38.1 KB
Loading

docs/get-started/csharp/toc.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
href: tutorial-uwp.md
2222
- name: Create a WPF application
2323
href: tutorial-wpf.md
24+
- name: Create a Windows Forms app
25+
href: ../../ide/create-csharp-winform-visual-studio.md?toc=/visualstudio/get-started/csharp/toc.json&bc=/visualstudio/get-started/csharp/breadcrumb/toc.json
2426
- name: Video Tutorial - Create an ASP.NET Core Web App
2527
items:
2628
- name: '1 - Install Visual Studio'

docs/get-started/visual-basic/index.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ landingContent:
4141
url: tutorial-console.md
4242
- text: Create a Windows Desktop app
4343
url: tutorial-wpf.md
44+
- text: Create a Windows Forms app
45+
url: ../../ide/create-a-visual-basic-winform-in-visual-studio.md
4446
- text: Learn about the Visual Basic language
4547
url: /dotnet/visual-basic/developing-apps/programming/
4648

docs/ide/create-a-visual-basic-winform-in-visual-studio.md

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Create a Windows Forms app with Visual Basic"
33
description: "Learn how to create a Windows Forms app in Visual Studio with Visual Basic, step-by-step."
4-
ms.date: 03/23/2019
4+
ms.date: 09/27/2019
55
ms.topic: tutorial
66
ms.prod: visual-studio-windows
77
ms.technology: vs-ide-general
@@ -10,7 +10,7 @@ author: TerryGLee
1010
ms.author: tglee
1111
manager: jillfra
1212
dev_langs:
13-
- vb
13+
- VB
1414
ms.workload:
1515
- "multiple"
1616
---
@@ -41,9 +41,9 @@ First, you'll create a Visual Basic application project. The project type comes
4141

4242
1. Open Visual Studio 2017.
4343

44-
2. From the top menu bar, choose **File** > **New** > **Project**.
44+
1. From the top menu bar, choose **File** > **New** > **Project**.
4545

46-
3. In the **New Project** dialog box in the left pane, expand **Visual Basic**, and then choose **Windows Desktop**. In the middle pane, choose **Windows Forms App (.NET Framework)**. Then name the file `HelloWorld`.
46+
1. In the **New Project** dialog box in the left pane, expand **Visual Basic**, and then choose **Windows Desktop**. In the middle pane, choose **Windows Forms App (.NET Framework)**. Then name the file `HelloWorld`.
4747

4848
If you don't see the **Windows Forms App (.NET Framework)** project template, cancel out of the **New Project** dialog box and from the top menu bar, choose **Tools** > **Get Tools and Features**. The Visual Studio Installer launches. Choose the **.NET desktop development** workload, then choose **Modify**.
4949

@@ -59,19 +59,19 @@ First, you'll create a Visual Basic application project. The project type comes
5959

6060
![View the 'Create a new project' window](../get-started/media/vs-2019/create-new-project-dark-theme.png)
6161

62-
1. On the **Create a new project** window, enter or type *Windows Forms* in the search box. Next, choose **Visual Basic** from the Language list, and then choose **Windows** from the Platform list.
62+
1. On the **Create a new project** window, choose the **Windows Forms App (.NET Framework)** template for Visual Basic.
6363

64-
After you apply the language and platform filters, choose the **Windows Forms App (.NET Framework)** template, and then choose **Next**.
64+
(If you prefer, you can refine your search to quickly get to the template you want. For example, enter or type *Windows Forms App* in the search box. Next, choose **Visual Basic** from the Language list, and then choose **Windows** from the Platform list.)
6565

6666
![Choose the Visual Basic template for the Windows Forms App (.NET Framework)](../get-started/visual-basic/media/vs-2019/vb-create-new-project-search-winforms-filtered.png)
6767

6868
> [!NOTE]
6969
> If you do not 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, choose the **Install more tools and features** link.
7070
>
71-
> ![The 'Install more tools and features' link from the 'Not finding what you're looking for' message in the 'Create new project' window](../get-started/media/vs-2019/not-finding-what-looking-for.png)
72-
>
71+
> ![The 'Install more tools and features' link from the 'Not finding what you're looking for' message in the 'Create new project' window](../get-started/media/vs-2019/not-finding-what-looking-for.png)
72+
>
7373
> Next, in the Visual Studio Installer, choose the Choose the **.NET desktop development** workload.
74-
>
74+
>
7575
> ![.NET Core workload in the Visual Studio Installer](../ide/media/install-dot-net-desktop-env.png)
7676
>
7777
> After that, choose the **Modify** button in the Visual Studio Installer. You might be prompted to save your work; if so, do so. Next, choose **Continue** to install the workload. Then, return to step 2 in this "[Create a project](#create-a-project)" procedure.
@@ -86,49 +86,52 @@ First, you'll create a Visual Basic application project. The project type comes
8686

8787
## Create the application
8888

89-
After you select your Visual Basic project template and name your file, Visual Studio opens a form for you. A form is a Windows user interface. We'll create a "Hello World" application by adding controls to the form, and then we'll run the application.
89+
After you select your Visual Basic project template and name your file, Visual Studio opens a form for you. A form is a Windows user interface. We'll create a "Hello World" application by adding controls to the form, and then we'll run the app.
9090

9191
### Add a button to the form
9292

9393
1. Click **Toolbox** to open the Toolbox fly-out window.
9494

9595
![Click the Toolbox to open the Toolbox window](../ide/media/vb-toolbox-toolwindow.png)
9696

97-
(If you don't see the **Toolbox** fly-out option, you can open by pressing **Ctrl**+**Alt**+**X**.)
97+
(If you don't see the **Toolbox** fly-out option, you can open it from the menu bar. To do so, **View** > **Toolbox**. Or, press **Ctrl**+**Alt**+**X**.)
9898

99-
2. Click the **Pin** icon to dock the **Toolbox** window.
99+
1. Click the **Pin** icon to dock the **Toolbox** window.
100100

101101
![Click the Pin icon to pin the Toolbox window to the IDE](../ide/media/vb-pin-the-toolbox-window.png)
102102

103-
3. Click the **Button** control and then drag it onto the form.
103+
1. Click the **Button** control and then drag it onto the form.
104104

105105
![Add a button to the form](../ide/media/vb-add-a-button-to-form1.png)
106106

107-
4. In the **Appearance** section (or the **Fonts** section) of the **Properties** window, type `Click this`, and then press **Enter**.
107+
1. In the **Appearance** section (or the **Fonts** section) of the **Properties** window, type `Click this`, and then press **Enter**.
108108

109109
![Add text to the button on the form](../ide/media/vb-button-control-text.png)
110110

111111
(If you don't see the **Properties** window, you can open it from the menu bar. To do so, click **View** > **Properties Window**. Or, press **F4**.)
112112

113-
5. In the **Design** section of the **Properties** window, change the name from **Button1** to `btnClickThis`, and then press **Enter**.
113+
1. In the **Design** section of the **Properties** window, change the name from **Button1** to `btnClickThis`, and then press **Enter**.
114114

115115
![Add a function to the button on the form](../ide/media/vb-button-control-function.png)
116116

117+
> [!NOTE]
118+
> If you've alphabetized the list in the **Properties** window, **Button1** appears in the **(DataBindings)** section, instead.
119+
117120
### Add a label to the form
118121

119122
Now that we've added a button control to create an action, let's add a label control to send text to.
120123

121124
1. Select the **Label** control from the **Toolbox** window, and then drag it onto the form and drop it beneath the **Click this** button.
122125

123-
2. In the **Design** section of the **Properties** window, change the name from **Label1** to `lblHelloWorld`, and then press **Enter**.
126+
1. In either the **Design** section or the **(DataBindings)** section of the **Properties** window, change the name of **Label1** to `lblHelloWorld`, and then press **Enter**.
124127

125128
### Add code to the form
126129

127130
1. In the **Form1.vb [Design]** window, double-click the **Click this** button to open the **Form1.vb** window.
128131

129132
(Alternatively, you can expand **Form1.vb** in **Solution Explorer**, and then click **Form1**.)
130133

131-
2. In the **Form1.vb** window, between the **Private Sub** line and the **End Sub** line (or between the **Public Class Form1** line and the **End Class** line), type the following code.
134+
1. In the **Form1.vb** window, between the **Private Sub** and **End Sub** lines, type or enter `lblHelloWorld.Text = "Hello World!"` as shown in the following screenshot:
132135

133136
![Add code to the form](../ide/media/vb-add-code-to-the-form.png)
134137

@@ -140,13 +143,21 @@ Now that we've added a button control to create an action, let's add a label con
140143

141144
Several things will happen. In the Visual Studio IDE, the **Diagnostics Tools** window will open, and an **Output** window will open, too. But outside of the IDE, a **Form1** dialog box appears. It will include your **Click this** button and text that says **Label1**.
142145

143-
2. Click the **Click this** button in the **Form1** dialog box. Notice that the **Label1** text changes to **Hello World!**.
146+
1. Click the **Click this** button in the **Form1** dialog box. Notice that the **Label1** text changes to **Hello World!**.
144147

145148
![A Form1 dialog box that includes Label1 text ](../ide/media/vb-form1-dialog-hello-world.png)
146149

147-
Congratulations on completing this quickstart! We hope you learned a little bit about Visual Basic and the Visual Studio IDE. If you'd like to delve deeper, please continue with a tutorial in the **Tutorials** section of the table of contents.
150+
1. Close the **Form1** dialog box to stop running the app.
151+
152+
## Next steps
153+
154+
To learn more, continue with the following tutorial:
155+
156+
> [!div class="nextstepaction"]
157+
> [Tutorial: Create a picture viewer](tutorial-1-create-a-picture-viewer.md)
148158
149159
## See also
150160

151-
* [Quickstart: Create a console app in Visual Studio with Visual Basic](quickstart-visual-basic-console.md)
152-
* [Learn more about Visual Basic IntelliSense](visual-basic-specific-intellisense.md)
161+
* [More Visual Basic tutorials](/visualstudio/get-started/visual-basic/)
162+
* [C# tutorials](/visualstudio/get-started/csharp/)
163+
* [C++ tutorials](/cpp/get-started/tutorial-console-cpp)
Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
title: "Create a Windows Forms app with C#"
3+
description: "Learn how to create a Windows Forms app in Visual Studio with C#, step-by-step."
4+
ms.date: 09/26/2019
5+
ms.topic: tutorial
6+
ms.prod: visual-studio-windows
7+
ms.technology: vs-ide-general
8+
ms.devlang: CSharp
9+
author: TerryGLee
10+
ms.author: tglee
11+
manager: jillfra
12+
dev_langs:
13+
- CSharp
14+
ms.workload:
15+
- "multiple"
16+
---
17+
# Create a Windows Forms app in Visual Studio with C#
18+
19+
In this short introduction to the Visual Studio integrated development environment (IDE), you'll create a simple C# application that has a Windows-based user interface (UI).
20+
21+
::: moniker range="vs-2017"
22+
23+
If you haven't already installed Visual Studio, go to the [Visual Studio downloads](https://visualstudio.microsoft.com/vs/older-downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=vs+2017+download) page to install it for free.
24+
25+
::: moniker-end
26+
27+
::: moniker range="vs-2019"
28+
29+
If you haven't already installed Visual Studio, go to the [Visual Studio downloads](https://visualstudio.microsoft.com/downloads) page to install it for free.
30+
31+
> [!NOTE]
32+
> Some of the screenshots in this tutorial use the dark theme. If you aren't using the dark theme but would like to, see the [Personalize the Visual Studio IDE and Editor](../ide/quickstart-personalize-the-ide.md) page to learn how.
33+
34+
::: moniker-end
35+
36+
## Create a project
37+
38+
First, you'll create a C# application project. The project type comes with all the template files you'll need, before you've even added anything.
39+
40+
::: moniker range="vs-2017"
41+
42+
1. Open Visual Studio 2017.
43+
44+
1. From the top menu bar, choose **File** > **New** > **Project**.
45+
46+
1. In the **New Project** dialog box in the left pane, expand **Visual C#**, and then choose **Windows Desktop**. In the middle pane, choose **Windows Forms App (.NET Framework)**. Then name the file `HelloWorld`.
47+
48+
If you don't see the **Windows Forms App (.NET Framework)** project template, cancel out of the **New Project** dialog box and from the top menu bar, choose **Tools** > **Get Tools and Features**. The Visual Studio Installer launches. Choose the **.NET desktop development** workload, then choose **Modify**.
49+
50+
![.NET Core workload in the Visual Studio Installer](../ide/media/install-dot-net-desktop-env.png)
51+
52+
::: moniker-end
53+
54+
::: moniker range="vs-2019"
55+
56+
1. Open Visual Studio 2019.
57+
58+
1. On the start window, choose **Create a new project**.
59+
60+
![View the 'Create a new project' window](../get-started/media/vs-2019/create-new-project-dark-theme.png)
61+
62+
1. On the **Create a new project** window, choose the **Windows Forms App (.NET Framework)** template for C#.
63+
64+
(If you prefer, you can refine your search to quickly get to the template you want. For example, enter or type *Windows Forms App* in the search box. Next, choose **C#** from the Language list, and then choose **Windows** from the Platform list.)
65+
66+
![Choose the C# template for the Windows Forms App (.NET Framework)](../get-started/csharp/media/vs-2019/csharp-create-new-winforms-project-nonfiltered.png)
67+
68+
> [!NOTE]
69+
> If you do not 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, choose the **Install more tools and features** link.
70+
>
71+
> ![The 'Install more tools and features' link from the 'Not finding what you're looking for' message in the 'Create new project' window](../get-started/media/vs-2019/not-finding-what-looking-for.png)
72+
>
73+
> Next, in the Visual Studio Installer, choose the Choose the **.NET desktop development** workload.
74+
>
75+
> ![.NET Core workload in the Visual Studio Installer](../ide/media/install-dot-net-desktop-env.png)
76+
>
77+
> After that, choose the **Modify** button in the Visual Studio Installer. You might be prompted to save your work; if so, do so. Next, choose **Continue** to install the workload. Then, return to step 2 in this "[Create a project](#create-a-project)" procedure.
78+
79+
1. In the **Configure your new project** window, type or enter *HelloWorld* in the **Project name** box. Then, choose **Create**.
80+
81+
![in the 'Configure your new project' window, name your project 'HelloWorld'](../get-started/csharp/media/vs-2019/csharp-name-your-winform-project-helloworld.png)
82+
83+
Visual Studio opens your new project.
84+
85+
::: moniker-end
86+
87+
## Create the application
88+
89+
After you select your C# project template and name your file, Visual Studio opens a form for you. A form is a Windows user interface. We'll create a "Hello World" application by adding controls to the form, and then we'll run the app.
90+
91+
### Add a button to the form
92+
93+
1. Choose **Toolbox** to open the Toolbox fly-out window.
94+
95+
![Choose the Toolbox to open the Toolbox window](../ide/media/csharp-toolbox-toolwindow.png)
96+
97+
(If you don't see the **Toolbox** fly-out option, you can open it from the menu bar. To do so, **View** > **Toolbox**. Or, press **Ctrl**+**Alt**+**X**.)
98+
99+
1. Choose the **Pin** icon to dock the **Toolbox** window.
100+
101+
![Choose the Pin icon to pin the Toolbox window to the IDE](../ide/media/vb-pin-the-toolbox-window.png)
102+
103+
1. Choose the **Button** control and then drag it onto the form.
104+
105+
![Add a button to the form](../ide/media/csharp-add-button-form1.png)
106+
107+
1. In the **Properties** window, locate **Text**, change the name from **Button1** to `Click this`, and then press **Enter**.
108+
109+
![Add text to the button on the form](../ide/media/vb-button-control-text.png)
110+
111+
(If you don't see the **Properties** window, you can open it from the menu bar. To do so, choose **View** > **Properties Window**. Or, press **F4**.)
112+
113+
1. In the **Design** section of the **Properties** window, change the name from **Button1** to `btnClickThis`, and then press **Enter**.
114+
115+
![Add a function to the button on the form](../ide/media/vb-button-control-function.png)
116+
117+
> [!NOTE]
118+
> If you've alphabetized the list in the **Properties** window, **Button1** appears in the **(DataBindings)** section, instead.
119+
120+
### Add a label to the form
121+
122+
Now that we've added a button control to create an action, let's add a label control to send text to.
123+
124+
1. Select the **Label** control from the **Toolbox** window, and then drag it onto the form and drop it beneath the **Click this** button.
125+
126+
1. In either the **Design** section or the **(DataBindings)** section of the **Properties** window, change the name of **Label1** to `lblHelloWorld`, and then press **Enter**.
127+
128+
### Add code to the form
129+
130+
1. In the **Form1.cs [Design]** window, double-click the **Click this** button to open the **Form1.cs** window.
131+
132+
(Alternatively, you can expand **Form1.cs** in **Solution Explorer**, and then choose **Form1**.)
133+
134+
1. In the **Form1.cs** window, after the **private void** line, type or enter `lblHelloWorld.Text = "Hello World!";` as shown in the following screenshot:
135+
136+
![Add code to the form](../get-started/csharp/media/csharp-winforms-add-code.png)
137+
138+
## Run the application
139+
140+
1. Choose the **Start** button to run the application.
141+
142+
![Choose Start to debug and run the app](../ide/media/vb-click-start-hello-world.png)
143+
144+
Several things will happen. In the Visual Studio IDE, the **Diagnostics Tools** window will open, and an **Output** window will open, too. But outside of the IDE, a **Form1** dialog box appears. It will include your **Click this** button and text that says **Label1**.
145+
146+
1. Choose the **Click this** button in the **Form1** dialog box. Notice that the **Label1** text changes to **Hello World!**.
147+
148+
![A Form1 dialog box that includes Label1 text ](../ide/media/vb-form1-dialog-hello-world.png)
149+
150+
1. Close the **Form1** dialog box to stop running the app.
151+
152+
## Next steps
153+
154+
To learn more, continue with the following tutorial:
155+
156+
> [!div class="nextstepaction"]
157+
> [Tutorial: Create a picture viewer](tutorial-1-create-a-picture-viewer.md)
158+
159+
## See also
160+
161+
* [More C# tutorials](/visualstudio/get-started/csharp/)
162+
* [Visual Basic tutorials](/visualstudio/get-started/visual-basic/)
163+
* [C++ tutorials](/cpp/get-started/tutorial-console-cpp)
29.6 KB
Loading
56.5 KB
Loading

0 commit comments

Comments
 (0)