Silverlight Toolkit Design Time Features: March 2009 Release Update

Introduction

The March 2009 Release of Silverlight Toolkit has lots of new features and improvements. Among them, updates for design time features:

• a new msi based installer that provides tight integration with Visual Studio and Blend out of box, thus making Silverlight development with the Toolkit much easier;
• support both Silverlight 2 development with Visual Studio 2008 and Blend 2, and Silverlight 3 development with Visual Studio 2008 and Blend 3;
• add design time features for the six new controls (Accordion, DomainUpDown, LayoutTransformer, TimePicker, TimeUpDown, TransitioningContentControl);
• leverage the new design time extensibility framework in Blend 3 (and soon in Visual Studio 2010) and improve design time features for existing controls, like default intializers, AlternateContentPropertyAttribute, and custom editors, to provide a much better design experience, especially in Blend 3.

This post is an update for my prior post Design Time Features in Silverlight Toolkit.

Silverlight 2 Development with Visual Studio 2008 and Blend 2

Setup

• First, follow step 1 and 2 on http://silverlight.net/GetStarted to install Silverlight 2 and Blend 2:

• Then follow step 4 to Silverlight Toolkit CodePlex page, click “Download the latest release” link:

• Click the “Silverlight 2 Toolkit March 2009 Installer” link, and run the msi: (You can also save the msi to your computer and run it later)

After the installer finishes, you will see Silverlight 2 Toolkit installed on your computer:

Please note:

• there is a namespace (both CLR and xmlns prefix) and assembly name change from Microsoft.Windows.Controls in previous releases to System.Windows.Controls in this release. Please see Shawn Burke’s post Silverlight Toolkit March 2009 Release for a good explanation for the change and its implications for development with Silverlight Toolkit.
• besides the existing four toolkit assemblies (Controls, Controls.Input, Control.DataVisualization, and Controls.Theming) in previous releases, there is a new assembly added in this release: Controls.Layout, which contained Accordion, LayoutTransfer, and TransitioningContentControls.
• we still follow the same convention for design time assemblies: there are three design time assemblies for each run time assembly (.design, .expression.design, and .visualstudio.design), and all design time assemblies reside in the Design subfolder.

There is also a new Microsoft Silverlight 2 Toolkit March 2009 Start Menu item group to provide easy access to all Toolkit related information, like docs, samples, source code on local computer, and Silverlight Toolkit forums and CodePlex page on web:

Walkthrough

Let’s use a walkthrough on how to create a Chart control in Blend to demonstrate the design time features for Silverlight Toolkit:

• Create a new Silverlight 2 Application project in Blend:

• Add reference to the Toolkit assemblies: (Here I add all Toolkit assemblies, but only System.Windows.Controls.DataVisualization.Toolkit.dll is needed for this walkthrough)

• open Asset Library, click Custom Controls tab, and double click the Chart control:

• Add a Chart control to the design surface, set its Title property under Data Visualization category in Properties Panel:

• Click the New button next to DataContext property under Common Properties, select PointCollection from the Select Object dialog, and then click OK:

• In XAML editor, replace the generated XAML “<PointCollection />” to be like those highlighted in below screenshot, to provide some data for the Chart control to display:

• Click the … button next to “Series (Collection)” property under Common Properties category, click “Add another item” button in the Series Collection Editor dialog, select ColumnSeries in Select Object dialog, and then click OK:

• Back to the Series Collection Editor dialog, set properties for the newly created ColumnSeries in the right Properties pane:
  • Set DependeptValuePath to X and IndependentValuePath to Y, both in Common Properties category
    
  • Click the rectangle to the right of ItemsSource property, select Data Binding… from the popped up context menu:
    
  • Select the only item, PointCollection (Array) item, in Fields listbox in the Create Data Binding dialog, then click the Finish button:
    
  • Back to the Series Collection Editor dialog again, notice the ItemsSource property is now surrounded with a yellow rectangle, indicating it now has a changed data binding value. Click OK to close the Series Collection Editor dialog:
    

• We are back to Blend main window, and voila, we have a Chart control rendered nicely in the design view:

We can hit F5 to build and run the project from Blend, or open the project in Visual Studio to continue editing the xaml and code. Notice in below screenshot that the Visual Studio toolbox is auto populated with Toolkit controls:

Silverlight 3 Development with Visual Studio 2008 and Blend 3

Setup

Before you start, please read the Important developer notes on http://silverlight.net/getstarted/silverlight3/default.aspx#tools carefully (in below screenshot too).

• First, follow the first three steps on http://silverlight.net/getstarted/silverlight3/default.aspx#tools page to install Silverlight 3 Beta Tools, SDK (some of previous Toolkit controls, like DockPanel, WrapPanel, Expander, Viewbox, HeaderedContentControl, HeaderedItemsControl, TreeView, AutoCompleteBox etc, and their design time assemblies, have moved to SDK in Silverlight 3), and Blend 3 Preview:
• Then, follow the fourth step to Silverlight Toolkit CodePlex Project site, click Download the latest release link, then click and run the Silverlight 3 Toolkit March 2009 Installer:

