An Overview of Windows Presentation Foundation By now you should have heard of several new acronyms that are usually associated with Windows Vista (codenamed Longhorn). These acronyms include WinFX, WinFS, WCF (Windows Communication Foundation; codenamed Indigo), and WPF (Windows Presentation Foundation; codenamed Avalon). In recent months there has been a lot of buzz going around WPF, which is one of the core components of WinFX. In this article, I will take you on a whirlwind tour of what WPF is and how you can start preparing for Vista by developing applications today using the available SDK. Why Windows Presentation Foundation? Windows Presentation Foundation (WPF) is the new graphics subsystem in Windows Vista that will enable developers to build applications that provide breakthrough user experiences. If you look at the applications in use today, they are either Windows applications or Web applications. While Windows applications offer immensely rich client functionality, deploying Windows applications requires considerable resources and makes maintenance a constant challenge. On the other hand, Web applications offers ease of deployment and maintenance, but do so at the expense of increased complexity in the development process (since the Web is stateless) as well as less-than-ideal platform integration. | " |
It is the goal of WPF to offer a development platform that offers the best of both worlds, allowing administrators to deploy and manage applications securely.
| " |
Microsoft’s goal when they created WPF was to offer a development platform that offers the best of both worlds, allowing administrators to deploy and manage applications securely. While application development technologies have evolved rapidly, hardware advances have also been moving at a rapid rate. In particular, the processing power of video cards has been improving at a much more rapid rate than developers can make use of. Increasingly, computers are equipped with an over-powered graphics subsystem that is under utilized. Applications could jolly well take advantage of the power of these graphics cards (such as for three-dimensional (3-D) processing) to enhance the user experience. And this is exactly the aim of WPF-that is, to take advantage of the under-utilized power of the video card and use it to enhance the user experience of Windows applications. WPF uses Direct3D for vector-based rendering, enabling applications to incorporate a wide assortment of media such as 2-D, 3-D, audio, text, video, animation, etc. Building User Interfaces Using XAML In WPF, Microsoft introduces a new language for creating WPF applications-XAML (Extensible Application Markup Language). Using XAML, developers can create UIs declaratively using XML elements and attributes. This provides for a clean separation of application logic and the UI of the application, allowing interface designers to use external tools (more on this later) to design the UI and then wire up with the code-behinds using .NET languages. XAMLPad To get developers started with XAML, Microsoft provides a useful tool known as XAMLPad. XAMLPad is a XAML editor that allows you to quickly preview your UI. To use XAMLPad, go to Start, choose Programs, choose Microsoft Windows SDK, then choose Tools, and finally choose XAMLPad. Figure 1 shows the various components in XAMLPad. 
Figure 1: The various components in XAMLPad.XAMLPad offers the following functions: - Auto Parse-The Preview Pane (7) will be updated as you type your XAML code in (8)
- Refresh-Refreshes the Preview Pane (7)
- Changes the font in the Code Edit Pane (8)
- Changes the font size in the Code Edit Pane (8)
- Hides the Code Edit Pane (8)
- Changes the scaling factor of the Preview Pane (7)
- Preview Pane
- Code Edit Pane
- Status bar
To see the XAMLPad in action, let’s populate the Edit Pane with some XAML code (see Listing 1). Figure 2 shows the resulting UI. Notice that the XAML code looks like HTML as all UI controls are defined declaratively. 
Figure 2: Using XAMLPad to preview XAML code.XAML supports a few layout patterns for UI controls, and the one just shown uses the Canvas layout. The Canvas layout pattern is similar to what you have today in Windows Forms. The controls in a Canvas layout are positioned using the x and y-coorindates. The Canvas layout is useful in cases where you need to precisely position the various controls on the UI. You may have noticed that in the Canvas element there is a LayoutTransform attribute. This attribute allows you to scale the output by simply specifying the scale factor. For example, if you specify a factor of 0.5 (LayoutTransform="scale 0.5"), then the entire Canvas layout would shrink by 50% (see Figure 3). 
Figure 3: Using LayoutTransform to shrink the output. | & | | 
By: Wei-Meng Lee
Wei-Meng Lee is a technologist and founder of Developer Learning Solutions (http://www.learn2develop.net), a technology company specializing in hands-on training on the latest Microsoft technologies.
Wei-Meng speaks regularly at international conferences and is the author of ASP.NET 2.0: A Developer’s Notebook and Visual Basic 2005 Jumpstart (both from O'Reilly Media, Inc).
Wei-Meng is currently a Microsoft Device Application Development MVP.
Contact Wei-Meng at weimenglee@learn2develop.net.
| Fast Facts | | In the current version of Visual Studio 2005 (Release Candidate at the time of writing), there is no visual designer for WPF applications. That is to say, you cannot drag and drop controls from the Toolbox onto the design surface of a WPF application. You have to manually code using XAML (see Figure 9). However, it is expected that in the near future Microsoft will provide a visual designer for WPF applications. | |
|