Getting started with WPF using Visual Studio 2019
Windows Presentation Foundation, also known as WPF, is a sub-system of the .NET family for building a Windows desktop application. WPF uses XAML as its user interface scripting language and C# as its code-behind programming language. In other words, all user interfaces such as windows, pages, controls, menus, and navigations are written in XAML and their code-behind is written using C# language.
This chapter is a swift taste of WPF and its capabilities. In this chapter, you will gain an understanding of how to build your first WPF application using C# and Visual Studio 2019.
Prerequisites
Prerequisites for building WPF applications include the following:
- Visual Studio 2019 Community or other editions
- C# and Object-Oriented Programming concepts
- Understanding of XAML language and its syntaxes
Visual Studio 2019 Community, developed by Microsoft, is a fully-featured, extensible, free and one of the most popular IDEs for building various software applications for desktop, Web, cloud, libraries, and mobile. You may download Visual Studio 2019 Community from the URL specified in the references section of this chapter or just Google it. Please make sure to download and install Visual Studio 2019 or other editions if you do not have it before you proceed further. Make sure to select the .NET Desktop development option from available packages. Which will install all the basic libraries and configurations that you need to develop a WPF application.
C# is a programming language developed by Microsoft. If you’re not familiar with C#, please find a link for the free C# Programming book in the references section.
Note
We are using C# 9, for all the examples used in the book.
XAML stands for Extensible Application Markup Language is a scripting language to build user interfaces for windows client applications. XAML has similar syntaxes as XML.
To learn XAML in-depth, find a reference for an eBook at the end of this chapter.
What is WPF
WPF is a UI framework, designed to create attractive graphical user interfaces for Windows desktop. WPF is a part of Microsoft’s .NET ecosystem and gets installed as a part of .NET and Visual Studio. WPF applications are developed using Visual Studio IDE.
WPF is not a replacement for Windows Forms. WPF was developed to replace Windows Forms but some developers and businesses did not want to give up Windows Forms. Today, both Windows Forms and WPF are supported in Visual Studio to build windows client applications. You can also use Windows Forms controls in WPF and vice versa.
WPF is modern, fast, and more dynamic. WPF provides a rich set of 2D and 3D graphics as well as multimedia controls. It is a set of rich controls, advanced layouts, and beautiful styles and themes. WPF also supports advanced features such as navigation controls, upgraded rendering process, and flexible data binding.
Hello, WPF!
Let’s create a simple Hello WPF application using Visual Studio 2019 Community.
Create a new project in Visual Studio
Create a new project in Visual Studio by opening Visual Studio and selecting New Project. When you open Visual Studio 2019, you will see on the left side a list of your previous projects. On the right side, you will see various options including Create a new project. See Figure 1.
Figure 1
Select Create a new project on the above screen.
Figure 2
On the next screen, you can filter based on language, platform, and project type.
Select C#, Windows, and Desktop from the dropdowns respectively. See Figure 2.
In the available WPF templates, you will notice there are two templates for WPF App – WPF App (.NET Framework) and WPF App (.NET).
.NET Framework and .NET are the different versions of the .NET family; .NET Framework is the older so we are ignoring .NET Framework here. We will use .NET only.
Note
.NET 5.0 is the latest version of .NET.
After clicking on a Next Button you will be directed to a configuration screen as shown in Figure 3, It has the following fields.
- In the ProjectName text box, type the name of your project. We are naming our project HelloWPFSample. You can name your project as you desire.
- The Location text box lets you browse a folder where you would like to create your new application.
- The Solution is a container for one or more projects in Visual Studio, you can even change the solution name by first unchecking the checkbox which says “Place the solution and project in the same directory” and which will enable the Solution Name text box.
Figure 3
Tip
If you are developing a project in the .NET Framework, then you will have one more field to select the version of .NET Framework. As shown in Figure 4. Select .NET
Framework 4.7.2 or newer versions in the framework version dropdown as per your project’s requirements.
Figure 4
Now click the Create button. This action creates a WPF project with some necessary files already added inside a project. Figure 4 shows the default Visual Studio solution.
Understanding project and files
Figure 5
As you can see from Figure 5, there are 4 major sections. Such as
- UI Designer
- XAML Editor,
- Solution Explorer, and
- Properties.
The UI Designer is a window where you can drag and drop elements from a toolbox. We can set layouts such as grid or wrap panel etc. and can arrange other UI elements inside the layout panel. As soon as you drag an element from the toolbox and drop it to the designer, you will notice that the XAML code is automatically written for you by the designer.
XAML Editor
Code for each UI element is present inside a XAML file, using XAML editor we can position, align, style UI elements, add animations, etc.
The Solution Explorer is like a tree view that lists all the projects which are created under the same solution and all the files of those projects. By default, you will see there are 3 nodes created by default for your project – Dependencies, App.xaml, and MainWindow.xaml.
- Dependencies is where we can add references to this project.
- The App.xaml file is an application file that stores resources that are applicable across the entire application. We are going to discuss this in more detail in the following chapters.
- In this chapter, our focus is on XAML. The MainWindow.xaml represents the current Window that you see in the designer. As you can see in Figure 4, the XAML editor has a Window and a Grid. These are UI elements; they have been added to the XAML file by default.
Properties window
This window has different properties & events related to UI elements. We will learn about the Properties window in more detail in the coming sub-chapters.
In WPF, each UI element can be represented in two ways.
- At design-time: By a XAML element, This can be achieved in further 2 ways.
- Drag and drop controls from the Toolbar.
- Manually typing a code for each UI control in XAML editor.
- At run-time by a code-behind class.
For example, the XAML editor represents a window at design time. If you manually add elements into XAML, they will immediately appear on the window, the developer doesn’t have to run the project to see the changes while the code-behind C# class represents a window at run-time, any control added from code-behind won’t be available on windows at design time, one has to run the project to see the changes.
You can also check this Ebook on WPF,
In the next article, we will see how to design WPF User Interfaces at compile/design time.