This documentation is archived and is not being maintained.

The WPF Designer for Windows Forms Developers

The Windows Presentation Foundation (WPF) Designer for Visual Studio shares many similarities with the Windows Forms Designer, but also differs in several ways. This topic describes some of the differences, and also how to accomplish tasks that are familiar from the Windows Forms Designer by using the WPF Designer.

The most obvious difference between the Windows Forms Designer and the WPF Designer is the split view. Split view allows you to view both the design surface and the XAML markup at the same time. The WPF Designer emphasizes XAML view and provides a complete editing experience, including IntelliSense, for your application's XAML. You can accomplish many tasks that are familiar from the Windows Forms Designer by using XAML view. Split view provides immediate feedback by displaying the effects of your edits in XAML view. For more information about split view, see Split View: Viewing the WPF Design Surface and XAML at the Same Time.

You can also use Expression Blend alongside Visual Studio to accomplish the tasks that are not supported in the WPF Designer. For more information, see Collaboration with Expression Blend.

There are a variety of enhancements to the WPF Designer that are not available in the Windows Forms Designer. These enhancements include:

  • Margin lines and stubs: Margin lines around each control indicate that a margin has been set for that control. A margin stub indicates that no margin has been set for that control edge.

  • Zoom control: The Zoom control appears in the upper-left corner of Design view and allows the developer to zoom in or out on the design surface to perform exact adjustments.

  • Snaplines: While snaplines appear in both the WPF Designer and the Windows Forms Designer, in the WPF Designer they also display exact values. In addition to displaying control alignment, snaplines also show text alignment for text-based controls. For more information, see How to: Align to Both Text Baselines and Margins.

The following table provides a map for understanding how to accomplish various tasks in the WPF Designer.

Task in Windows Forms Designer

Equivalent in WPF Designer

Absolute layout

Use the Canvas class as the root element.

Alphabetic sorting in the Properties window

To find a property, use the Search box in the Properties window.

To browse properties, use IntelliSense in XAML view or in the Code Editor. You can also use the Object Browser.

Anchoring

Use the Grid and the anchor capabilities in Design view to set your anchor targets.

Animation

Use Expression Blend.

Application icon

Set the Icon property on the application's main Window class.

Assigning tab order

Select each control and set the corresponding TabIndex property in XAML view or in the Properties window. The default tab order is the order the controls appear in the parent container.

Components and the component tray

Non-visual components do not appear in the WPF Designer Toolbox. Use XAML view and namespace mapping to reference resources and non-local types. For more information, see How to: Import a Namespace into XAML.

The Data Sources window and data binding

The WPF Designer does not support the Data Sources window in this release. Use XAML view to define your data sources and data bindings.

You can also use Expression Blend to define your data sources and data bindings if you are binding to XML or objects. Copy and paste the automatically generated XAML to XAML view in the WPF Designer. You can also open your Visual Studio project in Expression Blend and create resources directly.

Declaring and attaching event handlers

For the default event handler, double-click the control in Design view. For other events, use IntelliSense in XAML view and select the desired event from the drop-down list. For more information, see How to: Create a Simple Event Handler.

Designing menus

Use XAML view or use the Collection Editor in the Properties window on the Items collection and set the Header property of each item.

Defining brushes and colors

For complex brushes, such as gradient brushes, use Expression Blend. Copy and paste the automatically generated XAML to XAML view in the WPF Designer. You can also open your Visual Studio project in Expression Blend and create resources directly.

Deleting gridlines

Use XAML view to remove the relevant row definitions or column definitions, then fix up the Grid.Column or Grid.Row assignments of the affected child controls that are parented inside the Grid.

Displaying an image

Add the image to the project and set its build action to Resource. Place an Image control on the design surface and set its Source property in the Properties window. For more information, see How to: Assign an Image to an Image Control. You can also set the source image by using the pack URI syntax. For more information, see Pack URIs in Windows Presentation Foundation.

Displaying a UserControl in the Toolbox

Add a project reference to the user control's assembly and use IntelliSense in XAML view to assign the xmlns attribute.

You can also use the Choose Toolbox Items dialog box and browse to the assembly that contains your control, but there are limitations. For more information, see WPF Components Tab, Choose Toolbox Items Dialog Box.

Distributing controls across a form

Use the StackPanel element.

Docking

Use the DockPanel element for multiple controls. You can also use a Grid and snap the controls to grid cell boundaries by using gridline snaps.

Error provider

No visual design time. Use the Validation class in XAML view. For more information, see How to: Implement Binding Validation.

Expander

No visual design time. Use XAML view.

Frame

No visual design time. Use XAML view.

Go to Definition

Open all XAML files in the project and Use the Find and Replace window. For more information, see Find and Replace Window.

Help provider

No visual design time. Use XAML view.

Hyperlink

Use the Hyperlink class within flow content.

InkCanvas

No visual design time. Use XAML view.

Locking

Not supported.

MediaElement

No visual design time. Use XAML view.

Mnemonics

Precede the mnemonic character with the underscore character "_" instead of the ampersand character "&".

Object selector drop-down list in the Properties window

Select the object in the Document Outline window, the tag navigator, or Design view. To show the Document Outline window, open the View menu, point to Other Windows, and select Document Outline.

Popup

No visual design time. Use XAML view.

Referencing non-local types in XAML

Add a project reference and use IntelliSense in XAML view to set the xmlns attribute. For more information, see How to: Import a Namespace into XAML.

NoteNote:

The WPF Designer attempts to make matches based on the namespace alias after the xmlns attribute, instead of the full syntax using clr-namespace.

Renaming and refactoring

Open all XAML files in the project and Use the Find and Replace window. For more information, see Find and Replace Window.

Removing margins

In Design view, select all elements that will have margins removed. In the Properties window, enter 0 for the Margin property.

Resizing a form after placing a control

Because resizing the window may resize the content, use the following process. Select all the elements and then cut. Next, resize the window, and then paste.

Setting text for the Button, Label, CheckBox, RadioButton controls

In the Properties window, set the Content property. Alternatively, set the text in XAML view.

Setting complex properties visually, for example, font properties, resources, brushes, and colors

Use XAML view or Expression Blend.

Smart tags

Not supported.

TabControl

No visual design time. Use XAML view.

Tooltips

No visual design time. Use the ToolTip class in XAML view.

Viewbox

No visual design time. Use XAML view.

Visual inheritance

Not supported.

WindowsFormsHost

No visual design time. Use XAML view.

Z-order

Select and move the element tag in XAML view, or select Order in the context menu in Design view. Use the Document Outline window to confirm the element's z-order.

Show: