Overview
Visual Studio 2010 Beta 2 is available now. For Silverlight developers, the most exciting news about VS2010 is that Silverlight designer will be in feature parity with WPF designer, and VS2010 will support multi-targeting for Silverlight development. Silverlight Toolkit team has been working closely with Cider team in providing the design time experience for Silverlight SDK and Toolkit controls. The design time for Silverlight 3 SDK controls has been released with SL3 SDK in August 2009, and is also chain installed by VS2010 Beta2. The design time for Toolkit controls, together with sources for both SDK and Toolkit controls, and their design time, samples, unit tests etc, are in Silverlight Toolkit October 2009 Release. We purposely made October 2009 release to be in sync with Visual Studio 2010 Beta 2 on Monday, 10/19/2009. This post demonstrates the new design time experiences for Silverlight controls in VS2010.
Install
VS2010 installs side by side with VS2008. Multiple releases of Toolkit install side by side too. So it is perfectly safe to install VS2010 and Toolkit October 2009 release on your main machine. The only caveat is that if you have a pre August 2009 version of Silverlight 3 SDK installed, you will need to uninstall it first, before installing VS2010. You can install VS2010 Beta2 from http://msdn.microsoft.com/en-us/vstudio/dd582936.aspx, and Silverlight Toolkit from http://silverlight.codeplex.com.
Walkthrough
The October 2009 release is for Silverlight 3 only. It provides design time support for both VS2008 and VS2010, as well as Blend 3. Below walkthrough will be VS2010 only. Design time experience for VS2008 and Blend 3 are similar to July 2009 release. Please see my previous posts for design time experience with VS2008 and Blend3.
- Create a new Silverlight Application project in VS2010, notice that:
- the toolbox is populated with both SDK and Toolkit controls, with nice icons. If you have Blend3 installed before Toolkit, you may see a lot of Blend controls on the toolbox that are not supposed to. You can safely remove them by right click a control in the toolbox and select delete.
- it is a real designer: both the design view and the properties window work!
- double click TabControl in the toolbox will add a tabControl1. Notice that:
- A reference to System.Windows.Controls.dll is added, together with a xmlns definition: xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
- tabControl1 is initialized with a tabItem1, which itself is initialized with a header and <Grid/> content. (via DefaultInitializer)
- Property Items is selected in the Properties window (via DefaultPropertyAttribute)
- Properties are categorized (via CategoryAttribute), and have tooltip (via DescriptionAttribute)
- Double click tabControl1 will add an event handler for SelectionChanged event (via DefaultEventAttribute)
- right click tabControl1, select Add Tab (via PrimarySelectionContextMenuProvider):
- A new tabItem2 is added. Notice that:
- tabItem2 is initialized with a <Grid/> content
- tabItem2’s default property Header is highlighted. You can type into the text box next to it and change the object typed Header property directly. (via TypeConverterAttribute)
- all properties have nice infotip
- double click DatePicker on toolbox:
- a datePicker1 is added to tabItem2’s <Grid> (via ParentAdapter)
- datePicker1 is fully expanded, even though its IsDropDownOpen property is false (via DesignModeValueProvider)
- Now click tabItem1, notice that tabItem2’s content is hidden and tabItem1’s is shown:
- click Chart on toolbox:
- a chart1 is added to the right place, initialized with sample data, and nicely rendered
- default property Series is selected in the properties window
- click the … button next to Series property to pop up the Collection Editor:
- the Select item combobox is populated with the correct types (via NewItemTypesAttribute). The pink background for the icons are fixed now.
- the Properties window for the series highlights the default property DependentValuePath, have all properties categorized (like the Data Visualization category), and you can modify the object typed Title property directly in the text box.
- Create a simple data class with some simple properties, and add it as a data source, via Data | Show Data Sources menu item:
- Drag MyData over tabItem1’s header and drop it :
- a CollectionViewDataSource is inserted, used as DataContext of the LayoutRoot, and tabItem1’s Header is bound to it. (Via DefaultBindingPropertyAttribute)
- Just for fun, open the project in Blend 3, you will see very similar design time behaviors:
Conclusion
Above walkthrough is only a peek into all the design time features we have implemented for VS2010. I am very excited that VS2010 now provides a real designer for Silverlight, and I will continue enriching the design time experience for Silverlight in VS and Blend. Your feedback is welcome.
I will write a series of posts explaining how those design time experience are implemented.
Posts
