Top 10 features of Windows Presentation Foundation (WPF)

Introduction

Windows Presentation Foundation (WPF) is a means for the
programmer to create Windows applications possessing rich
user interfaces and graphics which the classic .NET Windows
applications lack. The initial version of WPF was released
as a part of .NET 3.0 and it was really like a preview of
WPF itself. The actual version of WPF was released as a part
of .NET Framework 3.5. Fig 1.0 shows the high-level
architecture of WPF.


Figure 1.0

1. Declarative Programming

WPF application paves the way for the developers to
define the thick client UI in a declarative way, which was
never supported by the traditional .NET windows forms. Tasks
like defining a template for a control, creating a control
hierarchy and similar work would be much easier if it is
done in a declarative fashion. In WPF declarative
programming was made possible with the introduction of
Extensible Application Markup Language (XAML). It can be
compared to the HTML part in a web user interface.

Below is the sample XAML code in a WPF Window.



<Window x_Class=”WpfSamples.WrapPanel”

xmlns_x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”WrapPanel” Height=”300″ Width=”300″>
<Grid Height=”44″>
</Grid>
</Window>


The UI declaration can be implemented within the Window
XAML tags in order to design a WPF window.

2. Independent of Screen Resolution

This is a neat feature of WPF. What I mean by
independency of screen resolution is, the WPF user interface
will look better even on a screen with low resolution. It
uses DirectX components where as the Windows Forms
applications make use of the User 32 components of a
machine. WPF framework has the Media Integration Layer (MIL)
in order to talk to the DirectX components. The direct
components impose a vector based graphics on the WPF user
interface. The below screen shot will show you the
difference between the Windows forms UI and WPF UI at lower
resolutions of the screen.

See the character ‘W’ in the image at lower resolution,
Windows Forms display looks a bit distorted and the vector
based WPF looks elegant.

3. Control inside a Control

WPF allows you to provide not only the text but it also
allows you to define a control as a content of another basic
control like a Button. This feature is truly astonishing
fact for the developers and this lets the world know, what
the power of WPF is when it comes to user interfaces. You
can have a TextBox inside a Button for example as shown in
Fig 1.1.


Fig 1.1

The XAML for the WPF window in Fig 1.1 is:


<Button Margin=”90,88,75,124″ Name=”ButtonWithTextBox”>
<TextBox Width=”75″>Enter Text</TextBox>
</Button>

4. Control Templates

What if the user wants to change the shape of a button,
this will definitely sound weird for .NET developers. Now it
can be done in WPF by defining the control template. For
example you can declare a Button on your WPF window and can
change its shape to elliptical. Fig 1.2 shows how the button
is displayed in an elliptical shape.

[ellipictal4.jpg]
Fig 1.2

The corresponding XAML code looks like:


<Button x_Name=”EllipticalButton” Margin=”30,12,45,0″ Content=”Elliptical Button”>
<Button.Template>
<ControlTemplate TargetType=”{x:Type Button}”>
<Grid>
<Ellipse Width=”100″ Height=”40″ Fill=”Yellow”/>
<ContentPresenter HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

5. Control Transforms

WPF contains a handful of 2D transforms which will enable
you to change the size, position, rotation angle and also
allows skewing. Control transforms can be performed in two
ways LayoutTransform and
RenderTransform.


  • Layout Transform – Transform is applied before the control is laid out on the form

  • RenderTransform – Transform is applied after the control is laid on the form

There are 5 kinds of transforms available


  1. Rotate Transform – It will rotate the controls to a specified angle

  2. Scale Transform – It enlarges or shrinks the controls in x and y axis

  3. Skew Transform – It slants the control

  4. Translate Transform – It moves the control based on x and y values

  5. Matrix Transform – It combines all the above transforms

Fig 1.4 shows how to Rotate, Scale and Skew transforms
are combined together.



Fig 1.3

The corresponding XAML code looks like:


<Button Width=”70″ Height=”50″>
<Button.RenderTransform>
<TransformGroup>
<RotateTransform Angle=”45″/>
<ScaleTransform ScaleX=”5″ ScaleY=”1″/>
<SkewTransform AngleX=”20″/>
</TransformGroup>
</Button.RenderTransform>
Transformed
</Button>

6. Availability of Different Layouts

Layouts are used in separating the controls on the UI
logically and also enable you to present them neat on the
window. WPF provides you a wide and powerful set of layout
controls. Some of the main layouts in WPF are:

Stack Panel:

A stack panel lays the child controls inside them either
horizontally or vertically based on the specified
Orientation. It is very much useful for managing small scale
aspects of the layout.

Wrap Panel:

A Wrap panel lays the child controls from left to right
and as the name suggests it goes to the new line once it
fills up the container width.

Dock Panel:

A Dock panel docks the child control either to Top,
Bottom, Right or to Left based on the Dock type specified.
This provides you with the docking functionality which you
get in Windows Forms Applications.

Grid:

A Grid layout allows you to create a table like structure
on the WPF window, it has rows and columns. It enables the
user to place the controls in the desired cell of the grid
layout.

Canvas:

A Canvas layout allows you to place the controls as you
desire. It allows you to take complete control of the layout
process.

7. 2D, 3D Graphics, animations and media

This is a vast topic in WPF, in my opinion these features
make WPF a much more unique technology which mixes both
controls and graphics to be tightly coupled. I will be
touching some key features under this topic.

More by Author

Must Read