WPF Designer Overview

This topic describes the Windows Presentation Foundation (WPF) Designer for Visual Studio. WPF is the user interface technology for Windows Vista and is distinct from earlier view technologies, such as Windows Forms.

The WPF Designer provides visual design support similar to the Windows Forms Designer. You can build user interfaces for your applications by dragging controls from the Toolbox and setting properties in the Properties window. You can also edit XAML directly in the XAML editor. 

WPF Designer Windows

The WPF Designer has several windows for displaying and editing XAML documents. The following illustration shows some of the windows in the WPF Designer.

Design View

Design view provides a visual design surface for building your WPF controls and applications. It shows a rendered representation of the XAML currently in XAML view.

You can place controls on the design surface by dragging them from the Toolbox, and you can position controls by dragging. Several design aids help you place controls exactly where you want them. When you change controls on the design surface, XAML view updates to reflect your changes. For more information, see How To: Add Controls to a WPF Window and How to: Select and Move Elements on the Design Surface.

XAML View

XAML view provides a complete editing experience for XAML documents, that includes IntelliSense, auto-formatting, syntax highlighting, and tag navigation. When you edit XAML, Design view updates to reflect your changes.

For more information, see Walkthrough: Editing XAML in the WPF Designer.

Properties Window

You use the Properties window to set property values on controls in Design view.

Access the Properties window by opening the View menu and selecting Properties Window, or by pressing CTRL+W, P or F4. You can also right-click a control in Design view, and select Properties on the shortcut menu. The Properties window displays a thumbnail preview of the currently selected control.

To search for a property, start typing the name of the property in the Search box at the top of the Properties window. The Properties window shows the properties that match your search as you type. Click Clear to remove the search and display all the selected object's properties.

Starting in Visual Studio 2008 Service Pack 1, you can sort properties alphabetically or by category. To sort properties alphabetically, click the Alphabetical button at the top of the Properties window. To sort properties by category, click the Categorized button at the top of the Properties window.

Document Outline Window

The Document Outline window provides a hierarchical view of a XAML document. You can use the Document Outline window to preview, select, or delete XAML elements. Access the Document Outline window by opening the View menu, pointing to Other Windows, and selecting Document Outline, or by pressing CTRL+ALT+T. For more information, see Navigating the Element Hierarchy of a WPF Document.

Toolbox

The Toolbox holds the controls which you can drag onto the design surface. Access the Toolbox window by opening the View menu and selecting Toolbox, or by pressing CTRL+ALT+X.

Design View Features

Design view provides many features for arranging controls in your WPF application's window or page. Some of the Design view features are shown in the following illustration.

Zoom Control

Use the Zoom control to control the size of the design surface. You can zoom from 10% to 20x.

Fit In View

Use the Fit in view button to size the design surface to the available screen in Design view. This is useful if you have zoomed very far in or out.

Grid Rails

Use the grid rails to manage rows and columns in a Grid control. You can create and delete columns and rows, and you can adjust their relative widths and heights. For more information, see How to: Add Rows and Columns to a Grid.

Gridlines

Use gridlines to control the width and height of a Grid's columns and rows. You can add a new column or row by clicking in the rails above and to the left of the Grid. For more information, see How to: Add Rows and Columns to a Grid.

Gridline Indicators

A gridline indicator appears as a triangle in the grid rail. When you drag a gridline indicator or the gridline itself, the widths or heights of adjacent columns or rows update as you move the mouse. For more information, see How to: Add Rows and Columns to a Grid.

Move Handle

A move handle appears in the upper-left of a selected panel control. Click the move handle and drag the control to the desired position on the design surface. For more information, see How to: Select and Move Elements on the Design Surface.

Resize Handles

Resize handles appear on selected controls. Click and drag a resize handle to change the size of the selection. When you resize a control, width and height values typically appear to help exactly size the control.

Margin Lines

Margins represent the amount of fixed space between the edge of a control and the edge of its container. Set the margins of a control by clicking its margin lines. For more information, see How to: Set Margins for a Control in the WPF Designer.

