Share via

Tips and Tricks for working with the WPF and Silverlight Designer in Visual Studio 2010

  • Article

This article is a collection of tips and tricks that we have gathered over the time we've spent building and using the Visual Studio 2010 WPF and Silverlight Designer, which you might not find elsewhere. We think they make working in the designer more fun and productive experience – we hope you'll agree!

Table of Contents

  1. Tip 1: Install Silverlight 4 Tools even if you are building WPF apps
  2. Tip 2: The Properties Window works when just editing XAML too.
  3. Tip 3: Getting the Properties Window to work when working with Resource Dictionaries and App.xaml
  4. Tip 4: Use Sample Data for a happier design experience in your templates
  5. Tip 5: Quick way to add the d: namespace for Sample Data
  6. Tip 5: Pressing Alt key while move/resize hides the snaplines:
  7. Tip 6: Pressing the Spacebar lets you Pan the Design Surface with the Mouse
  8. Tip 8: Easy ways to select hard-to-select things on the design surface
  9. Tip 9: Use Bring to Front / Send to Back to set tab order within a panel
  10. Tip 10: Use the new multi-monitor support to open my XAML and Design panes in separate windows
  11. For more Tips & Tricks…
  12. Comments

Tip 1: Install Silverlight 4 Tools even if you are building WPF apps 

The Silverlight 4 Tools for Visual Studio 2010 contain many features and several bug fixes that are useful for WPF developers too (see this blog post for details of the features) – you should install it even if you are not working on Silverlight applications.

Tip 2: The Properties Window works when just editing XAML too. 

The Properties Window has a lot of useful features such as the Binding and Resource Pickers, Go To Definition, and various useful editors like the Brush Editor. Lots of people assume the only time you can use these features is when you're working on the Design pane – but that's not true! Open up the Properties Window next time you are in XAML view for your Page or Window, and you'll see that the XAML element your cursor is in is shown in the Properties Window, so you can use those features there too. You can see this tip illustrated in this video. 

Note that if you have set your Tools-Options to open in XAML-only mode, or are working with a view that is XAML-only by default such as App.XAML or a Resource Dictionary, you'll need to use Tip 3 below to activate the properties window before you can use it.

Tip 3: Getting the Properties Window to work when working with Resource Dictionaries and App.xaml 

Closely linked to Tip 2 – for reasons of performance, by design the WPF and Silverlight Designer does not load the Properties Window (or the design view) for app.xaml and resource dictionary XAML files. In addition, users may have set their Tools-Options settings to open XAML in XAML only view (i.e. with no designer visible).

However if you want to make use of the useful Properties Window features (such as the Go To Definition feature for instance) when in such a file, all you need to do is activate the design pane (use the splitter bar controls to activate split view, then click anywhere on the grey "Intentionally Left Blank" design pane screen). Then you can shift the splitter so that only a tiny part of the designer is visible to avoid wasting screen real-estate.

The designer will remember this setting on a per-file basis, so next time you open that file, it will activate the designer too. You can see this tip illustrated in this video.

Tip 4: Use Sample Data for a happier design experience in your templates 

You may have had the frustrating experience of attempting to edit an item template with no data in it – it is nearly impossible to work out how your design will actually look based on the design-time experience, especially when your design sizes to the content it is bound to. Fortunately it is now possible to add sample data to your application. We show you how in this video, and you should also check out Sample Data in the Visual Studio 2010 WPF and Silverlight Designer for more details. This not only makes this sort of design easier, it can also help you avoid typos in your data binding statements by enabling the use of the Binding Builder.

Tip 5: Quick way to add the d: namespace for Sample Data 

When working with Sample Data, you will need the d: namespace in your XAML. Entering the exact namespace and other required document heading definitions such as mc:ignorable for this is a pain – but you don't have to!

If you need to add these definitions to a Page, Window or UserControl in the designer:

  • Select the root-most item (see Tip 8 below for selection tips)
  • Click the root size mode button twice

Clicking the root size mode button twice, will insert the necessary XAML header information but leave your design's root width/height behavior unaltered. For detailed information about the root size mode button please see this blog post.

Tip 5: Pressing Alt key while move/resize hides the snaplines: 

For a complex form, move/resize of an element on the designer surface might result in a lot of snaplines being shown. If you don't want to see them, you can easily turn them OFF by pressing and holding the ALT key during drag move/resize.

Tip 6: Pressing the Spacebar lets you Pan the Design Surface with the Mouse 

When you have a large design or are zoomed in, it can be very helpful to be able to pan with the mouse to get to the area you want to view. When you're over the Design Surface, just press the Spacebar and move your mouse to get panning.

Tip 8: Easy ways to select hard-to-select things on the design surface 

Most of the time you can just click on an object to select it. Upon selection you'll notice that the element is also selected in the XAML Editor, Properties Window and Document Outline.

