Give Your .NET Apps the Face They Deserve with WPF

Give Your .NET Apps the Face They Deserve with WPF

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

Author’s Note: WPF is betaware at the moment, and as such it’s neither trivial to set up nor to get running. However, Microsoft has drastically improved its betaware, making life easier for early adopters, so you should be able to get up and running successfully if you follow the guidelines in this article.

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 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:


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:


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!



Share the Post:
Poland Energy Future

Westinghouse Builds Polish Power Plant

Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at

EV Labor Market

EV Industry Hurting For Skilled Labor

The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will

Soaring EV Quotas

Soaring EV Quotas Spark Battle Against Time

Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023,

Affordable Electric Revolution

Tesla Rivals Make Bold Moves

Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed

Poland Energy Future

Westinghouse Builds Polish Power Plant

Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at the Lubiatowo-Kopalino site in Pomerania.

EV Labor Market

EV Industry Hurting For Skilled Labor

The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will result in job losses. However,

Soaring EV Quotas

Soaring EV Quotas Spark Battle Against Time

Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023, more than one-fifth of automobiles

Affordable Electric Revolution

Tesla Rivals Make Bold Moves

Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed are at the forefront because

Sunsets' Technique

Inside the Climate Battle: Make Sunsets’ Technique

On February 12, 2023, Luke Iseman and Andrew Song from the solar geoengineering firm Make Sunsets showcased their technique for injecting sulfur dioxide (SO₂) into the stratosphere as a means

AI Adherence Prediction

AI Algorithm Predicts Treatment Adherence

Swoop, a prominent consumer health data company, has unveiled a cutting-edge algorithm capable of predicting adherence to treatment in people with Multiple Sclerosis (MS) and other health conditions. Utilizing artificial

Personalized UX

Here’s Why You Need to Use JavaScript and Cookies

In today’s increasingly digital world, websites often rely on JavaScript and cookies to provide users with a more seamless and personalized browsing experience. These key components allow websites to display

Geoengineering Methods

Scientists Dimming the Sun: It’s a Good Thing

Scientists at the University of Bern have been exploring geoengineering methods that could potentially slow down the melting of the West Antarctic ice sheet by reducing sunlight exposure. Among these

why startups succeed

The Top Reasons Why Startups Succeed

Everyone hears the stories. Apple was started in a garage. Musk slept in a rented office space while he was creating PayPal with his brother. Facebook was coded by a

Bold Evolution

Intel’s Bold Comeback

Intel, a leading figure in the semiconductor industry, has underperformed in the stock market over the past five years, with shares dropping by 4% as opposed to the 176% return

Semiconductor market

Semiconductor Slump: Rebound on the Horizon

In recent years, the semiconductor sector has faced a slump due to decreasing PC and smartphone sales, especially in 2022 and 2023. Nonetheless, as 2024 approaches, the industry seems to

Elevated Content Deals

Elevate Your Content Creation with Amazing Deals

The latest Tech Deals cater to creators of different levels and budgets, featuring a variety of computer accessories and tools designed specifically for content creation. Enhance your technological setup with

Learn Web Security

An Easy Way to Learn Web Security

The Web Security Academy has recently introduced new educational courses designed to offer a comprehensible and straightforward journey through the intricate realm of web security. These carefully designed learning courses

Military Drones Revolution

Military Drones: New Mobile Command Centers

The Air Force Special Operations Command (AFSOC) is currently working on a pioneering project that aims to transform MQ-9 Reaper drones into mobile command centers to better manage smaller unmanned

Tech Partnership

US and Vietnam: The Next Tech Leaders?

The US and Vietnam have entered into a series of multi-billion-dollar business deals, marking a significant leap forward in their cooperation in vital sectors like artificial intelligence (AI), semiconductors, and

Huge Savings

Score Massive Savings on Portable Gaming

This week in tech bargains, a well-known firm has considerably reduced the price of its portable gaming device, cutting costs by as much as 20 percent, which matches the lowest

Cloudfare Protection

Unbreakable: Cloudflare One Data Protection Suite

Recently, Cloudflare introduced its One Data Protection Suite, an extensive collection of sophisticated security tools designed to protect data in various environments, including web, private, and SaaS applications. The suite

Drone Revolution

Cool Drone Tech Unveiled at London Event

At the DSEI defense event in London, Israeli defense firms exhibited cutting-edge drone technology featuring vertical-takeoff-and-landing (VTOL) abilities while launching two innovative systems that have already been acquired by clients.

2D Semiconductor Revolution

Disrupting Electronics with 2D Semiconductors

The rapid development in electronic devices has created an increasing demand for advanced semiconductors. While silicon has traditionally been the go-to material for such applications, it suffers from certain limitations.

Cisco Growth

Cisco Cuts Jobs To Optimize Growth

Tech giant Cisco Systems Inc. recently unveiled plans to reduce its workforce in two Californian cities, with the goal of optimizing the company’s cost structure. The company has decided to

FAA Authorization

FAA Approves Drone Deliveries

In a significant development for the US drone industry, drone delivery company Zipline has gained Federal Aviation Administration (FAA) authorization, permitting them to operate drones beyond the visual line of

Mortgage Rate Challenges

Prop-Tech Firms Face Mortgage Rate Challenges

The surge in mortgage rates and a subsequent decrease in home buying have presented challenges for prop-tech firms like Divvy Homes, a rent-to-own start-up company. With a previous valuation of

Lighthouse Updates

Microsoft 365 Lighthouse: Powerful Updates

Microsoft has introduced a new update to Microsoft 365 Lighthouse, which includes support for alerts and notifications. This update is designed to give Managed Service Providers (MSPs) increased control and

Website Lock

Mysterious Website Blockage Sparks Concern

Recently, visitors of a well-known resource website encountered a message blocking their access, resulting in disappointment and frustration among its users. While the reason for this limitation remains uncertain, specialists