Channels ▼

Dan Wahlin

Dr. Dobb's Bloggers

Using the New Silverlight Designer in Visual Studio 2010

April 21, 2010

Silverlight developers everywhere rejoice! We now have a designer that can be used directly in Visual Studio 2010 which means you can drag-and-drop controls onto the design surface, access control properties, and modify them visually, set Grid columns and rows, plus more. Although I'm a huge fan of Expression Blend, it's nice to be able to modify controls directly without having to open up another program. If you're working on Silverlight 3 projects and are ready to move to Visual Studio 2010 you can continue to target version 3 while taking advantage of the new designer features.

I've found that the designer works great for most screens although it doesn't display some of my more complex layouts. That's not a big deal because those screens typically rely on a lot of custom templates and styles so I prefer to edit them in Blend anyway. Figure 1 is an example of what the new Visual Studio 2010 designer looks like. I personally find the split view to be the most useful since I still like to edit XAML by hand for some tasks. You can view the XAML or designer in full-screen mode if you'd like.

Figure 1

In addition to dragging controls onto the designer you can also double-click them to handle their default events. This is especially useful for Button controls where you'd like to quickly add a Click event handler. The new Properties window allows control properties and events to be accessed directly as in Figure 2.

Figure 2

One of my favorite features of the Properties window is that you can search for specific properties which is very useful when you can't remember the exact name of the property you're after. Although accessing property values and editing them without touching XAML is nice, one of the best features offered by the Properties window is the ability to set the DataContext, Source, Path, Converter and binding mode visually. For example, I use a custom AutoCompleteComboBox control in a lot of my screens that exposes an ItemsSource property. By highlighting the control and then locating the ItemsSource property in the Properties window I can handle the binding visually as in Figure 3.

Figure 3

The designer can also be used to define Grid columns and rows which is a huge boost to productivity especially if you're doing that by hand right now. Figure 4 is an example of a Grid control that has three rows and two columns added. By giving focus to the Grid in the designer I can click on the left edge to add rows and on the top edge to add columns.

Figure 4

You can also handle fixed sizing, star sizing and auto sizing (where the contents determine how big a row or column will be) by clicking on the menu in Figure 5.

Figure 5

Another great feature is the ability to reset the alignment, margins or size of a control showing in the designer. This is something I use a lot for margins since I may drag a control around on the interface to experiment with different placements but then want to remove the margin values that were added once I'm done. Just right-click on the target control and select Reset Layout --> All if you'd like to reset all alignment, margin, and size information for the control.

Figure 6

There's even more that the new Visual Studio 2010 Silverlight designer can do but this will hopefully whet your appetite and get you excited about making the move to 2010 if you haven't already.

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Video