Most graphics nowadays are pixel-based. Every point in the graphic is represented by one pixel. This is a really good solution for most scenarios, including digital photography (where you really want to maintain every single piece of information the camera is “seeing”), but there are shortcomings too. For instance, have a look at Figure 2-1, where you see some simple text created in Microsoft Paint. This text is pixel-based. In Figure 2-2, you see the same text, but this time the image width and height have been enlarged. Do you see the stairway effect that appears along the edge of each letter? So, when you make a pixel-based image larger, you lose quality.
That’s obvious, of course. Imagine that a 100×100 pixel image is resized to 200×200 pixels. Instead of 10,000 pixels, we now have 40,000 pixels. So, where we had a 1×1 pixel in the original image, we now have 2×2 pixels. Paint is using a very simple algorithm to resize images: if the graphic becomes larger, just clone the pixels. This then creates the stairway effect.
Note
Professional software such as Adobe Photoshop comes with several sophisticated algorithms to make the quality loss less severe when resizing images (especially when making them smaller); however, there still is a notable effect when increasing an image’s dimensions.
There is an alternative approach: vector-based images. In a vector-based image, every element is represented as a geometrical object—for example, a line, a circle, a polygon, or a curve, just to name a few. The main advantage is that there is no quality loss when resizing an image: a circle changes its diameter, but that’s all. There is no stairway effect, since a circle is still a circle and not, as with a pixel image, a set of pixels ordered in a circular fashion.
Obviously, not every image can be represented as vectors. Think again of photos—it is theoretically possible to try to find geometrical elements and patterns in a portrait or a landscape (there are even algorithms for that!), but it is virtually impossible to create an exact representation of a photo by just using vectors. However, in computing there are several areas where vectors make real sense. One such area is fonts. See Figure 2-3 for a typical Windows font (coincidentally the same font used in figures 2-1 and 2-2). Most fonts are vectors, so there is no quality difference whether you use them in 8pt, 10pt, 12pt, or 100pt. If you type a letter in a word processor and then change the font size to something really large, you still get smooth edges. Once you paste text into pixel-based imaging software such as Paint, you lose the vector information and are back to pixels.
Another area prone to vector representation is the user interface (UI). The standardized UIs of an application are, most of the time, vector-compatible. Most of them need to be resizable, so the content can remain intact if the user changes the width or the height of a window. However, in reality, very few UIs have been based on vectors.
Some time ago, the folks at Microsoft sat down and designed the next generation of UI technology for the Vista operating system. The system would be vector-based and use XML. The final system is called Windows Presentation Foundation (WPF).
WPF is an integral part of all .NET Framework versions beginning with version 3.0, which is installed by default on Windows Vista and is an additional download for Windows XP and Windows 2003. Other parts of .NET 3.0 include:
WPF applications either run in the browser or as standalone desktop applications. Both scenarios require that .NET Framework 3.0 or higher is available. Currently, most WPF applications are standalone because Vista does not have a high market penetration, limiting the number of PCs on which WPF can run, and because .NET 3.0 is a sizeable download. This is a key reason for why Microsoft created Silverlight, a similar technology targeted at the browser world. Let’s take a closer look at WPF for more background information.
The main focus of WPF is in vector graphics, but pixelated graphics are supported as well. WPF also supports multimedia content in forms of audio and video data. One of the highlight features is the support for text, which includes some typographical specialties such as justified text, kerning, and ligatures.
It is certainly no surprise that most WPF coding is done using .NET languages such as C# and Visual Basic. The .NET Framework—or to be exact, the CLR (Common Language Runtime)—defines every possible type of element in a WPF application and enables a good development experience in Visual Studio (think IntelliSense) and rapid prototyping.
Already, several WPF prototype applications, including several “virtual newspapers,” are available that showcase text flow, such as the Forbes.com reader (see Figure 2-4; download it at http://www.forbes.com/partners/microsoft/newsreader/). The next version of Yahoo! Messenger will also feature a slick WPF interface.
But didn’t the previous section just mention that the WPF content is created using XML? Indeed, there is a special format (or XML dialect) for that purpose: XAML (eXtensible Application Markup Language). XAML is the UI markup used in WPF applications. The WPF runtime then interprets this markup, displays the UI, and also integrates the additional business logic code (which is, as aforementioned, written in a .NET language such as C# or VB).
Microsoft also provides several tools for developing XAML content. You can use Visual Studio, but for a more visual experience, Expression Blend 2 (part of the Microsoft Expression Suite) is a better option. The .NET Framework 3.0 SDK also contains an application called XAMLPad that features a split view. You see both XAML markup and the actual WYSIWYG appearance of the code at the same time. Figure 2-5 shows XAMLPad in action.
Also, the API access to XAML offers more than XAML itself, so to get the most out of XAML, you need to familiarize yourself with both markup and code.
When creating Silverlight content, some basic WPF knowledge is beneficial as it helps you to better understand Silverlight concepts; however, WPF or .NET 3.0/3.5 is not required to view Silverlight content. Still, you should also familiarize yourself with XAML, because Silverlight also uses a subset of XAML to create the UI. Part 2 of this book and especially Chapter 5 will introduce you to the most important XAML elements that are supported by Silverlight.
In Chapter 3, you see how to set up a development environment for Silverlight applications, and create your first one.
- Programming WPF by Chris Sells and Ian Griffiths (O’Reilly)