Design Time Features in Silverlight Toolkit

Introduction

The Silverlight Toolkit December 2008 Release added design time features for controls. I wrote these design time features, and will write a series of posts about how to implement them. This is the first, giving an overview of those design time features.

Binaries

For each of the four control assemblies, there are three design time assemblies:

C:\mesh\SLTK\Binaries>filever /s /e /a
        c:\mesh\sltk\binaries\*.*
W32i   DLL   -  2.0.21024.1838 shp    286,720 12-09-2008 microsoft.windows.controls.datavisualization.dll
W32i   DLL   -  2.0.21024.1838 shp    200,704 12-09-2008 microsoft.windows.controls.dll
W32i   DLL   -  2.0.21024.1838 shp     77,824 12-09-2008 microsoft.windows.controls.input.dll
W32i   DLL   -  2.0.21024.1838 shp     40,960 12-09-2008 microsoft.windows.controls.theming.dll
        c:\mesh\sltk\binaries\design\*.*
W32i   DLL   -  2.0.21024.1838 shp    387,072 12-09-2008 microsoft.windows.controls.datavisualization.design.dll
W32i   DLL   -  2.0.21024.1838 shp     11,264 12-09-2008 microsoft.windows.controls.datavisualization.expression.design.dll
W32i   DLL   -  2.0.21024.1838 shp     13,824 12-09-2008 microsoft.windows.controls.datavisualization.visualstudio.design.dll
W32i   DLL   -  2.0.21024.1838 shp    259,584 12-09-2008 microsoft.windows.controls.design.dll
W32i   DLL   -  2.0.21024.1838 shp     10,752 12-09-2008 microsoft.windows.controls.expression.design.dll
W32i   DLL   -  2.0.21024.1838 shp     81,408 12-09-2008 microsoft.windows.controls.input.design.dll
W32i   DLL   -  2.0.21024.1838 shp     11,264 12-09-2008 microsoft.windows.controls.input.expression.design.dll
W32i   DLL   -  2.0.21024.1838 shp     11,264 12-09-2008 microsoft.windows.controls.input.visualstudio.design.dll
W32i   DLL   -  2.0.21024.1838 shp     48,640 12-09-2008 microsoft.windows.controls.theming.design.dll
W32i   DLL   -  2.0.21024.1838 shp     11,264 12-09-2008 microsoft.windows.controls.theming.expression.design.dll
W32i   DLL   -  2.0.21024.1838 shp     11,264 12-09-2008 microsoft.windows.controls.theming.visualstudio.design.dll
W32i   DLL   -  2.0.21024.1838 shp     11,264 12-09-2008 microsoft.windows.controls.visualstudio.design.dll

The name and location of corresponding run time and design time assemblies are important. Take microsoft.windows.controls.dll for example:

• its design time assemblies must be named microsoft.windows.controls.design.dll, microsoft.windows.controls.expression.dll, microsoft.windows.controls.visualstudio.dll.
• Its design time assemblies must be either in the same directory as the run time assembly, or in a sub directory named design, as is the case here.
• With above name and location arrangement, Blend is able to automatically find and load microsoft.windows.controls.design.dll and microsoft.windows.controls.expression.dll, and in that order, while Visual Studio is able to find and load microsoft.windows.controls.design.dll and microsoft.windows.controls.visualstudio.dll, and in that order.

 

Design Time Features for Blend

To demonstrate how to use Silverlight Toolkit, and the design time features of its controls, let's create a new Silverlight application project from Blend:

And add all four run time assemblies to references:

 

Pop up Asset Library, select Custom Controls tab: 

the Custom Controls tab is populated with controls from the four run time assemblies of Silverlight Toolkit;

each control has a tooltip explaining what it is;

clicking the control will add it to the selected container, with the right xmlns registered;

each property has a helpful tooltip, like above tooltip for MinimumPopulateDelay property shows its type and unit (milliseconds);

we added new categories (like Auto Complete property category for AutoCompleteBox above) to group custom properties better instead of having them all under the Miscellaneous category;

some properties are hidden, like Background, Foreground, BorderBrush etc for Viewbox above;

some properties are moved to Common Properties category, like Child, Stretch, StretchDirection for Viewbox above;

clicking the New button for Child property will pop up the Select Object dialog;

All those make the design time experience of those Silverlight controls that exist in WPF as well to be as similar as possible to their WPF counterpart, just like the run time experience.

 

Design Time Features for Visual Studio

Launch Visual Studio by right click the project in Blend and then select Edit in Visual Studio context menu item:

To add Silverlight Toolkit controls to Visual Studio toolbox:

create a new tab, name it Silverlight Toolkit, or anything you want:

right click on the new tab and choose Choose Items...:

select Silverlight Components tab, and then Browse... button:

navigate to where the run time assemblies are, and add them one by one:

below is what it looks like after adding all four run time assemblies of Silverlight Toolkit. Please note that:

• I added a filter to only show controls from Silverlight Toolkit assemblies;
• Microsoft.Windows.Control.Theming.dll doesn't have any controls to be added to Visual Studio toolbox, so the error dialog after selecting Microsoft.Windows.Control.Theming.dll is expected and OK;
• we expose a smaller set of controls to Visual Studio than to Blend;
• you can further remove some controls from Visual Studio toolbox by uncheck it below;

 

After adding Silverlight Toolkit controls to the toolbox, we can see below:

each control has a nice custom icon;

double clicking a control in the toolbar will add it to the xaml where cursor is, with the right xmlns registered;

Properties window and tooltip don't work, for now, limitation of Visual Studio xaml editor for Silverlight;

 

Conclusion

As control developer, we serve two types of customers:

• developers who use our controls to develop Silverlight applications. For developers, we need to provide:
• good run time APIs (properties/methods/events, class inheritance and containment etc) and UI (control contract, default template), to make controls easy to use, customize, extend and evolve;
• good design time UI to improve developer productivity;
• good documentation, samples, tutorials, community support etc;
• end users who use controls as part of the applications developed by developers. For end users, we need to provide good UI (control rendering, its keyboard and mouse interface etc): rich, intuitive, consistent, reliable, performant, and secure.

So the design time experience of Silverlight Toolkit is an important part of our overall deliverables. This post is an overview of the design time features in the December 2008 release. I will write follow up posts explaining how to develop design time features for Blend and Visual Studio, and provide some general framework/code that hopefully you can use in your own development.

As always, we are eager to hear your feedback, and quick in addressing your concerns and incorporating your suggestions. We strive to make Silverlight the best development platform, and make your investment and experience with Silverlight the most pleasant, productive, and rewarding! Thanks!