However there are tricky scenarios where this isn't always possible to click on an object to select it. In those cases, these tips will come in handy:

Use Tab Key To Go To The Next Control On Design Surface

When a control on the design surface is selected, pressing the Tab key will change selection to the next control in the tabbing order.  Pressing SHIFT+TAB will select the previous control in the tabbing order.

Pressing ESC Key or right click and use the Selection menu to Select Parent Control

With a control selected on the design surface, pressing the ESC key will cause selection to be changed it its parent control.  Continued pressing will continue to change selection to the next parent control. There's also a right-click menu action that lets you quickly select parent items of the selected item.

Use the Document Outline or the Path Control to view the XAML tree structure and select objects

The Document Outline window has a very useful view of the XAML tree and can be used to select any point in the tree. The Path Control at the bottom of the XAML editor also allows selection of parent controls (and children via the button at its right-hand end).

Tip 9: Use Bring to Front / Send to Back to set tab order within a panel 

Because WPF and Silverlight use the Document Order (the order in which elements appear in the XAML) to set both Z Order AND Tab Order in a document by default, you can use the right click context menu to move items in a form forward and backward in the Tab Order as well as changing their Z-order. This is significantly easier than individually setting the Tab Order of items one by one.

Tip 10: Use the new multi-monitor support to open my XAML and Design panes in separate windows 

Visual Studio 2010 has great multi-monitor support with tear-off windows etc. We would like to add real support for tearing off the two parts of the split view of the WPF and Silverlight Designer in a future release – meanwhile there are a couple of workarounds:

If your goal is multi-monitor with code on the right and design surface on the left (for instance), then you can maximize VS2010 across both screens, set the splitter to be VERTICAL (there are buttons in the splitter bar that let you do this), then place the splitter at the join between the two screens (quickest approach)

If you want more flexibility, you can:

  • Open a second tab group (right click on a tab and open new Vertical Tab Group)
  • Open the XAML as normal in one of the tab groups
  • Open the XAML again using "Open With"…"Source Code Editor"
  • Put the XAML and the designer in different tab groups, maximize the designer in the first, and now you've got full, tearable-window, multi-monitor friendly goodness for your XAML and designer views

For more Tips & Tricks… 

You might also want to check out the video from our session at TechEd USA 2010, which shows many of the tips and tricks in this list in action.

Comments 

We hope you find these tips useful. We plan to update this post when we discover new tips and tricks that we think are useful. You can send us your own tips, your feedback on this article, or discuss any other WPF & Silverlight Designer topic, over on the WPF and Silverlight Designer Forums!

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

  • How the above features enable your workflow
  • What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Mark Wilson-Thomas
Expression Team

Comments

  • Anonymous
    July 04, 2010
    KB982218 is great but not available for most of the localized versions of VS2010

  • Anonymous
    July 04, 2010
    The properties window doesn't work when you're editing XAML unless you've loaded the design view. If you've set the default to always open in XAML view, you'll get a "Property editing not available" message instead. You have to switch to design view and then back to XAML view before the properties window will work.

  • Anonymous
    July 06, 2010
    The comment has been removed

  • Anonymous
    July 06, 2010
    @Guest: Silverlight 4 Tools for Visual Studio 2010 (KB982218) is currently available in the following languages: ENU, JPN, DEU, and FRA In the near future, we will ship a version that also supports ITA,ESN,RUS, CHS, CHT and KOR - watch this space for an announcement when that happens. Sorry for any inconvenience caused during the intervening period. Mark

  • Anonymous
    July 09, 2010
    Hi, When working on complex (multitab) xaml pages, the outlining mode in xaml view is not available. Als intellisense is not working. I've installed the Silverlight 4 tools.... In 2008 this happens a lot, I hoped VS2010 would be better. Marcel

  • Anonymous
    July 12, 2010
    Marcel, Sorry you are having a problem. Does this happen for all projects?  Do you have a project with the issue you can post and send me a link to? Thank you, Karl

  • Anonymous
    July 19, 2010
    To all those who were awaiting versions of the Silverlight 4 Tools for Visual Studio 2010 in ITA,ESN,RUS, CHS and KOR, I am pleased to confirm these are now available for download at the locations linked below. I have included links for the JPN, DEU and FRA versions as these have been refreshed as well. Regards Mark Wilson-Thomas Program Manager, WPF & Silverlight Designer, Visual Studio Language URL ESN www.microsoft.com/.../details.aspx ITA www.microsoft.com/.../details.aspx RUS www.microsoft.com/.../details.aspx CHS www.microsoft.com/.../details.aspx CHT www.microsoft.com/.../details.aspx KOR www.microsoft.com/.../details.aspx JPN (Refresh) www.microsoft.com/.../details.aspx DEU (Refresh) www.microsoft.com/.../details.aspx FRA (Refresh) www.microsoft.com/.../details.aspx