icrosoft first publicly demonstrated Avalon way back in 2003 at the Professional Developers’ Conference (PDC) in Los Angeles. They touted Avalon as the next generation in user interface methodology, and it was well-received by developers and users alike.

Microsoft unveiled a more complete version of the project code-named Avalon back in 2003 at the 2005 PDC with its new and official name: The Windows Presentation Foundation (WPF). By that time, it had evolved beyond demoware into the beginnings of an alpha-release API. Now, a few months later, it is in the advanced beta stage?and you can get your hands on it and use it to build next-generation user interface applications.

But what is WPF, and why is it so important?

First, it is a clean and effective separation of user interface definition and application implementation. It allows application designers to design the visual aspects of a user interface separately from the developers who write the code that underpins the user interface. This is important on many different levels:

• With the clean separation between the two, software development companies can have their designers concentrate on what they do best, while letting their developers support them
• With the ongoing trends around outsourcing and offshoring, WPF makes it easier for local designers and business analysts to take on the designer role, mocking up a UI, and building basic functionality into it, while offshore coders can build the underlying logic separately, without interfering with the design.
• It allows for easier application internationalization. Different, separate UIs can be tailored for different locales, but the underlying, separate codebase can be common across all of them
• It allows for “white labeling” of products. This is a process which customizes the UI for different customers without forking the underlying logic. Developers can create the application logic, and then map different UIs to it for different customers, containing their branding, etc.

WPF achieves all this by using an XML-based language to define the user interface. This language is called XAML, which stands for XML Application Markup Language.

Second, WPF uses a vector-based instead of a raster-based drawing engine, which is a radical departure from earlier Windows drawing engines. Raster-based engines draw on the screen by painting pixels onto the rendering surface. Pixels are just dots; therefore, as screen resolution (DPIs, or Dots Per Inch) increase, the raster-based model tends to break down. As screens approach Ultra-high DPI resolution, fonts will have to have hundreds if not thousands of dots per inch to be readable. Consider the typical default setting of Microsoft Word fonts which is 12-point Times New Roman. While that works at common resolutions today it would be unreadable on an ultra-high DPI, high resolution monitor. Managing all these dots with raster-based imaging would require incredible processing power, and would ultimately be wasteful. However, taking a vector-based approach expresses fonts and other lines in a scalable coordinate system rather than in pixels, making them independent of DPI. Consider the difference in scaling between a Windows Metafile (WMF) and a Bitmap (BMP) image, and you’ll see where this is going. Additionally, vector graphics allow for easier and faster manipulations transforms such as rotation, 3D, hidden line removal, animation and more.

But enough theory, let’s start putting all this into practice, so you can start building your first WPF-based application to get a taste of this technology and what you can do with it.

Getting Started

First, I strongly recommend that you uninstall everything to do with WinFX, the Windows SDK and any other development betaware before you begin. Indeed, I think it is a good idea to even remove Visual Studio 2005 and the .NET framework 2 before beginning. You can try it with these pre-installed, but I have obtained the best results by starting with a completely clean machine. You might try all this out using a virtual machine image running in either Microsoft Virtual PC or VMWare Workstation. Second, before you begin, you should download, install and run the terrific ‘cleaner’ utility from CCleaner.com. This tool ploughs through your registry looking for bad, old or corrupt keys (the usual side effect of using betaware) and cleans them out. To get started with WPF, I followed this process, and everything worked cleanly, first time.

When you are ready, you should download and install this software in this order:

1. First, you’ll need the WinFX runtime components.
2. After installing these, reboot?and if you don’t have it already, you can install Visual Studio 2005. If you don’t have a copy of this, you can use the free Express Edition.
3. Next, download the Windows SDK?a huge download of about 1G. Note that with the SDK, one option is to download the IMG file and burn it to a DVD or load it into a virtual CD/DVD application and install it from there. Unfortunately, when I did this, the installation failed every time. So instead, I recommend that you download the IMG, and then download the associated Setup.exe (you’ll find that download on the same page). Put both of these in a directory on your HD. Run the Setup.exe application and it will read the IMG file for you, and you can install successfully.
4. Finally, you must install the Visual Studio development tools (codenamed ‘Orcas’) for WinFX development. These include the ‘Cider’ designer for XAML in Visual Studio.
5. If you’ve gotten this far, you’re now ready to start coding WPF applications, but one final download (and one well worth your time) is the Expression Designer for XAML.

As a developer you can use the Cider tool to build basic XAML user interfaces within Visual Studio.NET, in a manner that you will be very familiar with, as it is virtually identical to what you can do with the basic Windows forms designer. However, to start using some of the really slick features that XAML offers, I recommend that you explore the Expression Designer for XAML.

Your First WPF Application

	?
Figure 1. New Project Dialog in Visual Studio 2005: After installing all the WPF software, you’ll find a new set of project types starting with “WinFX.”

If everything installed correctly, you’ll find it easy to get going with your first WPF application. Start up Visual Studio 2005, and select File?> New Project. You’ll see the new project dialog box, as shown in Figure 1.

