WPF Overview and Features

WPF (Windows Presentation Foundation) is next generation Microsoft Platform for creating Rich client/desktop application. WPF was first introduced in .net  framework 3.0

WPF is successor to Windows Forms for creating desktop applications. However WPF has introduced major features compared to windows forms.

Below diagram shows WPF features in a nutshell.

In this article we will look at below 3 features of WPF while remaining ones will have their detailed posts.

1. New Graphics System
2. Clear Separation of Concerns
3. Resolution Independent

1.  New Graphics System
Windows forms relied on 2 Windows components for rendering graphical user interface.
User32: Provides looks and feel similar to windows elements (buttons, textbox etc..).
GDI/GDI+: Provides drawing support for rendering shapes, images etc. but involved additional complexity.

These components has their own limitations.
Consider an example of creating a round glossy button or a button with gradient effect. Creating such button be require lot painting and would be hard to create.

WPF and DirectX
WPF does not rely on Windows API for rendering controls. Instead, WPF uses DirectX as underlying technology for rendering graphics. DirectX technology that has been used so far for developing gaming application with 3D graphics will now be used for developed business application using WPF. Hence is possible to create a rich client application that has 2D and 3D graphics.

Moreover each WPF control is rendered using borders, stokes, background fill, text etc. Hence WPF provides better control over what is renders and provides more flexibility of customization.

Hardware Acceleration
DirectX redirects the task of rendering graphics to Graphics Processing Unit, a dedicated processor in Video Card. Thereby CPU can be utilized for other tasks and application can take benefit of graphics capabilities of latest video card.

Comparison of graphical display system in both technologies

2. Separation of Concerns
WPF provides clear separation between user interface design and application logic. User interface is designed using XAML, an separate XML based programming language. XAML can be created in Visual Studio or Expression Blend, an excellent tool for creating XAML based UI. Expression Blend is tool which is used by designers to create stunning WPF UI. Visual Studio is used by developers to write application logic using any CLR complaint languages like C#, VB.net etc. Moreover Expression Blend and Visual Studio can share same project. Hence designer and developed can work independently but in an integrated fashion.

Below is the screenshot of how UI code and application logic were tightly integrated in windows forms. Adding any control on the form or attaching an control event would create automatically generated C# code in code behind file. Hence there was a tight coupling between Form Designer and Code behind. Moreover primary tool for creating UI in windows forms UI was Visual Studio.

Whereas WPF provides as clear separation of XAML code and application logic as shown in below figure.

In above screen, Same project is opened in Visual Studio and Expression Blend. Initially, UI (XAML) and application logic are created using Visual Studio. Then after, XAML is modified in Expression Blend to apply linear gradient effect to button which can be done graphically and more easily in Expression Blend. This way designers and developers can work independently and can use the power of different tools to create rich application.

MVVM (Model, View, ViewModel) design pattern when used with WPF enables creating application with better separation of concerns and test driven development.

3. Resolution Independence
When we think of resolution independence, natural thought that comes to our mind is viewing an application under different resolution. WPF resolution independence has somewhat different perspective. WPF resolution independence means that an application when viewed in monitors with different size (12, 14, 15, 17, 20 inch monitor) and different pixel densities / dpi (dots/pixel per inch) should be displayed in same size (in inches).
Let’s first understand the concept of pixel densities and problem associated with that.

Pixel Densities
Pixel Densities is measured as number of pixel/dots per inch. Pixel Densities is knows as PPI or DPI. Pixel densities are calculated using screen resolution and monitor physical size. Higher the pixel density, better is the clarity.

Pixel Densities calculation for Laptop LCD Monitor
Resolution (in pixel): 1366 * 768 (width * height)
Screen Size (in inch):  15.5 inch diagonal. (13.5 inch width * 7.6 inch height).
Diagonal resolution: square root of [ (width x width) + (height x height) ]
                                  : square root of  [ (1366 * 1366) + (768 * 768) ]
                                  : 2455780 pixel
Pixel Density: 2455780/15.5 = 101.1 pixel per inch.
Nowadays we can find monitors, tablets and Smartphone's that have higher pixel densities of 120 dpi, 144 dpi, 200, 300 or even 400 dpi. In future we can expect LCD monitor upgraded with higher resolution and higher pixel densities. iPad2 and iPad3 are same size 9 inch. But iPad3 has 2048 * 1536 retina display resolution and iPad2 has 1024 * 768 resolution. Hence iPad3 has almost double pixel density than iPad2.

Problem
Let’s take an example of traditional pixel based application with 600 pixel width.
Laptop LCD Monitor with Pixel Density of 101 dpi would display this application in approx. 6 Inch (600/101) physical size/area.
But Advanced LCD or tablet with Pixel Density of 200 dpi would display this application in approx. 3 Inch (600/200) physical size. Hence application would be displayed smaller than original designed. We would expect that application would retain the size and take advantage of higher pixel densities to display sharper and better application.

Solution
WPF solved this problem by introducing new concept called device independent units. WPF controls size is specified using device independent units instead of pixel.
1 physical unit = 1 device independent unit * standard system dpi = 1/96 inch * 96 dpi = 1 pixel

Now we consider WPF application that is 600 device independent units in width.
Above mentioned Laptop LCD Monitor
Pixel Density: 101 pixel per inch.
Application size in device independent units: 600
Application size in pixel: 600 * (1/96 * 101) = 631.25 = 632
Application size in inch: 632/101 = 6.25 inch

Advanced LCD or tablet
Pixel Density: 200 pixel per inch.
Application size in device independent units: 600
Application size in pixel: 600 * (1/96 * 200) = 1250
Application size in inch: 1250/200 = 6.25 inch

As we can see from the calculation that In both LCD, physical application size remains same. Hence application would be displayed using same physical size even thought pixel densities are different. Hence application would look similar in both LCD. Only difference would be that application displayed in Advanced LCD or tablet would be sharper and better than normal LCD monitor.

I hope this post would give you a good start in understanding WPF. Keep watching this space for more such posts on WPF.

 

Technorati Tags: WPF,WPF overview,WPF features,DirextX,Hardware Acceleration,clear seperation of concerns,resolution independant

IceRocket Tags: WPF,WPF overview,WPF features,DirextX,Hardware Acceleration,clear seperation of concerns,resolution independant