WPF Tutorial for Beginners

Introduction to Windows Presentation Foundation

WPF is the abbreviation of the Windows Presentation Foundation. The main goal behind the development of the WPF Framework that the user able to build a rich user interface. User Interface may consist of 3D, theme, animations, vibrant color with low complexity. WPF produces a user-friendly graphical display system for windows.

WPF separates the business logic and user interface. Gradual development in the WinForm produces WPF.

What is WPF?

WPF is a new framework introduced with ‘.Net Framework 3.0′, which allows the user to write programs more efficiently and flexible.

In the case of traditional ‘Graphical Device Interface,’ i.e., GDI form application, not possible to use advanced graphics capabilities. Therefore, the windows application always be inefficient in comparison with WPF.

for building the WPF application, GDI windows form application uses the controls of the operating system.  Becomes very difficult to customize into your application. Whereas WPF controls placed on the screen, it becomes easy to customize them into your application also you can modify the behavior.

Why WPF Is Better Than WinForms in .NET

There is a list of several reasons to choose the WPF Framework:

  • If you need to deal with different media types, WPF is the best choice.
  • You can create a skinned user interface.
  • WPF helps to bind the XML data and to load the portion of the User interface.
  • You can take advantage of the .net class library.
  • The developed application can run on mobile devices or laptop because of resolution independence quality.
  • WPF builds on DirectX instead of WinAPI.
  • WPF offers the graphics system present on the client machine to use. Graphics card increases the performance of the application.
  • WPF supports the flow documentation model. Flow documentation allows using quality of the layout such as ‘Desktop publishing.’
  • The application’s appearance and behavior, loosely coupled so that the designer and the developer can work on different modules.
  • In the WPF framework, you can design the graphical tools in the simple XML document.
  • You can use the hardware for increasing the speed while creating a graphical user interface. That results in better performance.

History of WPF

  • First release of WPF version 3.0 (.NET 3.0) released in 2006. WPF application can do using Visual Studio 5.
  • The second release of WPF version 3.5, i.e…Net3.5 released in 2007. In this version of WPF modifications done in bindings, controls, document, 3D UIElement, application models and annotations.
  • The third release of WPF version 3.5sp1 released in 2008. This version added the DirectX pixel shader support and native splash screen support.
  • Next release of WPF version 4.0 released in 2010. This version comes up with some additional features like Multi-touch manipulation, Calendar, Data grid, date Picker.
  • Next release WPF 4.6 released in 2015. New features transparent child window support HDPI and touch improvements.

WPF Core types and infrastructure

Let us see the WPF Core Classes and it infrastructures elements in detail:

WPF Classes

WPF classes divided into four types.

  1. UIElement
  2. FrameworkElement
  3. ContentElement
  4. FrameworkContentElement

These classes called ‘Base Element classes.’ Base element classes offer a model for composing the user interfaces.

WPF Infrastructures

Following are the essential elements of WPF infrastructures:

  1. XAML
  2. Control
  3. Appearance
  4. Layout and Panels
  5. Graphics
  6. Document and printing

Let us see these infrastructure elements one by one:

  1. XAML: XAML stands for Extensible Application Markup Language. ‘Zammel’ is another name to XAML. It is a declarative way to create User interfaces.                    Example: Let us take a XAML code in which we displayed ‘Button’ prompting a message on it.

<Button>

FontSize = “20”

HorizontalAlignment = “Bottom”

VerticalAlignment = “Bottom”>

“Click on Tutorials n Examples” </Button>

Advantages of XAML

  • XAML separates the design and logic of the application.
  • Easily represent user interface using XAML.
  • XAML works efficiently with tools.

2. Controls: WPF framework supports many controls. Editing controls, List controls, user information controls, Action controls, appearance controls, container controls, command dialog box controls, Layout controls, and navigational controls are types of controls present in WPF.

Editing Controls: TextBox, CheckBox, and RadioButton.

List Controls:ListBox, ListView, and TreeView.

User Information Controls: Label, ProgressBar, and ToolTip.

