MIX essentials countdown gadget

  • Article

Here is version 1 of my countdown Vista gadget for the MIX essentials event on April 24th in Belgium. It's a very simple gadget but since I found one for the MIX08 event in March I also wanted for our own event. Download gadget link to my SkyDrive is below.

image The gadget is developed in Silverlight 1.0, which allows me to add a small animation easier that doing this in HTML. As this was the first time I built a Vista sidebar gadget I looked up some info on how to create gadgets. I'm posting the main resources I used to get it to work:

How the gadget was developed

I first developed the application as a normal Silverlight 1 application using Expression Blend 2.5 (March 2008 preview) and Visual Studio 2008. After getting it to work normally in the browser I started adding the required changes to transform it into a Windows Vista sidebar gadget:

1. Added a gadget.xml file to the project. See the definition of such a file in the MSDN documentation.

2. In the JavaScript function that creates the control:

Set the isWindowsless property to true (this allows for moving and closing the gadget in the sidebar, as well as a transparent background).
Set the background property to transparent. Because I have slightly rounded edges and want the normal sidebar or application background to come through.

 // start snippet
properties: {
    width: "100%",
    height: "100%",
    version: "1.0",
    background: "Transparent",
    isWindowless: "true"
},
// end snippet

3. Added a function for debug information, as describes here in the MSDN documentation. I've also used DebugView which works really well.

 System.Debug.outputString("debug message")

Fix for getting the Silverlight gadget to work if you have installed Silverlight 2 Beta 1 on the machine

After testing my Silverlight application normally I decided it was time to test it on the sidebar. All gadget required settings were made, the archive file (zip renamed to gadget) and then: nothing was working on the sidebar. It seemed my onLoad event was no longer being called, actually there was no error message at all.

As I had another gadget on the machine that was also using Silverlight 1 I decided to reactivate that one and check what the difference was. Now this one was no longer running either. Problem must be with Silverlight 2 beta 1 installed. Tried it on a machine without the beta and it was working correctly.

Apparently there seems to be an issue with Silverlight 1 gadgets no longer working once you have the Silverlight 2 beta installed. Fortunately there is an easy fix for this (thanks Stefan). In the HTML page initializing the Silverlight control you need to add x-gadget:/// syntax before the name of the xaml file.

So, my JavaScript looks something like this (just an excerpt of the code):

 Silverlight.createObjectEx({
            source: "x-gadget:///Page.xaml",
            parentElement: document.getElementById("silverlightControlHost"),

 //...

Adding that solved the issue, the gadget now works both on machines with Silverlight 1 or Silverlight 2 beta 1 runtimes.

What's next: hopefully a version 1.1 with some very sleek look if I find a designer/devigner to give me a hand :-)