WPF Tutorial for Beginners: How to Create Application [Example]

WPF can be considered as an evolution over WinForms. It produces easy to operate graphical display system for Windows. It offers easy separation between UI and business logic.

WPF applications can be deployed in your system as a standalone desktop program or hosted as an embedded object in a website.

Why WPF?

There are many reasons for using WPF platform some prominent ones are-

• An ideal platform to use if you require to deal with various media types
• WPF allows you to create a skinned user interface. It also helps you when you need to load portion of the UI or want to bind XML data
• It allows you to take the benefit of the large .NET class library as it is built on .NET technology
• Resolution independence, so applications developed using WMF can be run on mobile devices or a 20-inch monitor
• WPF builds on DirectX instead of WinAPI. It offers the client computer’s graphics system. Therefore, offering greater graphic rendering power
• Supports a flow document model which enables “desktop publishing” quality of the layout
• Appearance and behavior are loosely coupled. This allows designers and developers to work on two separate models
• In WMF framework you can graphically design tools on simple XML documents instead of parsing code
• Allows you to use hardware acceleration for drawing the GUI, for better performance

History of WPF

Windows 1.0 was the first GUI environment from Microsoft. It is working as a layer on top of DOS, relying on the GDI and USER systems for graphic and user interface.

DirectX was introduced in the year 1995, as a high-performance graphics system. It was aimed at games and other graphics related environments. Over the years there are many versions released with Directx9 that provides a library to use with mange.Net code.

WPF version	Release Year	.Net Version	Visual Studio Version	Features
3.0	2006	3.0	N/A	Initial Release. However, WPF development can be done with VS 2005.
3.5	2007	3.5	VS 2008	Modification and improvements in: Application model, binding, controls, documents, annotations, and 3-D Ul elements.
3.5 SP1	2008	3.5 SP1	N/A	Native splash screen support. New web browser control, DirectX pixel shader support.
4.0	2010	4.0	VS 2010	New controls: Calendar. DataGrid, DatePicker. Multi-Touch and Manipulation
4.5	2012	4.5	VS 2012	Faster setup time and improved performance for Bitmap effects. New controls: Calendar. DataGrid, DatePicker. Multi-Touch and Manipulation
4.5.1	2013	4.5.1	VS 2013	New Ribbon control New INotifyDataErrorlnfo interface
4.5.2	2014	4.5.2	NA	No Major Change No Major Change
4.6	2015	4.6	VS 2015	Transparent child window support HDPI and Touch improvements

The latest stable version of WPF 5.0.6 which is released in April 2021.

Features of WPF

• Documents and Printing
• Security, Accessibility & Localization
• Offers Interoperability with Windows Forms controls
• Direct3D is used in graphical applications where performance is important
• Uses the video card hardware for rendering
• Vector-based graphics allows you to scale your application without loss of quality
• WPF supports floating-point logical pixel system and 32-bit ARGB color
• Redefine Styles and Control Templates
• Building international fonts from composite fonts
• WPF text rendering helps you to takes advantage of ClearType technology
• Allows you to use the caching technique of pre-rendered text in the video memory
• Resource-based Approach for every control
• Presentation timers are initialized & managed by WPF
• The relationship between video and animation is also supported
• In WPF a style is a set of properties which should be applied to content used for visual rendering
• Templates in WPF helps you to change the Ul of your document
• Commands are more abstract and loosely- coupled version of events
• WPF support for commands reduces the amount of code we need to write

Next in this WPF C# tutorial, we will learn about WPF core types and Infrastructure.

WPF Core Types and Infrastructures

Classes in WPF are divided into four different types:

• UIElement
• FrameworkElement
• ContentElement
• FrameworkContentElement

These classes, known as base element classes. It provides the foundation for a model of composing user interfaces.

WPF user interfaces are composed of elements which are assembled in a tree hierarchy. It is called the element tree. The element tree is an intuitive way to layout user interface. It is a structure which allows you to get the feature of powerful UI services.

XAML

Extensible Application Markup Language which is called “XAML”, or “zammel” is a declarative way to define user interfaces.

Here is the XAML definition of a simple button:

<Button
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>
Say Hello Guru99</Button>

Advantage of using XAML language:

• XAML separating front-end appearance from back-end logic
• XAML is the easiest method to represent user interfaces
• XAML is work effectively with tools

Controls

WPF framework supports many useful controls like:

• Editing controls like TextBox, CheckBox, RadioButton
• List controls such as ListBox, ListView, TreeView
• User information such as Label, WPF ProgressBar, ToolTip
• Action such as Menu, Button, and ToolBar
• Appearances such as Border, WPF Image, and Viewbox
• Common dialog boxes such as OpenFileDialog and PrintDialog.
• Containers such as TabContro, ScrollBar, and GroupBox
• Layouts like DocPanel, StackPanel, and Grid
• Navigation such as Frame and Hyperlink

The appearance of controls can be customized with styles and templates without programming. You can also create a custom control by deriving a new class from an appropriate base class.

Appearance

WPF provides a feature for customizing the appearance of your application. It allows you to set objects and values for things like fonts, backgrounds, etc.