As you can see in Figure 1, there’s a new suite of project types called Windows (WinFX), including WinFX Windows Application, Service Library, Browser Application and Control Library. These allow you to build XAML client applications, Indigo services, XAML browser (Web form) applications, and control libraries, respectively.

In this article, I’ll walk you through the process of building a WinFX Windows application. Select that project template from the New Project dialog.

When you first create this application you get what looks like a standard Visual Studio designer environment, but is in fact the new XAML designer for Visual Studio codenamed “Cider” (see Figure 2).

	?
Figure 2. XAML Designer for Visual Studio: The figure shows an Avalon application in design mode using ‘Cider.’

If you look closely at Figure 2, you’ll see a new tab at the bottom of the designer pane, called ‘Xaml’. Clicking that tab lets you view the XAML for the current design. The XAML for the simple dialog shown, which contains a label, a textbox, and a button looks like this:

                Button                   Enter Text Here:                

As you change the layout of the dialog in the Cider visual editor, the tool updates the XAML for you automatically.

Designer-based addition of events to controls is not yet supported in the Cider designer, but with a little manual XML editing you can add events easily. For example, to add a click event handler to the button you would edit its tag in the XAML. Change it to the following, adding a new “Click” attribute to the declaration shown earlier:

   Button

As you can see, the revised code simply adds a new ‘Click’ attribute to the button declaration, and then specifies the name of the event handler for the button click. If you select the ‘Source’ tab, you can now create the handler for this event.

	?
Figure 3. Running the Application: After adding a button Click event, the MessageBox appears as expected when you click the button.

Avalon ties XAML to back end code using a mechanism called “Routed Events.” These are exactly what they sound like?events routed between the separate XAML UI and the managed-code runtime.

As such, you need to declare the event handler to use a RoutedEventArgs argument like this:

   void ButtonClick(object sender, RoutedEventArgs e)   {     System.Windows.MessageBox.Show("Hello World to:" +         textBox1.Text);   }

Now, if you run the application you’ll see the WPF vector-based engine in action, as shown in Figure 3.

So, you’ve now finished your first venture into the world of Avalon. It’s probably not too exciting yet, but at least you have a nice grounding in the technology.

Using Expression to Design the XAML
Microsoft Expression is a far more sophisticated tool for designing XAML UIs than the basic Cider tool that currently comes with the VS.NET WinFX toolset. In this section, you’ll expand on what you saw earlier to build a XAML UI that you will then tie into code using Visual Studio.NET in the same manner as you saw earlier. Note that this section should also show you how designers and coders can work separately yet together using tools that cater to each group’s skill sets and needs.

	?
Figure 4. Creating an Expression Project: The figure shows the Expression interface when creating a new project.

Start Microsoft Expression, create a new Project, and then select the Windows Executable Project type (see Figure 4).

This creates a Visual Studio-compatible project containing the XAML files and code-behind C# files. You can edit the code in Expression if you like, but the editor doesn’t have the full integrated debugging and other facilities that coders are used to. But the neat feature is that Expression allows designers and coders to share a common file format for managing projects.

You can now use the tools in Expression Interactive designer to design a more sophisticated GUI. In this example, I’ve designed a similar GUI to what you saw earlier?a simple Hello World application with a label, a textbox and a button. However, I’ve used the rotation and parallelogram effects that Expression offers to make it a little more funky (see Figure 5).

	?
Figure 5. Designing a User Interface using Expression: This is the same Hello World application, but using Expression’s parallelogram and rotation effects.

Expression saves a .csproj file along with all the XAML and .CS files that are necessary to run it, so after creating the UI, you can now open and use the same project in Visual Studio 2005.

When you open the project in Visual Studio 2005 you’ll see that the project setup is pretty much the same as the one you saw earlier when you created a new WinFX Windows Application. One minor difference is that Expression organizes your XAML as “scenes” instead of “Windows,” so the underlying XAML is a little different, and the XAML is rendered in a scene container when you run it (see Figure 6).

	?
Figure 6. Expression-based GUI: The figure shows how the Expression-based GUI looks when running in Visual Studio 2005.

You can now add code behind the Button control in the same way as for a Windows application; however, you might have to massage the XAML a little as the integration is not fully there yet. In some cases you may get an error associated with the tags that Expression adds. Simply delete these and your application should run happily.

Figure 6 shows the application running (using the Scene Viewer), and as before when users click the button they see the Hello, World message.

In this article you got an introduction to the Windows Presentation Foundation, formerly Avalon, and began to investigate the flexibility that a vector-based rendering engine gives to your Windows UI applications. You built a simple application in a couple of different ways, first using the early access version of ‘Cider’, which is the XAML editor that will be built into future versions of Visual Studio 2005, and then using the Microsoft Expression Interactive designer. Because the file set for projects in Expression and Visual Studio 2005 are compatible, you should understand how a graphics designer could use Expression to prototype an application before giving it to a developer. The developer can then take the output project of Expression and add programmatic logic to complete the application.

The next article in this series will go into a little more depth, using Visual Studio 2005 and Cider to build 2D Windows forms applications that use this new technology. Future articles will also explore the 3D aspects of the API as well as how to leverage the new Aero functionality of Windows Vista. It should be a fun ride!