Tutorial: Create a WPF application with C#

In this tutorial, you become familiar with many of the tools, dialog boxes, and designers that you can use when you develop applications with Visual Studio. You create a "Hello, World" application, design the user interface, add code, and debug errors. At the same time, learn about working in the Visual Studio integrated development environment (IDE).

Configure the IDE
Create a project
Design the user interface
Debug and test the application

Prerequisites

If you don't have Visual Studio, go to Visual Studio downloads to install it for free.
Make sure the .NET desktop development workload is installed. You can verify this configuration in Visual Studio Installer.
You can use either .NET Framework or .NET Core for this tutorial. .NET Core is the newer, more modern framework. .NET Core requires Visual Studio 2019 version 16.3 or later.

What is Windows Presentation Foundation?

Windows Presentation Foundation (WPF) is a user interface (UI) framework that creates desktop client applications. The WPF development platform supports a broad set of application development features, including an application model, resources, controls, graphics, layout, data binding, documents, and security.

WPF is part of .NET. If you previously built applications with .NET using ASP.NET or Windows Forms, the programming experience should be familiar. WPF uses the Extensible Application Markup Language (XAML) to provide a declarative model for application programming. For more information, see Desktop Guide (WPF .NET).

Configure the IDE

When you launch Visual Studio, the start window opens. Select Continue without code to open the development environment. You see tool windows, the menus and toolbars, and the main window space. Tool windows are docked on the sides of the application window. The search box, menu bar, and the standard toolbar are located at the top. When you load a solution or project, editors and designers appear in the central space of the application window. When you develop an application, you spend most of your time in this central area.

Create the project

When you create an application in Visual Studio, you first create a project and a solution. For this example, you create a Windows Presentation Foundation (WPF) project.

Design the user interface

If the designer isn't open, select MainWindow.xaml and select Shift+F7 to open the designer.

In this tutorial, you add three types of controls to this application: a TextBlock control, two RadioButton controls, and a Button control.

Add a TextBlock control

Follow these steps to add a TextBlock.

Customize the text in the text block

You can change what text the TextBlock displays.

In the XAML view, locate the markup for TextBlock and change the Text attribute from TextBlock to Select a message option and then choose the Display button.

The XAML markup should look like this example:
```
<Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
</Grid>
```
Center the TextBlock again, and then save your changes by selecting Ctrl+S or using the File menu item.

Add radio buttons

Next, add two RadioButton controls to the form.

Add display text for each radio button

Next, add display text for each RadioButton control. The following procedure updates the Content property for a RadioButton control.

Update the Content attribute for the two radio buttons HelloButton and GoodbyeButton to "Hello" and "Goodbye" in the XAML. The XAML markup should now look similar to this example:

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

Set a radio button to be checked by default

In this step, set HelloButton to be checked by default so that one of the two radio buttons is always selected.

In the XAML view, locate the markup for HelloButton.

Add an IsChecked attribute and set it to True. Specifically, add IsChecked="True".

The XAML markup should now look similar to this example:

<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" IsChecked="True" 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>

Add the button control

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

Add code to the display button

Debug and test the application

Next, 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. For more information, see Build a WPF application (WPF) and Debug WPF.

Change the name of MainWindow.xaml

Give MainWindow a more specific name. In Solution Explorer, right-click MainWindow.xaml and choose Rename. Rename the file to Greetings.xaml. In this example, this change creates an error used later to demonstrate debugging.

Find and fix errors

In this step, you find the error that was caused earlier by changing the name of the MainWindow.xaml file.

Start debugging and find the error

Specify Greetings.xaml as the startup URI

In Solution Explorer, open the App.xaml file.
Change StartupUri="MainWindow.xaml" to StartupUri="Greetings.xaml", and save the changes.

As an optional step, it avoids confusion to change the title of your application window to match this new name.

In Solution Explorer, open the Greetings.xaml file that you just renamed.
Change the value of the Window.Title property from Title="MainWindow" to Title="Greetings", and save the changes.

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

To stop debugging, close the application window

Debug with breakpoints

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

Add breakpoints

View a representation of the UI elements

In the running app, you should see a widget that appears at the top of your window. The widget is a runtime helper that provides quick access to some helpful debugging features. Select the first button, Go to Live Visual Tree. You should see a window with a tree that contains all the visual elements of your page. Expand the nodes to find the buttons you added.

Build a release version of the application

After you verify that everything works, you can prepare a release build of the application.

On the main menu, select Build > Clean solution to delete intermediate files and output files that were created during previous builds. This step isn't required, but it cleans up the debug build outputs.
Change the build configuration for HelloWPFApp from Debug to Release by using the dropdown control on the toolbar. It says Debug currently.
Build the solution by choosing 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).

Productivity tips

Next step

Congratulations on completing this tutorial! To learn even more, continue with the following tutorials.

Continue with more WPF tutorials

Last updated on 2024-12-03

Share via