How to Create a Simple WPF Application

Anil Kumar
9y
10.3k
0
1

Article

This article is intended to explain a step-by-step approach for creating a WPF application. Creating a WPF application is as easy as developing other application types in Visual Studio. This walk-through is based on Visual Studio 2013 Edition.

Step 1: Create a new WPF Application Project

On the menu bar, choose "File" -> "New" -> "Project...". It will open the following.

In this screen, for our sample application, we are choosing the following:

Language of template
Visual C# from Templates. If you want to use another language, then expand “Other Languages”. From there you can choose other languages like VB.net and so on.
Template group
Windows Desktop
Template
WPF Application

We can give a name to our solution, project name and also choose the location for where this will be stored. You may have noticed that there is a checked checkbox “Create directory for solution”, that automatically creates a directory for us.

If we are creating a solution that will be mapped with code repositories like SVN or TFS, then we can check the “Add to source control” checkbox. It will then make it easy to map the solution to our repository server.

After choosing the correct template and giving the project name, solution name, location, click on the OK button. Visual Studio creates the “WpfChildWindowDemo” project and solution and the Solution Explorer shows various files (refer to the following):

Now, the WPF Designer shows design and XAML view of MainWindow.xaml in split view. We can slide the splitter to show more or less of either view. We can also choose to see only one view, in other words design/visual view or XAML view. Refer to the following screenshot.

Step 2: Run the WPF Application

Before we make some changes, let us see the default template in action by running the application. If we run it now, it will look like the following.

Step 3: Change the Application Icon

Let us make a small change for making our learning path interesting. We will now change the current application icon with a nice one in a simple manner. The easiest way is to add a logo image into our project and then assign that to the “Icon” properties of the Window.

Let's add a folder to our WpfChildWindowDemo project and name it “Resource”. Inside this folder add 2 image files. Now, our Solution Explorer will have items as shown in the following screenshot.

Now in the XAML viewer, inside the <Window> tag, assign the image to Icon properties. As soon as we start typing, Visual Studio IntelliSense will start showing you the matching items. Refer to the following screenshot.

In our example, let us select logo.png from the Resource folder and assign it to the Icon properties.

Select the Window item and go to the Properties window. Make sure the type is of "Window". Refer to the Red-underlined attribute with an arrow marking it in the following screenshot.

The Icon dropdown (see the preceding image) will show all the images associated with our project. From here, we can choose the desired image file for the application icon. Visual Studio automatically updates our XAML file with Icon="Resource/logo.png", the same thing that we did in the preceding approach.

Let's hit the Run button and see the application. Now, it is showing the application icon as shown in the following image.