RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


WPF Wonders: Getting Started with WPF

Learn how to use Windows Presentation Foundation to build engaging, dynamic user interfaces that can really grab the user's attention.

indows Presentation Foundation (WPF) has been around for a couple of years now but there are still plenty of developers who don't really know what it's all about. Some think it's a "Vista thing." Others think it's about transparent controls, shaded backgrounds, or separating user interface design from programming. I've even heard Microsoft MVPs (Most Valuable Professionals) take every attitude from "I don't have time for bouncing buttons and spinning labels" to "it's the wave of the future and every new application will be written with WPF by the end of the year." (That was last year.)

There's a kernel of truth in each of these statements but none of them really captures the full story. The truth is that WPF is increasingly important, and developers need to know what WPF is and understand its advantages and disadvantages.

When I started writing this article, I thought it would follow the usual pattern: Write a few examples, explain them, and then I'm done in a couple of days. After a couple weeks or experimenting and writing, however, the initial draft was already more than 24 pages long! There are so many new concepts and tools in WPF, that no one article can squeeze in everything with any detail.

So, rather than trying to cover everything thoroughly in one mammoth 50-page article, a more productive and usable approach is to write a series of articles. This one provides a quick introduction to WPF; it explains the basics and describes WPF's advantages and disadvantages using simple, downloadable examples that demonstrate some of the features. The coverage is admittedly a mile wide and an inch deep. Later articles will describe particular features of WPF in greater depth.

Author's Note: I encourage you to experiment with the examples in Expression Blend, Visual Studio, or even as loose XAML pages in a browser.

Before diving into a bunch of WPF examples, the following sections briefly explain what WPF is, what its goals are, and how you can obtain and use WPF. After you get WPF up and running, you'll be able to follow along with the examples and make changes to experiment with the results.

A Brief Introduction to WPF
WPF has been available to developers for about three years now—but even developers who have worked with it have some trouble saying what it is. I've heard WPF described variously as:

  • A graphical subsystem
  • An application development framework
  • A programming model
  • A set of controls
  • A method for separating user interface design and program code
  • eXtensible Application Markup Language (XAML), pronounced "zammel", a form of XML that Microsoft cooked up to represent WPF interfaces
  • Microsoft's Expression Blend product that you can use to design XAML interfaces
But probably the easiest way to understand WPF is to think of it as a collection of classes that simplify building dynamic user interfaces. Those classes include a new set of controls, some of which mimic old favorites (such as Label, TextBox, Button), and some that are new (such as Grid, FlowDocument, and Ellipse).

WPF also includes classes that support the new controls and provide new features, such as animation, new kinds of resources, and customizable behaviors. A WPF application uses an assortment of these objects to provide a user interface.

You can build this arrangement of objects in more than one way. First, you can use .NET code in C# or Visual Basic to create the objects one at a time, and glue them all together. This is a rather satisfying hands-on experience where you get to control exactly which objects are associated with which others—but it is rather difficult, partly because a user interface may require a lot of controls and partly because WPF requires a lot of extra non-visible objects to glue the controls together properly. Understanding how all these visible and invisible objects must fit together can be challenging.

Besides code, another way to build a WPF interface is to specify its content and controls in XAML.

Most developers are now familiar enough with XML to know that it's a hierarchical language, with each element contained in a parent element. That makes XML a somewhat natural choice for user interface design, because user interfaces are more or less hierarchical, with controls containing other controls and some sort of window containing everything.

Here's a XAML example that builds a simple WPF interface. The root element is a Window named winJustButtons. That element contains a Grid named LayoutRoot that has a blue background (FF0000FF). The Grid contains a yellow StackPanel named StackPanel1 that holds three Buttons. Don't worry about the elements' attributes and other details just yet, just look at the structure:

    Width="231" Height="179" FontSize="20" FontWeight="Bold">

    <Grid x:Name="LayoutRoot" Background="#FF0000FF">
        <StackPanel Margin="5,5,5,5" Name="StackPanel1"
            Orientation="Vertical" Background="#FFFFFF00">
            <Button Height="Auto" x:Name="btnRed"
                Width="Auto" Margin="5,5,5,5" Content="Red" />
            <Button Height="Auto" x:Name="btnGreen"
                Width="Auto" Margin="5,5,5,5" Content="Green" />
            <Button Height="Auto" x:Name="btnBlue"
                Width="Auto" Margin="5,5,5,5" Content="Blue" />
Figure 1 shows the resulting interface. You can see that the window contains the blue Grid, which contains the yellow StackPanel, which in turn contains the three Buttons.

Figure 1. Hierarchical Heaven: XML works well to describe user interfaces because a user interface is hierarchical; a window contains controls that contain other controls.

WPF and Silverlight
Silverlight (formerly known as WPF/e—the "e" stands for "everywhere") is a restricted version of WPF designed to run securely in a browser while still providing a rich user interface. Because of the security restrictions, Silverlight does not provide all the features included in WPF. Some features are missing while others are provided in a restricted way.

You can learn more about the differences between WPF and Silverlight's restricted version here.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date