Tutorial: Create a WPF application with Visual Basic

  • Article

Applies to: yesVisual Studio noVisual Studio for Mac

Note

This article applies to Visual Studio 2017. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

In this tutorial, you'll create an application using Visual Basic in the Visual Studio integrated development environment (IDE). Your program will use the Windows Presentation Foundation (WPF) UI framework. Use this tutorial to become familiar with many of the tools, dialog boxes, and designers that you can use in Visual Studio.

In this tutorial, you learn how to:

  • Create the project
  • Configure window and add text
  • Add buttons and code
  • Debug and test the application
  • Debug with breakpoints
  • Build a release version

Prerequisites

You need Visual Studio to complete this tutorial. Visit the Visual Studio downloads page for a free version.

Create the project

When you create an application in Visual Studio, you first create a project. In this tutorial, create a Windows Presentation Foundation project.

  1. Open Visual Studio.

  2. On the menu bar, select File > New > Project.

    Screenshot shows Visual Studio with File then New then Project selected from the menu.

  3. In the New Project dialog box, select Installed > Visual Basic > Windows Desktop, and then select the WPF App (.NET Framework) template. Name the project HelloWPFApp, and select OK.

    Screenshot shows the New Project dialog box with the W P F app template selected.

    Visual Studio creates the HelloWPFApp project and solution. Solution Explorer shows the various files.

    Screenshot shows Solution Explorer with Hello W P F App files loaded.

The WPF Designer shows a design view and a XAML view of MainWindow.xaml in a split view.

Note

For more information about eXtensible Application Markup Language (XAML), see XAML overview for WPF.

Configure window and add text

Using the Properties window, you can display and change options for project items, controls, and other items.

  1. In Solution Explorer, open the MainWindow.xaml.

  2. In the XAML view, change the value of the Window.Title property from Title="MainWindow" to Title="Greetings".

  3. On the left side of the Visual Studio IDE, select the Toolbox tab. If you don't see it, select View > Toolbox from the menu bar or Ctrl+Alt+X.

  4. Either expand Common WPF Controls or enter Text in the search bar to find TextBlock.

    Screenshot showing the Toolbox window with the TextBlock control highlighted in the list of Common WPF Controls.

  5. Select the TextBlock item and drag it to the window on the design surface. You can move the TextBlock control by dragging it. Use the guidelines to place the control.

    Screenshot showing the TextBlock control positioned on the Greetings form with the guidelines visible.

    The XAML markup should look like the following example:

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. In the XAML view, locate the markup for the TextBlock and change the Text attribute:

    Text="Select a message option and then choose the Display button."

    Center the TextBlock again if necessary

  7. Save your app by choosing the Save All toolbar button. Alternatively, to save your app, choose File > Save All from the menu bar, or press Ctrl+Shift+S. It's a best practice to save early and often.

Add buttons and code

Your application uses two radio buttons and a button. Use these steps to add them. You'll add Visual Basic code to the button. That code refers to the radio button selection.

  1. In the Toolbox, find RadioButton.

    Screenshot showing the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  2. Add two RadioButton controls to the design surface by selecting the RadioButton item and dragging it to the design surface. Move the buttons by selecting them and using the arrow keys. Place the buttons side by side under the TextBlock control.

    Screenshot showing the Greetings form with a TextBlock control and two radio buttons.

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

    Screenshot showing the Solution Explorer Properties window for the 'HelloButton' RadioButton.

  4. In the Properties window for the right RadioButton control, change the Name property to GoodbyeButton.

  5. Update the Content attribute for HelloButton and GoodbyeButton to "Hello" and "Goodbye" in the XAML.

    <Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

  6. In the XAML view, locate the markup for HelloButton and add an IsChecked attribute:

    IsChecked="True"

    The IsChecked attribute with the value True means that HelloButton is checked by default. This setting means that the radio button is always selected, even when the program starts.

  7. In the Toolbox, find the Button control, and then drag a button to the design surface under the RadioButton controls.

  8. In the XAML view, change the value of Content for the Button control from Content="Button" to Content="Display".

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    Your window should resemble the following image.

    Screenshot showing the Greetings form with the TextBlock, RadioButtons labeled 'Hello' and 'Goodbye', and the Button control labeled 'Display' all positioned on the form.

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

    Greetings.xaml.vb opens, with the cursor in the Button_Click event.

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub

  10. Add the following code:

    If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

Debug and test the application

Next, you'll debug the application to look for errors and test that both message boxes appear correctly. To see how this process works, the first step deliberately introduces an error into the program.

  1. In Solution Explorer, right-click on MainWindow.xaml and choose Rename. Rename the file to Greetings.xaml.

  2. Start the debugger by pressing F5 or selecting Debug, then Start Debugging.

    A Break Mode window appears, and the Output window indicates that an exception has occurred.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

  3. Stop the debugger by choosing Debug > Stop Debugging.

    You renamed MainWindow.xaml to Greetings.xaml at the start of this section. The code still refers to MainWindow.xaml as the startup URI for the application, so the project can't start.

  4. In Solution Explorer, open the Application.xaml file.

  5. Change StartupUri="MainWindow.xaml" to StartupUri="Greetings.xaml"

  6. Start the debugger again (press F5). You should now see the Greetings window of your application.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

  7. Select Hello and the Display button, and then Goodbye and the Display button. Use the close icon in the upper right corner to stop debugging.

For more information, see Build a WPF application (WPF) and Debug WPF.

Debug with breakpoints

You can test the code during debugging by adding some breakpoints.

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

  2. Add a breakpoint by pressing F9 or selecting Debug, then Toggle Breakpoint.

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

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

  4. Press the F9 key to add a breakpoint, and then press F5 to start debugging.

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

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

    Screenshot showing a debug session in Visual Studio with the Code, Diagnostics. Autos, and Call Stack windows open. Execution is stopped at a breakpoint in Greetings.xaml.vb.

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

    The application starts again. A dialog box with the word "Hello" appears.

  7. Choose the OK button to close the dialog box.

  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 dialog box appears, choose OK to close the dialog box.

  10. Close the application window to stop debugging.

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

Build a release version

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

  1. Select Build > 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 by using the dropdown control on the toolbar.

  3. Select Build > Build Solution.

Congratulations on completing this tutorial! You can find the .exe you built under your solution and project directory (...\HelloWPFApp\HelloWPFApp\bin\Release).

Next steps

Advance to the next article to learn how to create a Windows Forms app in Visual Studio with Visual Basic.

Create a Windows Forms app

See also

For more information about Visual Studio, see these resources: