Silverlight Designer for Visual Studio 2010
Microsoft Silverlight will reach end of support after October 2021. Learn more.
The Silverlight Designer for Visual Studio 2010 provides visual design support for creating Silverlight and Windows Presentation Foundation (WPF) 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 view. The following illustration shows the Silverlight Designer and some of its supporting windows.
Silverlight Designer
.png "Overview of the Silverlight Designer")
When you start the Silverlight Designer for the first time, the Toolbox, 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
- Help Creating Applications and Controls
- Related Topics
Design View
Design view provides a visual design surface for building your Silverlight controls and the layout of your 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. For more information about using controls in the designer, see Getting Started with Controls. For more information about layout, see Silverlight Layout System. Design view provides many features for arranging controls in your Silverlight application's page. Some of the Design view features are shown in the following illustration.
Design View
.png "Design view features in the Silverlight Designer")
Zoom
The Zoom control lets you size the design surface. You can zoom from 10% to 20x.
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 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.
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.
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 about manipulating controls in Design view, see Getting Started with Controls.
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. For more information about manipulating controls in Design view, see Getting Started with Controls.
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 about margins, see Margin.
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.
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.
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.
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.
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.
XAML View
The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. The 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. For more information about XAML, see XAML. The following illustration shows XAML view.
XAML View
.png "Silverlight Designer XAML View")
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.
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.
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.
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.
Properties Window
.png "Properties window")
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 navigate to the definition of a style, open the data binding builder or the resource picker. The following image shows the options available when you click the property marker of the Style property.
Go to Value Definition
.png "Go to Value Definition option.")
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 about data binding with the Silverlight Designer, see Data Binding in the Silverlight Designer. The following illustration shows the data binding builder.
Data Binding Builder
.png "data binding builder")
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. The following illustration shows the resource picker.
Resource Picker
.png "Resource picker")
Brush Editor
The brush editor lets you create many different kinds of brushes in the Properties window. The following illustration shows the brush editor.
Brush Editor
.png "Brush editor")
Data Sources Window
You can quickly integrate data into your Silverlight application by using the Data Sources window. The following illustration shows an example of the Data Sources window.
Data Sources Window
.png "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 Data Binding in the Silverlight Designer and Binding 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. The following illustration shows an example of the Document Outline window. For more information about the Document Outline window, see Navigating XAML Elements with the Document Outline Window.
Document Outline Window
.png "Document Outline Window")
Help Creating Applications and Controls
For more information about Silverlight creating applications and controls, see the following topics.
Description |
Topic |
|---|---|
Creating a new Silverlight application or class library with Visual Studio. |
|
Using controls in a page. |
|
Creating event handlers for controls. |
|
Manipulating the layout of Silverlight applications. |
|
Data binding with the designer. |
|
Creating a design-time experience for your Silverlight controls. |
|
Creating WPF controls and applications. |