Basic knowledge of WPF: Part 2

This article is an overview of WPF with topics on Layout and Control, Style, Templates, Text, Images, Video, Audio and Two-dimensional & Three-dimensional graphics.

Before reading this article, please go through the following article:

  1. Basic knowledge of WPF: Part 1

1. Overview of WPF

Like other components of the .Net Framework , WPF functions are organized in a group under the same namespace, the System.Windows namespace. Regardless of the function used, the basic structure of every WPF application is nearly the same. As a standalone Windows application or as an XBAP, a typical WPF application always consists of a set of XAML pages and the corresponding code in C# or Visual Basic, also known as the code-behind file. All applications are inherited from the standard WPF Application. This class provides common services for all applications, such as the storage and processing status of the application and the standard method to activate or end applications.

Although WPF provides a unified platform for creating user interfaces, WPF technologies can be split into independent components. WPF is the mechanism of generating vector-based graphics and resolution independence to take advantage of modern graphics hardware. WPF is set to expand with the application development features including XAML, controls, mechanisms and data links, layout, two-dimensional graphics, three-dimensional, cartoon, style, format template, writing, media , text and print. WPF is in the .NET Framework, so in addition, WPF applications can be combined with other components in the class library. NET Framework.

2. Layout and Control

To arrange the various components on the interface, use the panel WPF controls. Each panel can contain child components, including controls such as buttons and dialog boxes, or other panels themselves. The various options for panel arrangement allows the components to be arranged in various ways. For example, DockPanel allows the children to be placed along the edge of the panel, while Grid allows the placement of its components in a grid.

Like any technology user interface, WPF provides many controls. In addition, users can define custom controls as needed. The standard controls include Button, Label, TextBox, ListBox, Menu and Slider. More complex controls include SpellCheck and PasswordBox. The events generated by the user, such as moving the mouse or pressing, can grasp the control and treatment. While the controls and other interface elements can be fully specified in XAML, the event must be handled by the code.

3. Style and Template

Like using Cascading Style Sheets (CSS) for HTML, the attributes of the graphical interface objects need to be specified only once and then applied for the other objects of the same type, whis is often very convenient. WPF also provides similar functionality using components of XAML Style.

A Style can be derived from a different style, inheritance or overlap the attributes set. Each style can define the trigger that allows the creation of interactive special effects, such as when the cursor rolls over the button, the button turns yellow.


WPF also supports the use of templates. Each template is similar to a style, and in two forms:

  • Template for data: using the XAML DataTemplate components to establish a group of display attributes such as color data, alignment methods.
  • Template for control: the use of the ControlTemplate XAML to define the appearance of a control.

4. Text

The user interface is more or less text or display text. For most people, reading text on the screen is often harder than reading on paper. This is due to the quality of text displayed on the screen less than when printed on paper. WPF focus on solving this problem, since the quality of on-screen text displayed on the paper is equivalent. Specifically, WPF supports the OpenType font standard that allows the use of a font library. WPF also supports the new ClearType font technology that allows a smooth display of more characters of the eyes, especially on a Liquid Crystal Display (LCD).
To further enhance display quality text, WPF includes some other technology such as ligatures, in which a group of characters are replaced by a single image, that is psychologically more comfortable for the user to read.

5. FixedDocument and DocumentViewer

WPF supports three types of text: text fixed (fixed), adapting the text (flow / adaptive) and text XPS (XML Paper Specification). Together with that, WPF also provides the services to create, view, manage, note, pack and print documents. Fixed text looks unchanged regardless of whether they are displayed on the screen or to the printer.

In WPF, the document type is defined in the XAML element FixedDocument and the control is shown by the DocumentViewer. Meanwhile, adaptive texts usually only refers to text on the screen, and is capable of automatically changing the display properties for images and text to fit the window size or other environmental factors to improve the read quality for users. Text adaptation is defined by FlowDocument element. To display text adaptation, WPF uses a different control, such as FlowDocumentPageViewer, FlowDocumentScrollViewer and FlowDocumentReader.

6. Image

An Image Control can display images stored in many formats, including JPEG, BMP, TIFF, GIF and PNG. It can also display in Windows Media Photo format being used in Windows Vista. No matter what format, WPF uses the Windows Imaging Component (WIC) to create images. Along with the codec used for the image formats above, WIC also provides a common platform to complement other codecs.

7. Video and Audio

As the speed of processors and network communications on an advanced video became a big part of the user interaction with the software, users also use a lot of time listening to music and other audio files on your computer. Therefore, WPF provides support for both types of media through MediaElement element. This control can play the video formats WMV, MPEG and AVI, and many other audio formats.

8. Two-dimensional graphics

In the last 20 years, two-dimensional graphics were created based on the Windows Graphics Device Interface (GDI) and its later version GDI +. The Windows Forms application to use this functionality via a completely different namespace, Windows Forms by itself is not integrated 2D graphics. For 3D graphics, the more the worse, Windows Forms relies on technology as Direct3D are completely independent. With WPF, the problem becomes much simpler. Both graphics are 2D and 3D can be created directly in XAML or in code using WPF libraries respectively. For 2D graphics, WPF controls have a group of shapes that applications can use to create the image, including:

Line Drawing lines through two points.
Elllipse: draw ellipse.
Rectangle: Rectangle drawing.
Polygon: drawing polygons.
Polyline: open polygon drawing.
Path: draw a line under any.

Each frame has attributes that allow rich displays with various properties: background color and border color. An important feature of WPF is: since everything is built on a common platform, the combination and the characteristics of various objects, for example, a cage into a rectangular image, becomes simple. The interesting point is that the geometric objects can also receive events from the user as a control, such as the click event.

Additionally, WPF also provides other geometrical functional groups, called the geometries, to work with two-dimensional graphics, such as LineGeometry, RectangleGeometry, EllipseGeometry, and PathGeometry. This geometry has many properties and functions similar to the frame above. The most important difference is the geometries can not be used to show, they are mainly used to calculate the geometry, for example, to identify regions, click track position and such.
In addition, WPF offers Transform grade that allows implementation of geometric transformations such as rotation, shift, stretch graphic objects, or to allow the implementation of animation through time and a Timing Animation class.

9. Three-dimensional graphics

WPF supports a 3-D graphics package by calling the Direct3D API, and therefore, their use becomes more uniform and considerably simpler. To display three-dimensional graphics, WPF applications use the Viewport3D control. To create the three-dimensional scene, programmers describe one or more models, then define the lighting of this model or display. As usual, this is done in XAML, with code, or with both. To describe the model, WPF provides the GeometryModel3D class to create the shape of the model. Once the model has been shaped, its appearance can be controlled by the government to the material. For example, the class allows SpecularMaterial surface shading models.

No matter what the material is made from, a model can be illuminated in various ways. The DirectionalLight class allows light from a given direction, while the class AmbientLight creates a uniform light on everything in sight. Finally, a way to view the situation, the programmer must set up a camera. For example, PerspectiveCamera allows identification at a distance from the object location and type of perspective (complying near and far).