First, glance over at Chris Szurgot’s post on creating a Silverlight Gadget. It really is as easy as he says it is. Just build your project in Visual Studio and in the html page replace the:
<param name=”source” value=”ClientBin/MySilverlightApp.xap”/>
with
<param name=”source” value=”x-gadget:///MySilverlightApp.xap”/>
There are a couple things that should be noted though.
Here is how to give your Silverlight gadget a transparent background.
It needed it’s own post.
Take note: If you plan on using any level of dragging in your gadget (like I use), I would recommend against planning on having anything transparent. The only way I can get it to work is if you make the Silverlight object windowless. An unfortunate side effect is that it looks like this also intercepts any sort of MouseDrag event and interprets it as “the user wants to move the gadget off the sidebar”. For me, this meant that I couldn’t commit to any action on my color picker since the whole thing was interacted via dragging.
Next, if you want to see a handle for your gadget (pictured below), you need to do one of two things.
The first is that if you host your application online and add the silverlight app via an <iframe />. For reasons that boggle my mind at 11PM, this works. The downside is that if your user is not connected to the internet when they boot their machine, they will be unable to use your gadget.
The other solution is to give your application some room to breathe in the html page. Basically, make the body size in your gadget larger than your silverlight app. When the user hovers over something that isn’t Silverlight, the handle will appear. But if you fill the whole gadget space with Silverlight, your app will block any indication that the mouse is hovering over it.
For a working sample, download my Color Picker Gadget as an example. Just download it, rename it from *.gadget to *.zip and extract all the files I used.