While developing Presto's Sidebar Clock and other Windows Vista sidebar gadgets, I've struggled with debugging. Numerous web sites say that you can use Visual Studio to debug errors, but, up until now, I've never been able to get it to work. And writing any non-trivial gadget really requires the use of a debugger.

I finally figured out that only the professional versions of Visual Studio will allow debugging. I installed a fresh copy of Visual Studio 2008 Professional from MSDN and I'm up and running. It was so easy to set up that I'm mad I didn't get it going sooner. Unfortunately, the documentation out there is pretty abysmal regarding this topic.

On a related note, DebugView is pretty handy for sidebar gadget development as well.

Late last year, I released Presto's Hard Drive Monitor, a Vista sidebar gadget that reports the remaining space on hard drives. It's been pretty successful at 30,000 downloads and counting. It initially supported four hard drives, which I thought would be enough. But the user demand for more drives was intense (the live.com page for the gadget shows some of the user coments).

It would have been easy to have just made the gadget box bigger and added more drives. But I wanted to do it more elegantly and have the gadget grow and shrink and only use as much space as necessary. (As a side note, all Vista gadgets have a minimum height of 57 pixels, and it's not possible to shrink them less than that.)

Not having seen many gadgets that automatically change size, my usual method of just looking at how somebody else did it wouldn't work. I had to figure it out for myself. After many hours of experimenting, I finally ended up doing it as follows:

First, I inserted a <g:background> tag into the main body of the gadget:

<g:background id="background" src="images/background-black3.png"/>

The background image background-black3.png needed some work as well. Initially, it had a shadow and transparent border around it, but this caused problems when the image was stretched. To work correctly using this method, the top and bottom of the background image must be opaque.

With this tag in place, the following simple lines of Javascript change the gadget's height:

var heightInPixels = 100 document.body.style.height = heightInPixels background.style.height = heightInPixels

My actual code was a little more complicated in that it used the number of drives to figure out how high the gadget should be. But you get the idea. And you can download the actual gadget and look at the code if you want to learn more.