The Windows Presentation Foundation enables you to enhance the user experience of your Windows Forms application. You'll see how effortlessly you can add advanced graphical features and more with WPF. In this four-part series, we'll walk you through the basics of WPF by showing you how to create a simple application and make it appealing to use.
Developing Windows client applications with Windows Forms can sometimes get a bit dull. The mode of development contrasts sharply with technologies such as ASP.NET, which enable the developer to declaratively define the layout of an application, separating presentation from logic. Adding special features to a Windows Forms application involves bringing in (and learning to use) other technologies. As a result, the user experience often suffers. At a time when many Web applications aim at offering a “rich” user experience filled with all sorts of bells, whistles and eye candy, Windows Forms applications seem a bit obsolete.
This is where the Windows Presentation Foundation, or WPF, comes to the rescue. WPF offers a new way to build Windows applications that offer the user a richer experience. WPF applications offer the user advanced graphical features, animation, multimedia components, a better look and integration with documents, among other features, and the great part is that none of this places a large burden on the developer.
In fact, development becomes much easier. Developers of WPF applications can now declaratively define the appearance of an application with Extensible Application Markup Language (XAML), and can implement the mechanics of an application in a code-behind file, separating presentation from logic in a way similar to what is done in ASP.NET. This approach also makes applications easier to divide up: designers can work with the visual half of the application using tools such as Microsoft Expression, and developers can work with the programming half using Visual Studio. The two halves can then be easily combined to form a visually pleasing product.
Moreover, while WPF provides a way to create traditional Windows applications, many users may prefer a browser-based experience. Because of this, WPF also offers a way to create browser-hosted applications, where the application will open in the user's browser rather than a traditional desktop window. Furthermore, Silverlight is compatible with WPF, and so knowledge of WPF in building Windows applications will carry over to building Silverlight applications.
In this series of articles, we'll take a look at some of the technologies offered by WPF. You'll learn the basics of WPF by constructing a simple application: a to-do application that allows the user to manage a list of tasks. A list of tasks will be loaded from an XML file and then presented to the user in an appealing way. Tasks will be named and will feature descriptions, and each task will be assigned a priority. When a task is complete, the user can mark it as being done. New tasks can be added by the user, and existing tasks can be deleted.
This example project will provide a general introduction to WPF and then allow progression to more advanced features.
Let's first take a look at creating a WPF project. Open up Visual Studio 2008 and open the New Project dialog. There are two main WPF project templates: WPF Application and WPF Browser Application. The WPF Application template is used for standard desktop applications, and it's what we'll be using here. The WPF Browser Application is used for browser-hosted applications. Creating a browser application isn't much different from creating a desktop application, but we won't be going that route. If you like, you can play around with the WPF Browser Application template on your own.
Go ahead and use the WPF Application template to create a C# project named WpfToDo. When the project is created and loaded, you should immediately see a split-view in the workspace. On the top will be a visual representation of the application's default window, and on the bottom will be the corresponding XAML. The visual part will probably be bigger, but you may want to click the Swap Panes button in order to enlarge the XAML view.
For now, though, leave the workspace area alone and take a look at the Solution Explorer. You should see two files, App.xaml and Window1.xaml. As the extensions give away, these contain the application's XAML. If you expand the two files, you should see something like this:
Under the XAML files are the code-behind files, whose names are created simply by appending “.cs” to the XAML file names. As you've probably noticed, the structure is similar to the structure of an ASP.NET application, so the structure isn't something radically new that you have to get used to. The -.xaml files of WPF are analogous to the -.aspx files of ASP.NET, and the code-behind files simply tack on the appropriate language extension.
The App files aren't very important to us right now. They deal with the application as a whole. For example, if we had a resource that we needed to share across the entire application, then we'd probably deal with that in the App files. But we don't. The only thing worth mentioning right now is one attribute in App.xaml:
The attribute in bold specifies what the starting window is. In this case, it's Window1.xaml. With that, turn your attention to the Window1 files. Window1 is going to be the main window for our application.
WPF applications are, just like Windows Form applications and ASP.NET applications, event-driven. So, before we start working with code, we need to create the basic user interface of our application using XAML. Then, we can work on responding to events raised through user interaction with the interface. The initial contents of Window1.xaml should look like this:
Right now, there's just a Window tag which contains an empty Grid tag. Let's take a look at the Window tag first. In the first line, we define the Class attribute. This attribute points to the class associated with the window as defined in XAML. The next two lines aren't important—leave them be. Then, there are the Title, Height and Width attributes. These attributes specify the title, initial height and initial width of the window. Go ahead and change the title to something more appropriate, such as “To-Do List.”
Speaking of height and width, there is one important thing to be mentioned here. WPF doesn't use standard pixels. Instead, it uses “device independent pixels.” The goal with the device independent pixel is to provide consistent sizing across different devices and video settings. So 96 device independent pixels make up 1 inch. This makes since, since 96 dots per inch is common.
Inside the Window is a Grid. WPF offers numerous ways to control the layout of a window. The default method is through a Grid, which, as its name implies, arranges controls in a grid, with rows and columns whose sizes are specified by the developer. Another layout control is the StackPanel, which simply arranges controls from left to right or from top to bottom. There are, of course, a number of other layout controls, but we won't need them for our application. We'll be using a Grid for the main window, since it fits the desired layout.
The layout of the application doesn't have to be very complicated. A long, rectangular window will do. Inside the window will be a list of tasks, and below the list of tasks will be two buttons. One button will be for adding a new task to the list, and the other button will be for deleting a task from the list. Let's start by modifying the window's dimensions. Set the height of the window to 480 (5 inches) and the width of the window to 384 (4 inches).
In order to lay out the controls as described above, we need two columns (since there are two buttons below the task list, each of which will need its own column) and two rows (since, vertically, there's one list and one group of buttons). The columns need to be of equal width, since the buttons will need to be of equal width, but the rows will need to be of very different heights, since the buttons will naturally occupy less vertical space than the list. The list will span across two columns.
Setting the height of each row and the width of each column (and, thus, the size of each individual cell) isn't very difficult. It involves simply adding some tags within the Grid tag:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="175" />
<ColumnDefinition Width="175" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="400" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
</Grid>
The above XAML is pretty straightforward. First, we define the columns of the grid, and then we define the rows, exactly as described earlier, with two columns of equal width and two rows of unequal width. Grid columns are defined using the ColumnDefinition tag, and column definitions are all wrapped inside of a Grid.ColumnDefinitions tag. Rows are defined the exact same way, except with RowDefinition and Grid.RowDefinitions.
Notice that the dimensions of the grid are considerably less than the dimensions of the window. Some difference is to be expected, since the border and title bar of the window will take up some space, but I've subtracted even more space from the grid in order to create some empty space between the controls and the border of the window. If we add controls to the grid as-is, though, the empty space will only be to the right and to the bottom of the grid. That is, everything will be crammed to the top left. To fix this, we need to center the the columns and rows within the grid. This isn't very hard. Only the Grid tag needs to be modified:
Above, we add a HorizontalAlignment attribute along with a VerticalAlignment tag. Now, all of the controls will be centered in the window, with a margin between the controls and the edge of the window. Note, though, that there is also a Margin attribute for controls, which we'll take a look at shortly.
Using XAML, we've declaratively created a layout for our application's controls, and, so far, the XAML has been rather uncomplicated and uncluttered, just as it should be. In the next article, we'll start by placing the controls inside the cells of the Grid.
Windows Scripting 
/ 39 
Visual Basic for Beginners
