Walkthrough: Explore the Visual Studio IDE with C# or Visual Basic

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”-style application, design the UI, add code, and debug errors, while you learn more about working in the integrated development environment (IDE).

This topic contains the following sections:

Configure the IDE

Create a simple application

Debug and test the application

Note

This walkthrough is based on the Professional edition of Visual Studio 2012. Your copy of Visual Studio might show different names or locations for some of the user interface elements. The Visual Studio edition that you have and the settings that you use determine these elements. For more information about settings, see Visual Studio Settings.

Configure the IDE

When you start Visual Studio for the first time, you must choose a settings combination that applies a set of pre-defined customizations to the IDE. Each settings combination has been designed to make it easier for you to develop applications.

Figure 1: Choose Default Environment Settings dialog box

This walkthrough is written with General Development Settings applied, which applies the least amount of customization to the IDE. You can change your settings combination by using the Import and Export Settings Wizard. For more information, see How to: Change Select Settings.

After you open Visual Studio, you can identify the 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 a solution or project is loaded, editors and designers appear in this space. When you develop an application, you’ll spend most of your time in this central area.

Figure 2: Visual Studio IDE

You can make additional customizations to Visual Studio, such as changing the font face and size of the text in the editor or the color theme of the IDE, by using the Options dialog box. Depending on the settings combination that you’ve applied, some items in that dialog box might not appear automatically. You can make sure that all possible options appear by choosing the Show all settings check box.

Figure 3: Options dialog box

In this example, you’ll change the color theme of the IDE from light to dark.

To change the color theme of the IDE

1. Open the Options dialog box.

   

2. Change the Color theme to Dark, then click OK.

   

The colors in Visual Studio should match the following image:

The color theme used in the rest of this walkthrough is the light theme. For more information about customizing the IDE, see Customizing the Development Environment.

Create a simple application

Create the project

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 solution.

To create the WPF project

1. Create a new project. On the menu bar, choose File, New, Project.

   

   You can also type New Project in the Quick Launch box to do the same thing.

   

2. Choose the Visual Basic or the Visual C# WPF Application template, and then name the project HelloWPFApp.

   

   OR

   

The HelloWPFApp project and solution are created and the different files appear in Solution Explorer. The WPF Designer shows a design view and a XAML view of MainWindow.xaml in a split view. (For more information, see WPF Designer for Windows Forms Developers). The following items appear in Solution Explorer:

Figure 5: Project items

After you create the project, you can customize it. By using the Properties window, you can display and change options for project items, controls, and other items in an application. By using the project properties and property pages, you can display and change options for projects and solutions.

To change the name of MainWindow.xaml

1. In the following procedure, you’ll give MainWindow a more specific name. In Solution Explorer, select MainWindow.xaml. You should see the Properties window for that file underneath the window. If you do not see the Properties window, select MainWindow.xaml in Solution Explorer, open the shortcut menu (by right-clicking) and select Properties. Change the File Name property to Greetings.xaml.

   

   Solution Explorer shows that the name of the file is now Greetings.xaml and that the name of MainWindow.xaml.vb or MainWindow.xaml.cs is now Greetings.xaml.vb or Greetings.xaml.cs.

2. In Solution Explorer, open Greetings.xaml in the Designer view and select the title bar of the window.

3. In the Properties window, change the value of the Title property to Greetings.

   Warning

   This change causes an error that you will learn how to debug and fix in a later step.

The title bar for MainWindow.xaml now reads Greetings.

Design the user interface (UI)

We will add three types of controls to this application: a TextBlock control, two RadioButton controls, and a Button control.

To add a TextBlock control

1. Open the Toolbox window. You should find it on the left of the Designer window. You can also open it from the View menu or by typing CTRL+ALT+X.

2. In the Toolbox, search for the TextBlock control.

   

3. Add a TextBlock control to the design surface, and center the control near the top of the window.

Your window should resemble the following illustration:

Figure 7: Greetings window with TextBlock control

The XAML markup should look something like the following:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

To customize the text in the text block

1. In the XAML view, locate the markup for TextBlock and change the Text attribute: Text=”Select a message option and then choose the Display button.”

2. If the TextBlock does not expand to fit the In the Design view, enlarge the TextBlock control so that it displays all the text.

3. Save your changes.

Next, you’ll add two RadioButton controls to the form.

To add radio buttons

1. In the Toolbox, search for the RadioButton control.

   

2. Add two RadioButton controls to the design surface, and move them so that they appear side by side under the TextBlock control.

   Your window should look like this:

   Figure 8: RadioButtons in the Greetings window.

   

