he iPhone is one of the most compelling and exciting user interfaces to appear on any consumer electronic device, with many innovations that make it a pleasure to use. This article demonstrates how you can implement these features in your .NET applications in a step-by-step format as you recreate the iPhone interface using Windows Presentation Foundation (WPF) technology with both Visual Studio 2008 and Microsoft Expression Blend.
Just when you finally master creating Windows applications using .NET Windows Forms, Microsoft comes out with a new replacement technology—Windows Presentation Foundation—that is completely different in just about every possible way and requires a significant learning curve! Fortunately, this break with the past comes with tremendous benefits and the ability to vastly improve the quality of user interfaces you deliver to your end users. Before jumping into recreating the iPhone interface, here's a quick WPF primer.
What Is Windows Presentation Foundation?
Windows Presentation Foundation (WPF) is Microsoft's powerful new technology for building Windows user interfaces. WPF is one of four technologies (Windows Presentation Foundation, Windows Communication Foundation, Windows Workflow, Windows CardSpace) released by Microsoft as part of the .NET 3.0 Framework that are now integrated into .NET 3.5.
WPF is preinstalled on Windows Vista and is available for installation on Windows XP Service Pack 2 and Windows Server 2003.
|Author's Note: Older versions of Windows such as Windows 98 and Windows 2000 cannot run WPF, so if you need to support older operating systems you can't use WPF.
WPFs benefits are well worth the time and energy you need to spend in yet another learning curve:
- With little or no code you can display eye-catching animations and transitions that place your user interface head and shoulders above your competitors.
- WPF vastly improves the speed of the user interface—whether you are creating standard business applications or using complex animations.
- Unlike Windows Forms technology, where you wrestle with creating a user interface that looks good regardless of the end user's settings, WPF user interfaces easily resize and reformat to display any DPI or font size, dynamic content, and different languages because WPF is resolution independent.
- WPF's declarative user interface and separation of layout from code makes it easy for a designer to create the look and feel and the developer to implement the user interface behavior.
- You can display rich text content anywhere in the user interface.
- You can easily implement audio and video in your application.
As far as end users are concerned, your user interface is
the application. Anything you can do to improve the user experience can translate into user satisfaction and increased sales!
So Long GDI+, Hello DirectX
WPF offers so many benefits because it uses DirectX technology rather than using GDI+ as does Windows Forms. The technology in GDI+ is over 10 years old and doesn't take advantage of modern advancements in display technologies. In contrast, WPF (and in turn, DirectX) offloads as much processing as possible to the Graphics Processing Unit (GPU) on your computer's graphics card, providing a tremendous performance boost.
Getting Started in Windows Presentation Foundation
Although you can create WPF applications using the .NET 3.0 Framework in conjunction with Visual Studio 2005 and WPF extensions, I do not recommend it. The WPF/WCF extensions for Visual Studio 2005 support is extremely weak and not worth the effort. Instead, you should go directly to the following technologies:
- .NET 3.5 Framework
- Visual Studio 2008
- Microsoft Expression Blend 2 (December 2007 CTP)
As I write this article, Microsoft Expression Blend 2 is still in Community Technology Preview (December 2007 CTP), however it's still worth using this version because it has support for Visual Studio 2008 and contains many important features not present in Expression Blend Version 1.
If you really can't move to Visual Studio 2008 yet, you can still follow the step-by-step instructions in this article by using Visual Studio 2005 and installing the WPF/WCF Extensions for Visual Studio 2005, which you can download from Microsoft's web site (http://www.microsoft.com/expression/). You won't see many differences between Visual Studio 2005 and Visual Studio 2008 as you go follow the step-by-step instructions in this article since it only uses Visual Studio for editing code, but as mentioned previously, for regular WPF development you should definitely move to Visual Studio 2008 as soon as possible.
WPF Standalone Applications vs. XBAP Applications
There are two main types of WPF applications—WPF standalone applications and XAML browser applications (XBAPs).
WPF standalone applications are the equivalent of a Windows Forms application. You install this standalone Windows executable on a computer using an MSI, XCOPY or ClickOnce technology and it runs in a standard window. By default, it executes with full trust.
In contrast, XBAPs are hosted within Internet Explorer. XBAPs are not web applications. They are Windows applications hosted in an Internet Explorer browser. Unlike WPF standalone applications though, by default, they run in the Internet zone, which restricts access to system resources such as the file system (including databases) or the Windows Registry. Although you can elevate the permissions on an XBAP application, rather than forcing the issue, you should instead create a WPF standalone application.
These restrictions severely limit the kinds of applications you can create as XBAPs. That said, there are some incredible XBAP applications out there. One of the best examples is the Museum of London's Turning the Pages application which is an incredible showcase of WPF capabilities. When you go to this site, make sure you click on the link that takes you to the WPF version of the site (rather than the Flash version). You can turn the pages on famous works by the likes of Leonardo da Vinci and Lewis Carroll—you can even turn on audio and listen while Alice in Wonderland is read to you!
Microsoft Expression Blend
In a perfect world you would just be able to use Visual Studio 2008 to create your WPF applications. However, there were some major pieces left out of Visual Studio 2008 that make it difficult to work with WPF. Fortunately, you can find most of these missing pieces in Expression Blend.
For example, when you edit a WPF user interface in Visual Studio 2008, the property sheet doesn't have an events button (lightning bolt) as it does when editing a classic Windows Forms user interface. Fortunately, the Expression Blend Properties window does have an events button. Also, there is no easy way to bind user interface controls to data or business entities in Visual Studio 2008. Again, Expression Blend picks up the slack and has an IDE for data binding the user interface. As you will see in this article, Expression Blend also has a far better set of tools for creating animations, as well as for designing and rendering the user interface. On the other hand, Visual Studio 2008 has a key advantage over Blend in its IntelliSense support when editing XAML files manually—which you will need to do often when using Visual Studio 2008 alone.
Based on the more complete feature set of Expression Blend, in this article you will start out using Expression Blend to create and edit a WPF application, and then you will see how it works in conjunction with Visual Studio 2008. As you will see, Expression Blend can create and edit Visual Studio 2008 solutions and projects. However, it doesn't have a code editor, so whenever you need to add code to your project you are automatically taken to Visual Studio 2008.
|Editor's Note: This article was first published in the March/April 2008 issue of CoDe Magazine, and is reprinted here by permission.|