BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

Creating a WPF Project in Visual Studio

The third part of the Windows Presentation Foundation Fundamentals tutorial explains how a new WPF Application project can be created in Visual Studio and describes the basic Visual Studio windows used to edit the XAML design and code.

WPF Windows

Once the project is created you will see the main window for Visual Studio, which presents a number of design, editor and tool windows. The actual layout of these windows is dependent upon your configuration. A typical layout that includes all of the most commonly used tools for designing XAML-based applications is shown below:

Visual Studio Layout for WPF Application

The numbered elements in the above image are:

  1. Menu
  2. Toolbars
  3. Toolbox
  4. Window Designer
  5. XAML Editor
  6. Solution Explorer
  7. Properties Window

Menu

The menu bar shows the standard menu for Visual Studio, It includes all of the commands required to create, compile, debug and test your software. For example, to start your application in the debugger, you can select the "Start Debugging" option from the Debug menu.

Toolbars

The toolbars provide shortcuts to some of the more commonly used menu commands. For example, the "Start" button allows you to run your software within the debugger. Toolbars are common to most types of Visual Studio project.

Start Debugging

Toolbox

The toolbox contains all of the controls that can be used in the currently active designer. When creating a WPF application the toolbox holds WPF visual and layout controls. You can drag items from the toolbox onto the designer surface to add them to windows and user controls. You can double-click a toolbox item to add it in a default position within the current designer. If you wish to add several of the same control, hold Ctrl and click it in the toolbox. You can then click multiple times in the designer to add the controls. To end the process, click the Pointer option at the top of the list.

The toolbox items are organised in sections called "tabs". If there are some controls that you use often, you can create your own tabs by right clicking the toolbox and selecting "Add Tab" from the context-sensitive menu that appears. You can then move or copy controls between tabs by dragging them, holding the Ctrl key to create copies.

If you cannot see the toolbox, select the "Toolbox" option from the "View" menu. Locate the Button control in the list and double-click it to add it to the current window.

Window Designer

The window designer is visible when you are editing the design of a window or user control. When you first create a WPF application project a new, blank window is included and is shown in the initially visible designer. As you add controls they are previewed in the designer. Additional information is also displayed and changes as items are selected and manipulated. For example, the designer shows guidelines, margins and sizing information for controls. You can also click items to see their XAML representation in the XAML editor window.

At the top of the designer window is a tab showing its file name. These tabs are visible for all open files, not just designers. They allow you to switch between open windows. In the screen shot you can see a tab for the designer and an inactive tab for the file, "MainWindow.xaml.cs". This is the file that contains the C# code that is linked to the MainWindow XAML file.

The code for the window, sometimes known as code-behind, can contain code that runs in response to events, such as the window opening or controls being clicked. The events can be added using the designer or via XAML. For example, double-click the button in the window designer to add a click event. Add the following code to the event handler method:

MessageBox.Show("Hello, world!");

Run the program in the debugger and click the button to see the result.

XAML Editor

The XAML editor shows the XAML for the window being designed. As the designer is used, the XAML is updated accordingly. You can also edit the XAML code directly and see the results in the designer. You can demonstrate this by finding the XAML for the button and modifying its content to change the text on the button. If you do this correctly, the designer updates to show the change. If you make a mistake and create invalid XAML, you might see an error appear in the designer. Fixing the XAML, and refreshing the designer if required, rectifies this.

10 February 2013