3. In the Properties window for the left RadioButton control, change the Name property (the property at the top of the Properties window) to RadioButton1.

4. In the Properties window for the right RadioButton control, change the Name property to RadioButton2, and then save your changes.

You can now add display text for each RadioButton control. The following procedure updates the Content property for a RadioButton control.

To add display text for each radio button

1. On the design surface, open the shortcut menu for RadioButton1, choose Edit Text, and then enter Hello.

2. Open the shortcut menu for RadioButton2, choose Edit Text, and then enter Goodbye.

The final UI element that you’ll add is a Button control.

To add the button control

1. In the Toolbox, search for the Button control, and then add it to the design surface, under the RadioButton controls.

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.

   The markup should resemble the following example: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

Your window should resemble the following illustration.

Figure 9: Final Greetings UI

Add code to the Display Button

When this application runs, a message box appears after a user first 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.

Add code to display message boxes

1. On the design surface, double-click the Display button.

   Greetings.xaml.vb or Greetings.xaml.cs opens, with the cursor in the Button_Click event. You can also add a click event handler as follows:

   For Visual Basic, the event handler should look like this:

   Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

   For Visual C#, the event handler should look like this:

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

2. For Visual Basic, enter the following code:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   For Visual C#, enter the following code:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.IsChecked = true;
       MessageBox.Show("Goodbye.");
   }
   

3. Save the application.

Debug and test the application

Next, you’ll debug the application to look for errors and test that both message boxes appear correctly. For more information, see Building a WPF Application (WPF) and Debugging WPF.

Find and fix errors

In this step, you’ll find the error that we caused earlier by changing the name of the main window XAML file.

To start debugging and find the error

1. Start the debugger by selecting Debug, then Start Debugging.

   

   A dialog box appears, indicating that an IOException has occurred: Cannot locate resource ‘mainwindow.xaml’.

2. Choose the OK button, and then stop the debugger.

   

We renamed Mainwindow.xaml to Greetings.xaml at the start of this walkthrough, but the solution is still pointing to Mainwindow.xaml as the startup URI for the application, so the project can't start.

To specify Greetings.xaml as the startup URI

1. In Solution Explorer, open the App.xaml file (in the C# project) or the Application.xaml file (in the Visual Basic project) in the XAML view (it cannot be opened in the Design view).

2. Change StartupUri="MainWindow.xaml" to StartupUri="Greetings.xaml", and then save the changes.

Start the debugger again. You should see the Greetings window of the application.

To debug with breakpoints

By adding some breakpoints, you can test the code during debugging. You can add breakpoints by choosing Debug, Toggle Breakpoint on the menu bar or by clicking in the left margin of the editor next to the line of code where you want the break to occur.

To add breakpoints

1. Open Greetings.xaml.vb or Greetings.xaml.cs, and select the following line: MessageBox.Show("Hello.")

2. Add a breakpoint from the menu by selecting Debug, then Toggle Breakpoint.

   

   A red circle appears next to the line of code in the far left margin of the editor window.

3. Select the following line: MessageBox.Show("Goodbye.").

4. Choose the F9 key to add a breakpoint, and then choose the F5 key to start debugging.

5. In the Greetings window, choose the Hello radio button, and then choose the Display button.

   The line MessageBox.Show("Hello.") is highlighted in yellow. On the bottom of the IDE, the Autos, Locals, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, Command, Immediate, and Output windows are docked together on the right side.

6. On the menu bar, choose Debug, Step Out.

   The application resumes execution, and a message box with the word “Hello” appears.

7. Choose the OK button on the message box to close it.

8. In the Greetings window, choose the Goodbye radio button, and then choose the Display button.

   The line MessageBox.Show("Goodbye.") is highlighted in yellow.

9. Choose the F5 key to continue debugging. When the message box appears, choose the OK button on the message box to close it.

10. Choose the SHIFT + F5 keys to stop debugging.

11. On the menu bar, choose Debug, Disable All Breakpoints.

Build a release version of the application

Now that you’ve verified that everything works, you can prepare a release build of the application.

To clean the solution files and build a release version

1. Select Build, then Clean solution to delete intermediate files and output files that were created during previous builds.

   

2. Change the build configuration for HelloWPFApp from Debug to Release.

   

3. Build the solution.

   

Congratulations on completing this walkthrough! If you want to explore more examples, see Visual Studio Samples.

See Also

Concepts

What's New in Visual Studio 2012

Getting Started with Visual Studio

Productivity Tips for Visual Studio