After the installer finishes, you will see Silverlight 3 Beta SDK and Toolkit installed on your computer:

• SDK:

• Toolkit:

And the Microsoft Silverlight 3 Toolkit March 2009 start menu item group for easy access to all Toolkit information:

Walkthrough

Now let’s do the same create a Chart control walkthrough, but this time with Blend 3:

• Start Microsoft Expression Blend 3 Preview from Start menu, create a new Silverlight 3 Application + Website project:

• Click the Asset Library, notice the Controls tab is pre-populated with Silverlight 3 runtime and SDK controls, including those used to be in Toolkit, like DockPanel, Expander, TreeView etc. Blend 3 populates Asset Library asynchronously, so you may notice a few seconds delay before the Controls tab is fully populated.

• Click the Custom Controls tab, notice it is pre-populated with Toolkit controls:

• Double click the Chart control, click and drag on the design surface, and voila, a Chart controls is created, initialized with some sample data, and nicely rendered. We had to go through a lot manual steps in Blend 2 to create the same result:

Please note in above screenshot:

• in the projects panel on the right, reference to System.Windows.Controls.DavaVisualization.Toolkit.dll is automatically added;
• in the xaml editor, the xmlns:chartingToolkit definition is automatically added
• also notice a few Blend 3 new features, like custom icon for Chart control (in both Object and Timeline pane and Properties pane), default initializer that generates the initial xaml for the Chart control.

Since the Chart control is so easily created, let’s do a bit more in Blend 3 walkthrough.

• Click Properties Tab on the right, and expand the Chart control in Objects and Timeline pane on the left:

Please note in above screenshot:

• In Properties Panel, the little white dots to the right highlight the properties initialized by Chart control’s default initializer;
• In Objects and Timeline Panel, there are LegendItems and Axes properties under Chart object, and IndependentAxis and DependentRangeAxis properties under ColumnSeries object. Those are called alternate content properties. Displaying them in the object hierarchy allows easy access to those properties at design time. For example, we can drag and drop a LinearAxis to the Axes property:

So comparing the same create a Chart control walkthrough in Blend 3 and Blend 2, we can see that Blend 3 a much better designer, and our design time assemblies for Blend 3 have leveraged many of the new design time extensibility capabilities, like default initializer and alternate content property, to greatly improve the design experience for Toolkit controls.

Now open the project in Visual Studio:

Please notice that:

• The toolbox on the left is pre-populated with SDK and Toolkit controls.
• The output windows at bottom right displays an error message about failed to load design assembly. Ignore it safely.

Design Experience in Visual Studio 2008 (Both Silverlight 2 and 3)

Toolkit design experience in Visual Studio is pretty much the same for both Silverlight 2 and Silverlight 3, so we can continue the following from either of above the two walkthroughs. For convenience sake, we will continue from the Silverlight 3 walkthrough immediately above.

Now drag and drop the Accordion control from toolbox to the XAML editor:

We can see that:

• In XAML editor
  • xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"  is automatically added
  • <layoutToolkit:Accordion></layoutToolkit:Accordion> is automatically added
• In Solution Explorer
  • references to System.Windows.Controls.Layout.Toolkit assembly, and the two assemblies it depends on, System.windows.Controls.Toolkit in Toolkit and System.Windows.Controls in SDK, are added automatically to the project

Now drag and drop a few controls from toolbox to XAML editor.

Please notice in above screenshot that:

• in XAML editor
  • we can see that we dragged and dropped Calendar, AutoCompleteBox and NumericUpdown to the Accordion
  • appropriate xmlns definitions and xaml code are added automatically
• In the Preview window
  • XAML code is properly rendered as we edit in XAML editor
• In Code editor
  • notice the intellisense and infotip
  • Safely ignore the errors in Errors Window as we type in XAML or code editors before we finish the statement
• In Solution Explorer:
  • references to needed assemblies are automatically added

Hit F5, and it builds and runs fine:

Credits

I certainly hope you are excited about the design experience improvements, since I implemented most of it :-) Jeff Wilcox implemented the installer, and Justin Angel wrote the spec for both the design time experience and installer. Many of my other colleagues contributed to the design experience too, especially RJ Boeke, Jafar Husain, and David Anson. Many thanks to the folks in Blend and Cider teams, particularly Unni Ravindranathan, Gary Linscott, Peter Blois; Brian Pepin, and Eric Fisk. Without them, none of the design experience improvements would be possible. And to Shawn Burke, for his support and emphasis on design time features, and deep involvement in solving key hard technical problems.

I will write a follow up post on design time implementation updates in March 2009 release. Stay tuned!

Technorati Tags: Silverlight Toolkit,Silverlight,Design Time Features,Visual Studio,Blend,Silverlight 3,Silverlight 2,Silverlight SDK,Visual Studio 2010,Blend 3,Control