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
# Walkthrough: Create a Simple Application with C# or Visual Basic
22
22
By completing this walkthrough, you'll become familiar with many of the tools, dialog boxes, and designers that you can use when you develop applications with Visual Studio. You'll create a simple "Hello, World" application, design the UI, add code, and debug errors, while you learn about working in the integrated development environment (IDE).
23
-
23
+
24
24
## <aname="BKMK_ConfigureIDE"></a> Configure the IDE
25
25
When you start Visual Studio for the first time, you'll be prompted to sign in. This step is optional for this walkthrough. Next you may be shown a dialog box that asks you to choose your development settings and color theme. Keep the defaults and choose **Start Visual Studio**.
After Visual Studio launches, you'll see tool windows, the menus and toolbars, and the main window space. Tool windows are docked on the left and right sides of the application window, with **Quick Launch**, the menu bar, and the standard toolbar at the top. In the center of the application window is the **Start Page**. When you load a solution or project, editors and designers appear in the space where the **Start Page** is. When you develop an application, you'll spend most of your time in this central area.
30
-
30
+
31
31
![IDE with General Settings Applied](../ide/media/exploreide-idewithgeneralsettings.png"ExploreIDE-IDEwithgeneralsettings")
32
-
32
+
33
33
## <aname="BKMK_CreateApp"></a> Create a simple application
34
-
34
+
35
35
### Create the project
36
36
When you create an application in Visual Studio, you first create a project and a solution. For this example, you'll create a Windows Presentation Foundation (WPF) project.
37
-
37
+
38
38
#### To create the WPF project
39
-
39
+
40
40
1. Create a new project. On the menu bar, choose **File**, **New**, **Project...**.
41
-
41
+
42
42
![On the menu bar, choose File, New, Project](../ide/media/exploreide-filenewproject.png"ExploreIDE-FileNewProject")
43
-
43
+
44
44
2. Choose the Visual Basic or the Visual C# WPF App template by choosing in the left pane **Installed**, **Visual C#**, **Windows Classic Desktop**, for example, and then choosing **WPF App (.NET Framework)** in the middle pane. Name the project HelloWPFApp at the bottom of the New Project dialog.
45
-
45
+
46
46
![Create a C# WPF Project, HelloWPFApp](../ide/media/exploreide-newprojectcsharp.png"ExploreIDE-NewProjectcsharp")
47
-
47
+
48
48
Visual Studio creates the HelloWPFApp project and solution, and **Solution Explorer** shows the various files. The WPF Designer shows a design view and a XAML view of MainWindow.xaml in a split view. You can slide the splitter to show more or less of either view. You can choose to see only the visual view or only the XAML view. (For more information, see [WPF Designer for Windows Forms Developers](http://msdn.microsoft.com/47ad0909-e89b-4996-b4ac-874d929f94ca).) The following items appear in **Solution Explorer**:
49
-
49
+
50
50
![Solution Explorer with HelloWPFApp files loaded](../ide/media/exploreide-hellowpfappfiles.png"ExploreIDE-HelloWPFAppFiles")
51
-
51
+
52
52
After you create the project, you can customize it. By using the **Properties** window (found on the **View** menu), you can display and change options for project items, controls, and other items in an application.
53
-
53
+
54
54
#### To change the name of MainWindow.xaml
55
55
Let's give MainWindow a more specific name.
56
56
57
57
1. In **Solution Explorer**, select MainWindow.xaml. You should see the **Properties** window, but if you don't, choose the **View** menu and then the **Properties Window** item.
58
58
2. Change the **File Name** property to `Greetings.xaml`.
59
-
59
+
60
60
![Properties window with File Name highlighted](../ide/media/exploreide-filenameinpropertieswindow.png"ExploreIDE-FilenameinPropertiesWindow")
61
-
61
+
62
62
**Solution Explorer** shows that the name of the file is now Greetings.xaml, and the nested code file is now named Greetings.xaml.vb or Greetings.xaml.cs. This code file is nested under the .xaml file node to show they are closely related to each other.
63
-
63
+
64
64
### Design the user interface (UI)
65
65
We will add three types of controls to this application: a TextBlock control, two RadioButton controls, and a Button control.
66
-
66
+
67
67
#### To add a TextBlock control
68
-
68
+
69
69
1. Open the **Toolbox** window by choosing the **View** menu and the **Toolbox** item.
70
-
70
+
71
71
2. In the **Toolbox**, expand the **Common WPF Controls** node to see the TextBlock control.
72
-
72
+
73
73
![Toolbox with the TextBlock control highlighted](../ide/media/exploreide-textblocktoolbox.png"ExploreIDE-TextBlockToolbox")
74
-
74
+
75
75
3. Add a TextBlock control to the design surface by choosing the **TextBlock** item and dragging it to the window on the design surface. Center the control near the top of the window.
76
-
76
+
77
77
Your window should resemble the following illustration:
78
-
78
+
79
79
![TextBlock control on the Greetings form](../ide/media/exploreide-greetingswithtextblockonly.png"ExploreIDE-GreetingswithTextblockonly")
80
-
80
+
81
81
The XAML markup should look something like the following:
1. In the XAML view, locate the markup for TextBlock and change the Text attribute:
90
90
91
91
```xaml
92
92
Text="Select a message option and then choose the Display button."
93
93
```
94
-
94
+
95
95
2. Re-center the TextBlock if necessary, and save your changes by pressing **Ctrl-s** or using the **File** menu item.
96
-
96
+
97
97
Next, you'll add two [RadioButton](/dotnet/framework/wpf/controls/radiobutton) controls to the form.
98
-
98
+
99
99
#### To add radio buttons
100
-
100
+
101
101
1. In the **Toolbox**, find the **RadioButton** control.
102
-
102
+
103
103
![Toolbox window with RadioButton control selected](../ide/media/exploreide-radiobuttontoolbox.png"ExploreIDE-RadioButtonToolbox")
104
-
104
+
105
105
2. Add two RadioButton controls to the design surface by choosing the **RadioButton** item and dragging it to the window on the design surface. Move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control.
106
-
106
+
107
107
Your window should look like this:
108
-
108
+
109
109
![Greetings form with textblock and two radiobuttons](../ide/media/exploreide-greetingswithradiobuttons.png"ExploreIDE-Greetingswithradiobuttons")
110
-
110
+
111
111
3. In the **Properties** window for the left RadioButton control, change the **Name** property (the property at the top of the **Properties** window) to **HelloButton**.
4. In the **Properties** window for the right RadioButton control, change the **Name** property to **GoodbyeButton**, and then save your changes.
116
-
116
+
117
117
You can now add display text for each RadioButton control. The following procedure updates the **Content** property for a RadioButton control.
118
-
118
+
119
119
#### To add display text for each radio button
120
-
120
+
121
121
1. On the design surface, open the shortcut menu for HelloButton by pressing the right mouse button on HelloButton, choose **Edit Text**, and then enter 'Hello'.
122
-
122
+
123
123
2. Open the shortcut menu for GoodbyeButton by pressing the right mouse button on GoodbyeButton, choose **Edit Text**, and then enter 'Goodbye'.
124
124
125
125
### To set a radio button to be checked by default
@@ -132,49 +132,49 @@ IsChecked="True"
132
132
```
133
133
134
134
The final UI element that you'll add is a [Button](/dotnet/framework/wpf/controls/button) control.
135
-
135
+
136
136
#### To add the button control
137
-
137
+
138
138
1. In the **Toolbox**, find the **Button** control, and then add it to the design surface under the RadioButton controls by dragging it to the form in the design view.
139
-
139
+
140
140
2. In the XAML view, change the value of **Content** for the Button control from `Content="Button"` to `Content="Display"`, and then save the changes.
Your window should resemble the following illustration.
146
-
146
+
147
147
![Greetings form with control labels](../ide/media/exploreide-greetingswithconrollabels.png"ExploreIDE-Greetingswithconrollabels")
148
-
148
+
149
149
### Add code to the Display Button
150
150
When this application runs, a message box appears after a user chooses a radio button and then chooses the **Display** button. One message box will appear for Hello, and another will appear for Goodbye. To create this behavior, you'll add code to the Button_Click event in Greetings.xaml.vb or Greetings.xaml.cs.
151
-
151
+
152
152
#### Add code to display message boxes
153
153
1. On the design surface, double-click the **Display** button.
154
-
155
-
Greetings.xaml.vb or Greetings.xaml.cs opens, with the cursor in the Button_Click event.
156
-
154
+
155
+
Greetings.xaml.vb or Greetings.xaml.cs opens, with the cursor in the Button_Click event.
Next,you'll debug the application to look for errors and test that both message boxes appear correctly. The following instructions tell you how to build and launch the debugger, but later you might read [Building a WPF Application (WPF)](/dotnet/framework/wpf/app-development/building-a-wpf-application-wpf) and [Debugging WPF](../debugger/debugging-wpf.md) for more information.
194
-
194
+
195
195
###Findandfixerrors
196
196
Inthisstep,you'll find the error that we caused earlier by changing the name of the MainWindow.xaml file.
0 commit comments