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!
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.
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.
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.
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.
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:
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.
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.
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.
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:
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.
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.
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).
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.
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:
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.
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:
Thank you for your feedback and have a great day,
Mark Wilson-Thomas Expression Team
KB982218 is great but not available for most of the localized versions of VS2010
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.
Thanks for the comment Richard! You are quite right, and I've updated tips 2 and 3 in the article to include this information.
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.
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.
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?
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.
Program Manager, WPF & Silverlight Designer, Visual Studio
JPN (Refresh) www.microsoft.com/.../details.aspx
DEU (Refresh) www.microsoft.com/.../details.aspx
FRA (Refresh) www.microsoft.com/.../details.aspx