Lesson 1 - Introduction to WPF (Windows Presentation Foundation)

Welcome to the first lesson of the course on creating window (form) applications in C# .NET. IN this course, we will be working with buttons, text boxes, tables, images, timers and other controls that are provided to us by these applications.

I wrote this course in a way that will no require you to have any advanced knowledge. However, I will assume that you know at least know the basics of object-oriented programming.

Windows Presentation Foundation

WPF (Windows Presentation Foundation) is a complex framework made for creating elegant form applications and is a part of the .NET framework since the version 3.0. It provides a wide range of form elements and provides elegant styles for the applications' appearance.

Component architecture

The framework offers a lot of ready-made components from which we can easily create our form. There are many different types of buttons, fields, scroll bars, labels, and other components that Microsoft refers to as controls. We are also able to create our own controls, in case we aren't satisfied with the existing ones, which won't happen too often. During the course, we'll go over many controls and learn how to work with them.

WPF and Windows Forms

Windows Forms is the predecessor to WPF and is still included in the .NET framework. Microsoft Windows Forms not yet marked as obsolete and both frameworks are currently in use, but WPF technologically surpasses it in many ways. Although many existing applications still use Windows Forms, it makes no sense to do so because it would mean loads of extra work and get less than desirable results.

Why WPF was created

Technology incessantly improves and with that brings a demand for graphically attractive applications. The older Windows Forms framework fails to deliver for the following reasons:

• In the last few years, the market was dominated by mobile devices. WF applications have issues with adapting their physical size due to weak DPI support. You can't just use the same application for mobile, tablet and desktop PC and get fullHD resolution. That's why WPF introduced DIP (Device Independent Pixel) as the unit of length and pure vector graphics, so the resulting application always looks nice on every device.
• WF stores the absolute position of each form control, which isn't very efficient for designing complex forms. Eventually, the HTML language created the concept of the application presentation layer (the part of the application that communicates with the user). C#, as well as Java, inspired by the concept of an application presentation layer, introduced form designing using XML (in our case XAML). They added and improved upon the separation of presentation and logical layers, as well as added support for bindings which allow us to bind the properties of an object directly to form controls. Nonetheless, there is always a price to pay. The price for better applications, in this case, is that we have to deal with another language while designing forms. There is no need to worry, the language is very simple.
• Using the original Windows graphical interface (GDI) is slow and brings lots of limitations. WPF uses Direct3D for rendering forms. Direct3D is an accelerated graphics interface that was used for the first time in Windows Vista. WPF applications are faster and consume less CPU. Thanks to WPF's independence from GDI it is now possible to leave the bland palette of operating-system standard controls behind, and begin to create graphically rich applications.

There are practically no limitations. We can insert images into buttons, "combobox" items, to our application skins or even animate them using storyboards. We won't be making anything too bright and flashy, but we will be adding more of an element of design so as to keep our application elegant. It is sometimes useful to be able to design parts exactly as we need them to be. Here, you can see an extravagant demonstration of what a form can look like using WPF (made using the Expression Blend tool):

Our first form application

We could write a whole new course about what WPF can do and WF can't, but ICT.social is known mainly for practical teaching (and we will stick to that for the foreseeable future). Now, let's start off by making the classic "Hello world" application (a simple application that is usually made when starting with some new technology and whose single purpose is to print text).

Create a new project of the WPF application type and name it HelloWPF.

Your Visual Studio window will now split into several panels, let's go over them. If you're missing a panel or accidentally closed one, you can re-activate them using the VIEW-menu.

In the middle of the screen, we see the form preview. It is displayed via the graphic designer. I recommend setting the display size to 100% using the field at the bottom left of the preview to be able to see things clearly.

The bottom window shows us the XAML code, which specifies what is on the form. Now, we see 2 elements included: the Window and the "Grid", which is used to embed content and is empty at the moment. Notice that the Window has attributes, some of which go over later on. The ones relevant to us now are Title (the window title), Height (height) and Width (width). We'll go deeper into XAML in the next lesson.

The Document outline window on the left shows all of the controls currently on the form. For more complex forms, it's sometimes difficult to select a control using just your mouse which is when this window becomes useful.

Form elements can be edited both directly via XAML code or by using the Properties window on the bottom right. The Properties Window shows the properties of the currently selected form control or of the form itself. Now, let's select Window in the Document Outline and set the Title to "Hello" in the Properties window. The title can be found in the Common tab:

Although it would be theoretically possible to design an entire application using the graphic designer and properties windows, most of the time, we design via XAML code. Mainly because the designer is sometimes hard to use and the code it generates is often too complicated. There are even things that can't be done in a way other than code. Visual Studio is not to blame for these issues. Not being able to do certain things via the graphical, aka WYSIWYG, editors that generate XML is a thing we have to deal with and is widely recognized as an issue. We cannot simply tell a program how we want to place controls exclusively by clicking. If you look at it this way, the older Windows Forms framework was better because we could essentially design our entire form using the graphical editor. However, the resulting application would have unfulfilling ergonomics and be of poor quality.

The last window we haven't gone over is called the Toolbox. It shows up after clicking on the tab at the top left and contains a variety of controls that can be added to the form via clicking or dragging. Now, add a TextBlock control, a control used to display text, by dragging it to the form in the graphic designer.

Now set the Text of the selected TextBlock in the Properties windows to "Hello world from forms!" (do not add quotation marks).

Run the application. It will look something like this:

Congratulations, You have now completed your first WPF application! In the next lesson, The XAML language in C# .NET WPF, we'll examine XAML in further detail, as promised. You can download the application's source code below.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.