Margin Stubs

A margin stub appears on a selected control when its margin in set to 0. Click the margin stub to set a margin distance to the corresponding edge of the container. For more information, see How to: Set Margins for a Control in the WPF Designer.

Snaplines

Use snaplines to align controls relative to each other. If snaplines are enabled, when you drag a control relative to other controls, snaplines appear when edges and the text of some controls are aligned horizontally or vertically. For more information, see How to: Align to Both Text Baselines and Margins.

XAML View Features

The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. The WPF Designer provides a unique split view, which provides a XAML view and a synchronized Design view of your application's rendered XAML markup. Some of the XAML features are shown in the following illustration. 

For more information, see Split View: Viewing the WPF Design Surface and XAML at the Same Time.

Split View Bar

Use the split view bar to control the relative sizes of Design view and XAML view. You can control whether the split view is horizontal or vertical, and you can collapse either view. For more information, see Split View: Viewing the WPF Design Surface and XAML at the Same Time.

Tag Navigator

You can move to any parent tag of the currently selected tag in XAML view by using the tag navigator. When you hover over a tag in the tag navigator, a thumbnail preview is displayed for that element. Walkthrough: Editing XAML in the WPF Designer.

Building Rich, Interactive User Interfaces

In WPF, the Window and Page classes are visual surfaces on which you display information to the user. You ordinarily build WPF applications by adding controls to a Window and developing responses to user actions, such as mouse clicks or key presses. A control is a discrete user interface (UI) element that displays data or accepts data input.

When a user does something to your Window or one of its controls, the action generates an event. Your application reacts to these events and processes them when they occur. For more information, see How to: Create a Simple Event Handler.

WPF contains a variety of controls that you can add to a window: controls that display text boxes, buttons, drop-down lists, radio buttons, and even Web pages. For a list of all the controls you can use in a window, see Control Library. If an existing control does not meet your needs, WPF also supports creating your own custom controls by using the UserControl and Control classes.

With the drag-and-drop WPF Designer, you can easily create WPF applications. Just select the controls with your pointer and add them where you want in the window. The designer provides tools, such as snaplines and continuous zooming, to make arranging controls easier.

Finally, if you have to create your own custom UI elements, the System.Windows.Media and System.Windows.Shapes namespaces contains a large selection of classes to render lines, circles, and other shapes directly in a window.

Help Creating Windows and Controls

For step-by-step information about how to use these features, see the following Help topics.

Collaboration with Expression Blend

WPF provides a strong separation of content and presentation, which makes it possible for software developers and graphical designers to collaborate on the appearance and behavior of an application. The Windows Presentation Foundation (WPF) Designer for Visual Studio is optimized for software developers, and Expression Blend is optimized for graphical designers. For more information, see Collaboration with Expression Blend.

Deploying Applications to Client Computers

After you have written your application, you must send the application to your users so that they can install and run it on their own client computers. When you use ClickOnce technology, you can deploy your applications from within Visual Studio by using just a few clicks, and provide your users with a URL pointing to your application on the Web or file share. ClickOnce manages all the elements and dependencies in your application, and ensures that the application is correctly installed on the client computer.

ClickOnce applications can be configured to run only when the user is connected to the network, or to run both online and offline. When you specify that an application should support offline operation, ClickOnce adds a link to your application in the user's Start menu. The user can then open the application without using the URL.

When you update your application, you publish a new deployment manifest and a new copy of your application to your Web server or file share. ClickOnce will detect that there is an update available and upgrade the user's installation; no custom programming is required to update old assemblies. For more information, see WPF Application Deployment

Deploying ClickOnce Applications

For a full introduction to ClickOnce, see ClickOnce Deployment Overview. For step-by-step information about how to use these features, see the following Help topics,

See Also

Concepts

The WPF Designer for Windows Forms Developers

ClickOnce Deployment Overview

Application Settings Overview

Collaboration with Expression Blend

Other Resources

WPF Designer

Control Library

XAML