Appearance Controls: Border, Image, and Viewbox.

Action Controls: Menu, Button, and ToolBar.

Command Dialog Box Controls: OpenFileDialog and PrintDialog.

Container Controls: TabControl, ScrollBar, and GroupBox.

Layout Controls: DocPanel, StackPanel, and Grid.

Navigation Controls: Frame and Hyperlink.

3. Appearance: WPF supports creating objects for elements like fonts, background, colors, etc. Style control allows you to apply it on a complete application. Data templates used to control default visualization.

4. Layout and Panels: Layout and panels provide the exact positioning and sizing of the controls. It plays a vital role in the ‘process of composing presentation.’

Classes provided by Layout infrastructure:

  • DockPanel
  • WrapPanel
  • StackPanel
  • Grid
  • Canvas

5. Graphics: WPF provides improved graphics such as:

Each pixel is device independent. Each element automatically scales as per the DPI setting. It uses ‘Double’ instead of ‘Float.’

6. Document and Printing: It provides better control over printing. It offers remote printing and queue facilities. Documents have three types as a fixed document, flow document, and XPS document.

Overview of Windows Presentation Foundation (WPF) Architecture

WPF architecture is a multilayered architecture. The architecture of WPF classified into three layers.

  1. Managed Layer
  2. Unmanaged Layer
  3. API Core Layer

Following diagram shows the architecture of the Windows Presentation Layer.

WPF Architecture

 

 

 

 

 

 

 

 

 

 

 

 

1. Managed Layer

A managed layer of the WPF Framework contains a Presentation framework and Presentation core. Presentation framework and presentation core, part of .NET Framework. Presentation Framework and core is written in ‘Managed code,’ hence this layer called as Managed Layer.

CLR itself manages all the managed code.

PresentationFramework.dll, PresentationCode.dll, and windowsBase.dll present in the Managed Layer.

  • PresentationFramework.dll

PresentationFramework.dll consists of all the classes required to generate the WPF user interface. The PresentationFramework.dll file encapsulates styling, shapes, media, controls, documents animation and more together.

  • PresentationCode.dll

PresentationCode.dll is a low-level API and act as cover for MILCore. Besides, it provides the interface for MIL. It offers features like geometry, 2D, 3D.

The visual system creates a visual tree.

The visual tree has the applications of optical/ visual elements.  PresentationCode.dll provides classes for generating a visual application tree.

  • WindowBase.dll 

WindowBase.dll is one of the most essential and necessary files, which provides dependency-Property, dependency-object, Dispatcher-object and dispatcher-time.

2. Unmanaged Layer

The Unmanaged layer has two parts as

  • MilCore

MilCore is the Media integration Library. It is part of the unmanaged layer. It allows the tight integration with DirectX. All the graphical and animation related controls done by DirectX.

  • WindowsCodecs

It provides image support for WPF applications. WindowsCodecs handles the task such as Image display, scaling image, transforming the image and processing the image.

3. API Core Layer

This layer has OS core components such as kernel, graphics card, GDI, USER32. To access the low-level API, the application uses these components.

  • DirectX

It is a low-level API, and it provides all the capabilities regarding graphics and animation.

  • USER32

It manages memory and separates the processes.

It decides which element present at which position.

It is the primary API for WPF application.

  • CLR

CLR stands for common language Runtime. WPF leverages the .NET framework and executes on CLR.

  • GDI

GDI is a graphic Device Interface. It provides the expanded set of graphics primitives to the application.

  • Device Drivers

Device drivers are specific to each operating system as per their specification. The device driver provides an interface between the operating system and hardware devices.

Top Features Of Windows Presentation Foundation (WPF)

WPF provides a lot of features. Following is the list of some essential features:

  1. Device independent pixel
  2. Built-in support for graphics and animation
  3. Redefine styles and control templates
  4. Resource-based approach for every control
  5. New property system and binding capabilities
  6. Documents and Printing
  7. Security, Localization, and Accessibility
  8. Interoperability

