Here I am going to outline how you can use Silverlight to write Windows Vista Sidebar gadgets. Knowledge of Silverlight development is already assumed, but if you need to bring yourself up to speed, start with the Silverlight quickstarts. There are many articles on Sidebar Gadget development, for example read this one on TechNet.

To get started on your Windows Vista machine, you will need to have installed Visual Studio 2005 or 2008, the Silverlight runtime, and the Silverlight Tools for Visual Studio. For the Silverlight Tools and runtime, visit the Silverlight homepage.

Once you have the above installed, open up Visual Studio and create a new Silverlight Project. This article targets Silverlight 1.1 (recently renamed to 2.0) Alpha, but you can use similar techniques for Silverlight 1.0. Once you have your skeleton project open, you will need to add a new XML item called gadget.xml – this file is what will contain your gadget's manifest file so that the Sidebar can pick up various settings. This figure from the MSDN magazine shows what it should look like.

To begin with, open up your Page.xaml file and add a TextBlock element with some dummy text in its Text attribute. To assist in your debugging, you may also want to set the Canvas Background attribute to ‘Gray' so that you can see how much space the actual Silverlight control takes up. As the control will be hosted in the Sidebar, the size is a consideration. You will need to set the Width and Height in three places; the first in the Page.xaml Canvas element, the second in the html Style attribute, and the third is to set these properties on the html ‘body' element. Sensible starting values would be 120 for the Width and 240 for the Height. Now you will need to deploy your gadget to the appropriate folder: C:\Users\\AppData\Local\Microsoft\Windows Sidebar\Gadgets. Remember, you must name your folder in the format .gadget. You will just need to copy in your supporting Silverlight files and ClientBin folder and you are ready to add your gadget to the Sidebar.

Right-click on the Sidebar, and select the ‘Add Gadgets...' option. If you have deployed this correctly, you should see your gadget in the list. Right-click the gadget, and select ‘Add' to put it on the Sidebar.

In bringing together these technologies there are a few gotchas. First, you must set the isWindowless property to ‘true' in your html code-behind file. This allows better integration into the Sidebar - if you don't do this, you won't be able to close the gadget, or open up the settings page if you have created one. Second, to call the managed Silverlight code from your Gadget API JavaScript Event Handler, you can use the techniques described in this article. If you want to call JavaScript from your Silverlight 1.1 code, you are going to have to use the more involved technique described on this blog post.

Happy coding!

Chris Barker
Application Development Consultant (ADC)