How to get started with Windows 7 gadgets

Question

I have never programmed a gadget for Vista or Seven, but I would like to try to make one. But where do I start? I have tried to search around on google and msdn, but I haven't managed to find anything useful. Either very, very old stuff (Vista beta stuff), already made gadgets or differences between gadgets in Vista and Seven. But that doesn't help me, since I don't have a clue how to make a gadget in the first place... I haven't even managed to find out what they are written in...

So, could anyone help me out with a kick start?

• Where do I start?
• What do I need to know?
• What are they written in?
• How are they "packaged"?

In other words, how do I get from a clean install of Windows 7 with Visual Studio to a working Gadget that I can install and put on my Windows 7 desktop.

Answer 1

I have started writing one tutorial for everyone on this topic, see making gadgets for Windows 7.

Answer 2

Here's an MSDN article on Vista Gadgets. Some preliminary documentation on 7 gadgets, and changes. I think the only major changes are that Gadgets don't reside in the Sidebar anymore, and as such "dock/undock events" are now backwards-compatibility cludges that really shouldn't be used.

Best way to get started is probably to just tweak an existing gadget. There's an example gadget in the above link, or you could pick a different one out on your own.

Gadgets are written in HTML, CSS, and some IE scripting language (generally Javascript, but I believe VBScript also works). For really fancy things you might need to create an ActiveX object, so C#/C++ for COM could be useful to know.

Gadgets are packaged as ".gadget" files, which are just renamed Zip archives that contain a gadget manifest (gadget.xml) in their top level.

Answer 3

Here's an excellent article by Scott Allen: Developing Gadgets for the Windows Sidebar

This site, Windows 7/Vista Sidebar Gadgets, has links to many gadget resources.

Answer 4

Combining and organizing all the current answers into one answer, then adding my own research:

Brief summary of Microsoft gadget development:

What are they written in? Windows Vista/Seven gadgets are developed in a mix of XML, HTML, CSS, and some IE scripting language. It is also possible to use C# with the latest release of Script#.

How are they packaged/deployed? The actual gadgets are stored in *.gadget files, which are simply the text source files listed above compressed into a single zip file.

Useful references for gadget development:

where do I start? Good introductory references to Windows Vista/Seven gadget development:

• Developing Gadgets for the Windows Sidebar
• Vista Gadgets Introductory tutorial from I-Programmer
• Authoring Sidebar Gadgets in C#
• Developing a Gadget for Windows Sidebar Part 1: The Basics Official MSDN tutorial.

If you are willing to use offline resources, this book appears to be an excellent resource:

• Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and Silverlight
• blog related to book: http://www.innovatewithgadgets.com/

What do I need to know? Some other useful references; not necessarily instructional

• Windows Sidebar (Official MSDN documentation)
• related Stack Overflow question: C# tutorial to write gadgets

---

Update: Well, this has proven to be a popular answer~ Sharing my own recent experience with Windows 7 gadget development:

Perhaps the easiest way to get started with Windows 7 gadget development is to modify a gadget that has already been developed. I recently did this myself because I wanted a larger clock gadget. Unable to find any, I tinkered with a copy of the standard Windows clock gadget until it was twice as large. I recommend starting with the clock gadget because it is fairly small and well-written. Here is the process I used:

1. Locate the gadget you wish to modify. They are located in several different places. Search for folders named *.gadget. Example: C:\Program Files\Windows Sidebar\Gadgets\Clock.Gadget\
2. Make a copy of this folder (installed gadgets are not wrapped in zip files.)
3. Rename some key parts:
   1. The folder name
   2. The name inside the gadget.xml file. It looks like:<name>Clock</name> This is the name that will be displayed in the "Gadgets Gallery" window.
4. Zip up the entire *.gadget directory.
5. Change the file extension from "zip" to "gadget" (Probably just need to remove the ".zip" extension.)
6. Install your new copy of the gadget by double clicking the new *.gadget file. You can now add your gadget like any other gadget (right click desktop->Gadgets)
7. Locate where this gadget is installed (probably to %LOCALAPPDATA%\Microsoft\Windows Sidebar\)
8. Modify the files in this directory. The gadget is very similar to a web page: HTML, CSS, JS, and image files. The gadget.xml file specifies which file is opened as the "index" page for the gadget.
9. After you save the changes, view the results by installing a new instance of the gadget. You can also debug the JavaScript (The rest of that article is pretty informative, too).