The styles feature allows you to standardize on a specific look for the entire product. It allows you to replace the default appearance while retaining its default behavior.

Data template allows you to control the default visualization of the bound data. With the help of themes, you can easily visualize styles from the operating system.

Layout & Panels

Layout helps you in proper positioning and sizing control. It is part of the process of composing the presentation for the user. The WPF framework eases the layout process and offers better adaptability of the UI appearance.

The layout infrastructure is offered by various classes are 1) StackPanel 2)DockPanel 3) WrapPanel 4) Grid and 5) Canvas

Graphics

WPF provides an improved graphics system like

• WPF uses device-independent units, enabling resolution and device independence. Therefore, each pixel, which is device-independent, automatically scales with the dots-per-inch setting system
• WPF uses double instead of float and supports a wider array of colors
• The WPF graphics engine is designed in such a way that it can take advantage of graphics hardware when available

Documents and Printing

WPF framework offers three types of documents:

• Fixed documents: This type of document supports WYSIWYG presentation.
• Flow documents: Allows you to adjust and reflow content based on run-time variables like window size and device resolution.
• XPS documents: It is a paginated representation of electronic paper in an XML- based format. XPS is an open source and cross-platform document format.

WPF enables better control over the print system. It includes remote printing and queues. Moreover, XPS documents can be printed directly without converting it into a print format.

WPF Architecture

WPF is a part of the .NET framework. It contains both managed and unmanaged code. The important components of WPF architecture are explained in the below-given figure:

Components of WPF architecture

• PresentationFramework: Helps you to create top-level elements like Controls, styles, layout, windows, etc.
• PresentationCore: It holds base types such as UIElement, Visual from all Controls and shapes are Derived in PresentationFramework.dll.
• CLR: It makes the development process productive by offering features like memory management, error handling, etc.
• Milcore: Milcore is a part of the unmanaged code which offers tight integration with DirectX.
• DirectX: It is the low-level API which allows rendering graphics of WPF. DirectX talks interact with drivers and render the content.
• User32: It is the is a core API which is widely used by many programs. It manages memory and process separation. User32 helps you to decides which element will be placed where on the screen.
• Kernel: Input originates as a signal on a kernel mode device driver and gets routed to the correct process and by connecting with Windows kernel and User32.

WPF Installation

Refer to this link to install WPF https://www.guru99.com/download-install-visual-studio.html

Next in this WPF application tutorial, we will build our first WPF.

How to Create your first WPF Application?

In this WPF example, we will develop a basic WPF application. So, let’s start the simple implementation by following the steps given in WPF application examples below.

Step 1) In Visual Studio Go to File > Project

Step 2) In the new project window

1. Select WPF App
2. Enter Name as “MyWPF”
3. Click OK

Step 3) Visual Studio creates two files by default

• XAML File (MainWindow.xaml)
• CS File (MainWindow.xaml.cs)

The MainWindow.xaml has

1. A Design Window
2. XAML File

In the XAML windows, the following tags are written be the default

The Grid is the first element by default.

The MainWindow.xaml.cs contains the corresponding code behind the XAML design file

Step 4) In toolbox,

1. Drag TextBox element to the design window
2. A TextBox will appear in the design window
3. You will see XAML code for TextBox added

Step 5) Change text to “First WPF Program.”

Step 6) Click the Start Button

Step 7) You will see a Window at Output

Congratulations! You have designed and created your first WPF application. Next in this WPF for beginners tutorial, we will see the difference between WPF and WinForms.

WPF vs. WinForms

WPF	WinForms
It’s a newer framework, so it is more in tune with current standards.	It’s older, so it is more tried and tested.
It’s flexible and features rich. You can design very rich applications without coding or buying controls.	Not so feature rich
Developers of 3rd party controls are focussed on compatibility with WPF as it’s the future.	There are many third-party controls that you can buy or get for free.
XAML allows you to create and edit your GUI easily. It allows the work to be split between a designer (XAML) and a programmer (C#, ASP.net, etc.).	In Windows Forms all the code written in one place.
WPF can create user interfaces for both Windows applications and web applications like Silverlight and XBAP.	No such support
WPF’s in-box control suite is limited	In-box controls are very powerful

Type of Applications built with WPF

• WPF is trying to replace webforms and windows forms – apps can be built to run in a browser or a standalone window
• Windows Forms and WPF pages can co-exist in the same application
• You can develop page/window applications

Quick Guide

• The WPF full form is Windows Presentation Foundation
• It is an ideal platform to use if you require to deal with various media types
• Windows 1.0 was the first GUI environment from Microsoft which was working on DOS and relying on the GDI and USER systems
• WPF in .NET offers Interoperability with Windows Forms controls
• WPF are divided into four different types like UIElement, FrameworkElement ContentElement & FrameworkContentElement
• The most important components of part of WPF architecture are PresentationFramework, PresentationCore, CLR, Milcore, DirectX, User32, and Kernel
• WPF is a newer framework compares WinForms, so it is more in tune with current standards
• Windows Forms and WPF pages can co-exist in the same application