WPF Designer for Windows Forms Developers
The 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. After you have zoomed in, you can also pan across the design surface.
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 |
In the Properties window, click the Alphabetical button. To find a property, use the Search box. You can browse properties by using 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 |
Use the Data Sources window, For more information, see Binding WPF Controls to Data in Visual Studio. You can bind to a design-time instance of your data by using the DesignInstance markup extension. For more information, see Walkthrough: Using a DesignInstance to Bind to Data in the Designer. 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 |
In the Properties window, click the Events button and double-click the desired event. For the default event handler, double-click the control in Design view. You can also use IntelliSense in XAML view to select the desired event. 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 |
In the Properties window, scroll to a brush-type property and click the down-arrow. Use the brush editor to design your brush. For more information, see How to: Create a Brush by Using the Brush Editor. You can 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 |
Click a gridline indicator and drag it from the grid rail. For more information, see How to: Remove Rows and Columns from a Grid. You can also 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 |
Use the Image control. For more information, see How to: Add Images to a WPF Project. |
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. |
Go to Definition |
In the code behind, right-click the symbol and select Go To Definition from the shortcut menu. To search from XAML view, 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. .gif "Note") 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. |
Smart tags |
Not supported. |
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
WPF and Silverlight Designer Overview