indows 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.

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.

Installation Procedures
You can try WPF today on Windows XP or Windows Server 2003. To do so, you need to download install the following components:

1. Download and install the WinFX SDK. The download contains documentation, samples, and tools designed to help you develop managed applications and libraries using WinFX.
2. Install the WinFX Runtime Components. This download contains the WinFX Runtime components necessary to run WPF applications.
3. Install the Visual Studio Extensions for WinFX. This download provides IntelliSense support, project templates, and documentation integration for WinFX in Visual Studio 2005.

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 them up with the code-behind files using .NET languages.

Using 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?>Programs?> 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:

1. Auto Parse?The Preview Pane (7) will be updated as you type your XAML code in (8)
2. Refresh?Refreshes the Preview Pane (7)
3. Changes the font in the Code Edit Pane (8)
4. Changes the font size in the Code Edit Pane (8)
5. Hides the Code Edit Pane (8)
6. Changes the scaling factor of the Preview Pane (7)
7. Preview Pane
8. Code Edit Pane
9. Status bar

To see XAMLPad in action, let’s populate the Edit Pane with the XAML code shown below.

           Image Source
?
Figure 2: Using XAMLPad to preview XAML code.
            OK                  

Figure 2 shows the resulting UI. Notice that the XAML code looks like HTML as all UI controls are defined declaratively.

XAML Layout Patterns
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 coordinates. 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 percent (see Figure 3).

	?
Figure 3: Using LayoutTransform to shrink the output.

Layouts
Besides the Canvas layout, there are a few other layouts available in XAML. They are:

• StackPanel
• DockPanel
• Grid

I’ll now describe the various layouts.

StackPanel
A StackPanel layout positions controls like they are on a stack. You can stack controls vertically or horizontally. The XAML code below shows how the StackPanel works.

              Image Source      OK      
?
Figure 4: Using the StackPanel layout.
                     

Figure 4 shows the output of the XAML code above.

DockPanel
A DockPanel layout docks controls on either one of the four sides (Top, Left, Right, or Bottom) of a DockPanel control. The XAML code in below shows how to dock four Button controls using the DockPanel.Dock attribute.

	?
Figure 5: Using the DockPanel layout.

      Left   Right   Top   Bottom            
?
Figure 6: Using Grid layout.
      

Figure 5 shows the output of the preceding code.

Grid
The Grid layout allows controls to be positioned in cells, just like in a grid. The XAML code in Listing 1 shows how to define a grid with three columns and four rows, and then add twelve Button controls to each cell within the grid. Figure 6 shows the output for the XAML code shown above.

Building WPF Applications with VS 2005
Even though Windows Vista is not slated for release until the end of 2006, you can start developing WPF applications today using Visual Studio 2005.

Project Types

	?
Figure 7: The three Avalon application templates.

Once you have installed all the prerequisites for WPF, you can develop WPF applications using Visual Studio 2005. To develop WPF applications, from the File menu choose New and then choose “Project….” Under the Avalon project type, you should see the three Visual Studio installed templates?Avalon Application, Avalon Web Browser Application, and Avalon Control Library (see Figure 7).

The Avalon Application template is similar to the standalone Windows application that you are familiar with today.

The Avalon Web Browser application is hosted within a Web browser. This type of Avalon application is well-suited for scenarios where you would want to refrain from deploying additional components to the client. As such, it runs within the context of a partial-trust sandbox. An Avalon Web Browser application runs entirely within the browser and uses pages instead of windows for navigation.

You can use the Avalon Control Library to create user controls that can be used by other Avalon applications.

	?
Figure 8. Writing XAML: The figure shows some XAML in the Visual Studio editor.

Programmatically Generating the WPF UI
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 8). However, it is expected that in the near future Microsoft will provide a visual designer for WPF applications.