Let see the features of WPF Explain one by one.

1. Device independent pixel

DPI, i.e. ‘dots per inch’ plays a crucial role in gaming, printing and screen resolution (to display on screen). It becomes necessary to calculate the DPI or to know how many dots per inch (DPI) screen could draw for windows system. Usually, the count of DPI (how many dots per inch) the system could build is dependent on the hardware and OS in which the application runs. Besides, the DPI setting applied to that machine/ device. The user can easily customize a DPI setting and result in this application does not look good.

In the pixel-based approach, every control present in that application changes its size and looks when DPI setting changes.  Windows form application uses a pixel-based approach.

To overcome this drawback of the pixel-based approach, WPF makes the component/ controls independent of the DPI setting of the computer. Let us understand this through an example.

Windows Form WPF

 

 

 

 

 

 

 

 

 

 

 

Let us see the diagram carefully, in the windows application when we change the DPI setting, size of the element (square) changed. The first form has a 96 dpi setting and the second has a 120 dpi setting. It is clear that in a pixel-based approach when the user changes the dpi setting it affects the size and looks of the elements present in the application form.

Whereas in the case of WPF, it uses a density-based approach. In the density based approach, when the density of pixel modified, then the elements adjust them accordingly without affecting the size and looks. Hence, the pixel in the WPF application is not device dependent.

2. Built-in support for graphics and animation

Microsoft DirectX Environment is a collection of API’s, which handles the multimedia related task. WPF applications embedded in the DirectX environment. Result to that, WPF adapts graphics and animation capabilities. DirectX has a separate set of API’s, which deals with graphics and animation effects. Graphics provided by DirectX is object-oriented and vector based. For example, when you draw an element like a circle in your WPF application, then you can easily remove it from the screen. As WPF application adapt the object-oriented concepts, it treats the elements as a separate object.

In the case of a traditional windows application, once you draw a rectangle or any element, you are not able to select that element individually. Thus, WPF has a very sophisticated and different programming approach from the traditional graphic approach.

3. Redefine Styles and Control Templates

WPF has massive flexibility in defining styles and control templates. CSS as the style- based technique is a set of definitions, which describes how the elements looked like when they placed on the screen.

In the case of a traditional windows application, style is the property tightly coupled with each control/ element.Therefore, for each component or control need to define color, size, and style separately to make it different.

In the case of WPF, styles separated from user interface elements. After defining style, you can set or change the look and feel of the control (UIelement) by putting style on that element.

WPF introduces the concept of ‘Templates.’ You can redefine the control using Templates. For example, suppose you have Checkbox containing a rectangle with a content-Presenter, i.e. textbox. Thus, you can redefine a checkbox holding a toggle button. Therefore, the checkbox will appear as a toggle button instead of a rectangle.

4. Resource-based approach for every control

In a traditional based approach, defining the style is a very hectic job. If you have, a thousand buttons and want to apply color property on them. For that, you need to create 1000 objects of color. Moreover, assign each object of color to each element, i.e. button.

In the case of WPF, you can store animations, colors, styles or object as a resource. When the form loads itself, then each resource will, and you may associate those resources with UI element. Resource-Directory is a file in which you can maintain a hierarchy of styles. With the help of Resource-Directory, you can style the whole application.

5. New property system and binding capabilities

WPF introduced with the new property system. Each element defines a large number of dependency properties. Dependency properties have strong skills than standard features.

6. Document and Printing

WPF Framework provides three types of documents such as a fixed document, flow document, and XPS document.

Fixed documents: This type of fixed documents supports the WYSIWYG presentation.

Flow document: Allow you to adjust and content based on variables such as window size and device resolution.

XPS document:  XPS document is a paginated representation of electronic paper in XML based format.

7. Security, Localization, and Accessibility

WPF Framework provides protection, Localization, and accessibility very smoothly.

8. Interoperability

WPF Framework offers the interoperability with windows form controls.
 
Reference:
https://www.tutorialspoint.com/wpf/wpf_overview.htm