Create Your First Windows Presentation Foundation Application | WebReference

Create Your First Windows Presentation Foundation Application

By Ryan Butler


[next]

If you've been in development for any length of time, you've probably heard the acronym WPF, better known as Windows Presentation Foundation. Developed by Microsoft, WPF aims to be the future of Windows-based client applications. It's a new type of graphical application that replaces graphic device interface (GDI) with DirectX for rendering the form. WPF also brings a new way to develop Windows client applications by providing a clear separation of GUI and business layers.

Windows Presentation Foundation uses a subset of XML called Extensible Application Markup Language (XAML, pronounced Zaml) to render the user interface of a Windows application. If you're familiar with ASP.NET, getting up to speed with XAML-based technologies isn't terribly difficult, since XAML resembles the structure of XML. Furthermore, being familiar with the ASP.NET development environment, such as two separate files (the design file and the code behind file), also makes WPF intuitive because it is identical. However, WPF can be a little less fault tolerant because XML has to be properly structured.

In this article, I'll introduce this new framework while building a simple application that explores the new controls, including XAML (click here to download the code). You'll learn how to render your layout and how to interact with other windows. Follow along to learn about WPF and its features, and to get a basic feel for how it works.

Because WPF incorporates the concept of separation between GUI and business layer(s), it's recommended you have the following software:

  • Visual Studio 2008
  • SQL Server 2008

Creating Your First WPF Project

From the desktop, open Visual Studio: Start→Programs→Microsoft Visual Studio 2008. From Visual Studio, follow these steps to create our project:

  1. From the main menu, choose Filerarr;New→Project.
  2. In the new project window, choose WPF Application.
  3. In the name text field, type FirstWPFApp.
  4. Change your solution directory if needed.
  5. Click OK.

You'll notice the project creates the following two files:

  • App.xaml
  • Window1.xaml

Go ahead and delete Window1.xaml.

Create MainWindow.xaml

From the solution, complete the following to create a new XAML page:

  1. Right click on the solution.
  2. Choose Add→New Item.
  3. In the add new item window, choose WPF on the left side, and from templates, choose Window (WPF) from the right.
  4. In the name text field, type MainWindow and click Add.

Create App.config

If you're familiar with the ASP.NET development, app.config is very similar to web.config in that it contains many configuration settings for your application, one we'll use is connection strings. Let's go ahead and create that file by following these steps:

  1. Right click on the solution.
  2. Choose Add→New Item.
  3. In the add new item window, choose General on the left, and choose Application Configuration File from the right.
  4. In the name text field, type app.config and click Add.

In the application configuration file, add the following markup:

As you can see from the code above, we created a key with a value of connString, followed by a value attribute, followed by our data source. Replace this with yours. Save your file and close it.

Create the Layout for MainWindow.xaml

In order to make learning XAML a bit easier, I'll identify the different pieces of the markup from MainWindow.xaml (which I provided in the code download). For starters, you'll see this:

As you can see from the markup, this is radically different than a typical Windows form. Since XAML is an extension of XML, it takes on its markup to render the layout of a page. Here are some of the parts:

  • XMLNS: These are XML name spaces used by XAML that correspond to Microsoft's standard. These name spaces ensure our XAML markup is compliant, much like a DOCTYPE in traditional HTML markup
  • Title: Gives our window a title in the upper left-hand corner
  • Height: Gives our window a height
  • Width: Gives our window a width
  • WindowStartupLocation: Determines the default location for the form on the screen

Next, you'll notice a grid, which is our container for the entire layout. Nested inside of that are three stack panels. By default, stack panels are aligned horizontally. You can think of stack panels as tables in HTML that help visually align elements inside a XAML page. Inside our stack panels, you'll see other markup, such as:

  • Label: As the name implies, an ordinary label control used to display visual indicators
  • Textbox: Used to capture information a user provides
  • Checkbox: Used to capture boolean information, such as yes or no
  • List view: Used to display information in a table structure with rows and columns
      • One key part of the list view is binding in WPF. WPF uses class-level variables to bind data. Various ways to bind data exist in XAML.
  • Menus: Comes in two ways:
    • Menu: Container, which acts as the parent, which contains the child menus
    • MenuItem: Child menus, which are items users select, and developers can respond to actions
A Note About Designing XAML Files
The easiest way to design XAML files is through Expression Blend, unless you become profcient with XAML's structure and markup. Furthermore, when using buttons in WPF -- specifically an onclick event -- the association is slightly more strict than with ASP.NET. When associating an onclick event in XAML from Visual Studio, do the following:
  1. Open the XAML view first.
  2. Within the button control, type Click followed by the equal sign (=).
  3. Select New Event Handler. Assuming you've named your control, the event handler takes on btnSubmit_Click.

Create EditEntry.xaml File

In order for our application to handle edits to existing entries, we need to create a new XAML file that will search for and allow us to edit a specific entry. Follow these steps to create the XAML file:

  1. Right click on the project.
  2. Choose Add→New Item.
  3. In the add new item window, choose WPF on the left and Window (WPF) on the right.
  4. In the name text field, type EditEntry and then click Add.

This XAML file is essentially the same, except that it has a search feature that will enable us to find a specific employee and update details as necessary. Use the sample file from the code download to copy/paste the markup.

Create DeleteEntry.xaml File

In order for our application to handle deletes to existing entries, we need to create a new XAML file that will search for and allow us to delete a specific entry. Follow these steps to create the XAML file:

  1. Right click on the project.
  2. Choose Add→New Item.
  3. In the add new item window, choose WPF on the left and Window (WPF) on the right.
  4. In the name text field, type DeleteEntry and then click Add.

This XAML file is essentially the same, except that it has a search feature that will enable us to find a specific employee and delete from the database. Use the sample file from the code download to copy/paste the markup.

Create Error.xaml File

In order to show a generic error message for any mishaps that occur within our application, we'll create an additional XAML file. Follow these steps to create the XAML file:

  1. Right click on the project.
  2. Choose Add→New Item.
  3. In the add new item window, choose WPF on the left and Window (WPF) on the right.
  4. In the name text field, type Error and then click Add.

Use the sample file from the code download to copy/paste the markup.


[next]