WPF and Silverlight Designer Overview

The WPF and Silverlight Designer provides visual design support for creating WPF and Silverlight applications. 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. The following illustration shows the WPF and Silverlight Designer and some of its supporting windows.

When you start the WPF and Silverlight Designer for the first time, the Data Sources window and the Document Outline window are collapsed on the left side of Visual Studio. If you show and pin the tabs on the left, you see the previous view, which is a useful arrangement for using the design surface.

This topic contains the following sections:

• Design View

• XAML View

• Properties Window

• Data Sources Window

• Document Outline Window

• Building Rich, Interactive User Interfaces

• Collaboration with Expression Blend

Design View

Design view provides a visual design surface for building your WPF and Silverlight controls and applications. It shows a rendering of the XAML currently in XAML view. When you change controls on the design surface, XAML view updates to reflect your changes. 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

The Zoom control lets you size the design surface. You can zoom from 10% to 20x. Your zoom setting is saved in the solution's .suo file.

Pan

When the design surface is zoomed in, and horizontal or vertical scrollbars appear, you can pan to view parts of the design surface that are off-screen. Press and hold the SPACEBAR, and then drag the design surface to pan.

Fit In View

The Fit in view button lets you 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

Grid rails are used 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

Gridlines are used 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 and lets you move the panel. 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 and let you resize the control. 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

Snaplines help you 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.

Information Bar

The Information bar appears at the top of Design view and displays information about rendering problems in Design view. In some cases, you can click the Information bar to get additional information about the problem. The following illustration shows an expanded view of the Information bar.

Sizing Bar

When you move the mouse pointer over a grid rail for a Grid control that has two or more columns or rows, the sizing bar appears outside of the rail. The sizing bar lets you set fixed, star, and Auto sizing options for Grid rows and columns. For more information, see How to: Size Rows and Columns in a Grid Control.

Root Sizing Tag

The root sizing tag appears at the lower-right of the window in Design view when the window is selected. The root sizing tag lets you toggle the root size of the window between auto and fixed. For more information, see Design-time Attributes.

XAML View

The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. The WPF and Silverlight Designer provides a XAML view and a synchronized Design view of your application's rendered XAML markup. XAML view includes IntelliSense, auto-formatting, syntax highlighting, and tag navigation. Some of the XAML features are shown in the following illustration.

Split View Bar

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

Markup Extension IntelliSense

In addition to standard language IntelliSense, XAML view supports IntelliSense for markup extensions. When you type a left brace ({) in XAML view, IntelliSense shows the available markup extensions. When you pick a markup extension from the list, IntelliSense shows the available attributes. For more information, see Walkthrough: Editing XAML in the WPF Designer.

Tag Navigator

The tag navigator appears below XAML view and lets you move to any parent tag of the currently selected tag in XAML view. When you move the mouse pointer over a tag in the tag navigator, a thumbnail preview is displayed for that element. Walkthrough: Editing XAML in the WPF Designer.

Zoom

The Zoom control lets you size XAML view. You can zoom from 20% to 400%.

Properties Window

The Properties window lets you set property values on controls in Design view. An example of the Properties window is shown in the following illustration.

The top of the Properties window has various options. To change the name of the currently selected control, position your cursor in the Name box and type the name. The upper-right displays a thumbnail preview of the currently selected control. To list the properties by category or alphabetically, click the Categorized button or the Alphabetical button. To sort the properties by source, click the Sort by property source button. To see the list of events for a control, click the Events button. To search for a property, start to type the name of the property in the Search box. The Properties window shows the properties that match your search as you type.

To the right of the property name, in the first column, is a property marker. The property marker indicates whether there is a data binding or a resource applied to the property. When you click the property marker, you can open the data binding builder, resource picker, or navigate to the definition of a resource. The following illustration shows the options that are available when you click the property marker of a style.

Data Binding Builder

The data binding builder lets you create data bindings without typing any XAML. You can create bindings to resources, data contexts, and element properties. You can also apply value converters. For more information, see Walkthrough: Creating a Data Binding by Using the WPF Designer and Walkthrough: Using a DesignInstance to Bind to Data in the Designer.

Margin Editor

The margin editor enables you to see each margin setting and how it affects placement of the control. You can also change margins for one control or edit the margins for several controls with the margin editor. For more information, see How to: Set Margins for a Control in the WPF Designer.

Resource Picker

The resource picker lets you find and assign resources to properties in the Properties window. You can also extract hard-coded values to resources to promote re-use. For more information, see Using Resources.

Brush Editor

The brush editor lets you create many different kinds of brushes in the Properties window. For more information, see How to: Create a Brush by Using the Brush Editor.

Data Sources Window

You can quickly integrate data into your WPF application by using the Data Sources Window. When you have established a data connection, you can drag data tables onto the design surface, and business logic and data bindings are automatically generated. You can bind to an object, an ADO.NET Dataset, an Entity Data Model, or a service. For more information, see Binding WPF Controls to Data in Visual Studio.

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. An example of the Properties window is shown in the following illustration.

For more information, see Navigating the Element Hierarchy of a WPF Document.

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 and Silverlight Designer, you can easily create WPF applications. Just select the controls with your mouse 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.

Description	Help topic
Creating a new WPF application with Visual Studio.	How to: Create a New WPF Application Project
Using controls in a window.	How to: Select and Move Elements on the Design Surface
Creating event handlers for controls.	How to: Create a Simple Event Handler
Handling events from a window and the window's controls.	How to: Use Attached Events
Navigating a WPF or Silverlight layout.	Navigating the Element Hierarchy of a WPF Document
Creating dynamic layouts.	Layouts in the WPF Designer
Creating custom WPF controls.	How to: Create a WPF UserControl Library Project
Creating data bindings.	Data Binding in the WPF Designer

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 WPF and Silverlight Designer is optimized for software developers, and Expression Blend is optimized for graphical designers. For more information, see Collaboration with Expression Blend.

See Also

Concepts

WPF Designer for Windows Forms Developers

Collaboration with Expression Blend

Other Resources

WPF Designer

Control Library

XAML in WPF

Change History

Date	History	Reason
March 2011	Updated information about Properties window and margin editor.	Information enhancement.