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.
Emphasis on XAML
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.
WPF Designer Enhancements
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.
Windows Forms Designer Tasks and WPF Designer Equivalents
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. |
No visual design time. Use XAML view. |
|
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. |
No visual design time. Use XAML view. |
|
Locking |
Not supported. |
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. |
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. Note 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. |
No visual design time. Use XAML view. |
|
Tooltips |
No visual design time. Use the ToolTip class in XAML view. |
No visual design time. Use XAML view. |
|
Visual inheritance |
Not supported. |
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. |
See Also
Concepts
Windows Forms Controls and Equivalent WPF Controls
Reference
User Interface Reference for the WPF Designer