Top 10 UI Development Breakthroughs in Windows Presentation Foundation

The graphics system that is used currently in the Win32 subsystems is constrained whereas the graphics system in the Windows Presentation Foundation is based on the .Net Framework. Hence it considers the latest technologies and the latest hardware available. There are many improvements in the User Interface that is achieved by the WPF. Some of them are discussed in this article.

Declarative programming is defining what we want instead of defining how. Example for declarative programming is SQL statements. In SQL statement we define what data we want, and the database engine take care of how to fetch the data.

It is easy to write code in declarative programming. The maintenance of programs with declaration statement is easier, because the intent of the code is clear to understand. The length of the code becomes less.

Below is the sample code for declaring grid for UI

<Grid.ColumnDefintions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefintions>

<Grid.RowDefintions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefintions>

The above code says what we what. It declares grid elements of 2 rows and 2 columns. And they set the properties of width and height.

In WPF the UI elements are defined using XAML language. It is straight forward to express these behaviors in XAML.

Trigger

Trigger provides a mechanism for acting upon events. The action and event can be declaratively specified in WPF using XAML.

Below is an example of trigger, which specify how a button should react when the mouse is brought over it.

<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>

Style

Style is nothing but a named set of attributes and values. This can be applied to any elements in the UI like buttons, templates etc. Style provides useful mechanism for setting look and feel of controls, without affecting control's structure or behavior.

In the previous example a style can be set for a button, when a mouse was moved over button.

The style can be stored in resource file and can be applied individual or all controls of particular type.

Data driven UI

The main advantage of WPF is that most controls can contain any type of contents. For example button controls can have panel, which intern include visual objects like ellipse and/or buttons.

This is achieved by a mechanism called Data Template. It tells the WPF, how to display an object.

Data template can be set for particular control or set for a context, in this case all the controls which uses a particular type of objects uses that template to form the display.

Lookless control

In the current windows GUI technologies, each control have to of particular shape and border, but in WPF this is not the case. Most of the controls do not have any shape attached to it. They attach to shape defined externally in a template.

So in designing GUI, we should think about functionality to be achieved, and accordingly we have to select controls.

Flexible content model

In WPF, most of the controls can display anything in the content area. There is no restriction that is should be only text or bitmap.

For example, a button control can display a panel with shape objects like ellipse. If we use current technologies, then we need to override draw method with lot of effort.
In WPF, this kind designing controls can be done by designers, after getting requirement from the programmer.

Adaptable UI Layout

Layout comes to picture, when the developer doesn't know the size the application window. One user may run the application with window maximized and another can title more number of windows. In these case the controls inside the application window should readjust them self for maximum usability/easiness.

There are different kinds of layout available, like flow layout, grid layout etc. The mostly used and powerful layout is grid layout. In WPF developer can use existing layout or they can define their own. Mechanism available for adaptive layout are docking and anchoring.

Rich Fonts for Texts

The WPF support rich text formatting. A control text can have characters of different fonts. A word documents can embed controls in between the characters.

The below example shows the method of formatting a text using XAML

<TextBlock FontFamily="Calibri" FontSize="11pt">
Hello, <Bold>world!</Bold>
<Span FontFamily="Old English Text MT"
FontSize="24pt">This</Span>
is a
<Italic>single</Italic>
<Span FontFamily="Consolas" Foreground="Blue">
&lt;<Span Foreground="DarkRed">TextBlock</Span>/&gt;
</Span>
<Hyperlink>element</Hyperlink>.
</TextBlock>

Drawing object Model

In the previous version of Windows Technology, drawing a control is set of operation. In WPF, it is collection of object. The controls contain collection of elements like line and circle. When you change a property of an object, it automatically get reflected in the screen. There is no need to call redraw or invalidate methods explicitly.

This approach is much easier than the previous approaches, which uses USER32 and GDI+.

Advanced Graphics

Other new features of WPF are:

1. Enhanced drawing capabilities
The WPF allows modifying the opacity of any content.

2. Fewer control constraints
The controls can be drawn transparent. It is possible to visualize the control beneath a control because in WPF all controls are drawn one above the other, so each pixel is drawn multiple times, so that is possible have the effect of 3 dimensions.

3. Resolution independent
It is possible to scale the Graphics objects in side an application window as a whole. It is advantageous, when you consider developing an application, which should work for large dpi screens and as well as for small dpi screen.

4. Built in Animation and Video
The Graphics objects can define animation as a property. A button can be moved from one position to another position using animation effect, with simple declaration in XAML

For example, an animation effect like 'move the button from top right corner to bottom left corner within 4 seconds' are easier to define.

With these advances in the graphics system and by taking advantage of the available classes in the Windows Presentation Foundation you can build rich Windows Presentation Framework applications.