Earlier on, you saw how to use XAML to create the UI of a WPF application. It is important to know that XAML is not the only way to create WPF applications. In fact, at compile time, all the XAML elements are compiled into a partial class (a new language feature in .NET 2.0, for both C# and Visual Basic 2005) and combined

	?
Figure 9: Application Output: The compiled application running in a browser.

with the partial classes containing the application logic. Thus, instead of declaratively creating the UI of a WPF application using XAML, you can also programmatically create it using code.

I’ll now show you how to write a WPF UI using code. Create a new Avalon Windows application and in the code-behind file of the default Window1.xaml (Window1.xaml.vb), add the event handler shown in Listing 2.

When you compile and execute the application, your output will look like Figure 9.

2D Graphics
As mentioned in the beginning of this article, graphics is one of the strengths of WPF. The code example in Listing 3 shows how you can draw 2-D graphics using one of the many graphics elements available in WPF.

In the above code, three rectangles are drawn using the Rectangle element. Each rectangle is filled with a color and bound to a Slider control. When each slider moves, the height of the corresponding rectangle changes and the value of the slider is displayed next to it (see Figure 10).

	?
Figure 10: 2-D drawings.

Besides filling a rectangle with a solid color, you can also fill it with shades using a brush. For example, this code fills the first rectangle with the colors Lavender and Blue using the VerticalGradient fill method.

         ?Figure 11: Applying gradient fills to the rectangles.     Width="50"     Height="{Binding ElementName=slider3, Path=Value}"     Canvas.Left="110"     Canvas.Bottom="325" >                                                                   

In the preceding code, the second rectangle is filled with the colors Lavender and Yellow using the HorizontalGradient fill method. The third rectangle allows you to specify the various offsets to be used for the gradient fill. Figure 11 shows the effect of the various gradients fills.

	?
Figure 12: Microsoft Expression Interactive Designer.

3-D Graphics
3-D graphics is the main highlight of WPF. While it is possible to create 3-D graphics by hand using XAML, it is too mundane a task to do. Instead, Microsoft is readying a new set of tools that will greatly simplify the task of creating XAML content.

Microsoft Expression Interactive Designer (codenamed Sparkle), a member of the Microsoft Expression family of professional design tools, allows application developers to create exciting user interface designs using a full spectrum of media types, including vectors, pixel images, 3-D content, video and audio, high quality text, and animation (see Figure 12).

Tools, Imaging, and Data Binding
As I’m writing this article, Microsoft Expression Interactive Designer is not yet available for download. However, there are third-party tools that can help you create exciting UI designs.

	?
Figure 13: 3-D designing in ZAM 3D.

Electric Rain’s ZAM 3D
Electric Rain ZAM 3D is a full-featured 3-D modeling application that enables easy creation, customization, and animation of 3-D interface elements for WPF applications. You can use ZAM 3-D to export 3-D graphics into XAML code. You can then directly integrate the XAML files created with ZAM 3-D into your application development environment to create rich and engaging user experiences.

Figure 13 shows a 3-D model rendered using ZAM 3D. To export the graphics as XAML, go to the File menu, choose Export, and save the XAML code to a text file.

When you double click on the saved XAML file, it will be loaded in IE as a WPF application (see Figure 14).

MobiForm’s Aurora XAML Designer for WinFX

	?
Figure 14: The saved XAML code loaded as a WPF application.

Aurora is another visual designer that produces XAML documents from the Microsoft Windows Presentation Foundation Object Model.

You can either use Aurora as a standalone application (see Figure 15) to design your UI, or you can use Aurora within Visual Studio 2005 (see Figure 16).

? Figure 15: Using Aurora for WPF UI design.

? Figure 16: Aurora’s integration with Visual Studio 2005.

To use Aurora within Visual Studio 2005, right click on a form (such as Window1.xaml), select the “Open with” item, and select Aurora.

Imaging
Besides 2-D and 3-D graphics, WPF also comes with extensive support for imaging. For example, the following code shows how to clip an image using a geometry control (see Figure 17).

	?
Figure 17: Clipping an image.

Data Binding
Any decent application worth its salt would make use of data. And in WPF, you can bind UI elements to a wide variety of data sources, including XML data, Web services, and of course, databases.

To demonstrate data binding in WPF, I have built a simple RSS reader. Listing 4 shows my XML Data Provider defined to point to an online resource (an RSS document). It is then bound to a ListBox control that displays a list of titles contained within the RSS document, as well as a TextBox control that displays the description of the news item.

When the items in the ListBox are selected, the TitleChanged event fires. This event will then set the DataContext property of the StackPanel control so that the description for the selected news title will be displayed in the TextBox control.

   Private Sub TitleChanged( _      ByVal sender As Object, _      ByVal args As _      SelectionChangedEventArgs)         Dim lstbox As ListBox = sender      If lstbox.SelectedItem IsNot Nothing Then         spDetails.DataContext = lstbox.SelectedItem      End If   End Sub

In this article, you have seen some of the features of WPF, the new graphics subsystem in Windows Vista. There is a lot more to WPF than I could possibly cover in just one article. Hopefully you now have a better idea of what WPF can offer. I will cover some other features of WPF in a future article.