Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Windows Mobile Widget 101 – A Gadget Side Note

As I’ve mentioned in a previous post it is quite easy to take your Windows Mobile widget and convert it into a Windows Vista/Windows 7 gadget. In this post I’ll take the Hello World widget I built in the Getting Started and Start Menu Icons posts and walk through converting it into a gadget.

Gadgets are almost identical in structure to widgets, with one exception. Instead of a config.xml manifest file, gadgets use a gadget.xml file. So, the first step in converting your widget is to add a gadget.xml file to your project. Here is a sample file that mirrors the information I used in the config.xml file for the widget.


<?xml version="1.0" encoding="utf-8" ?>
  <name>Hello Gadget World</name>
  <author name="Built to Roam">
    <info url="" text="Built to Roam" />
    <logo src="icon.png" />

  <copyright>Copyright (c) 2009 Built to Roam.  All rights reserved.</copyright>
  <description>This is a sample gadget that says Hi to the world!</description>
    <icon width="90" height="90" src="icon.png" />
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="Main.htm" />
      <platform minPlatformVersion="0.3" />

Of course, you now need to modify your build to include this file. Now you have two options here, you can either build a single compressed file and simply change the extension between .widget and .gadget depending how you want to use it. Alternatively you can make your build slightly more intelligent:


cd .\HelloWorld
del ..\helloworld.widget /Q
..\7za.exe a -tzip ..\helloworld.widget -r0 @..\files.txt
copy ..\helloworld.widget ..\

cd .\HelloWorld
del ..\helloworld.gadget /Q
..\7za.exe a -tzip ..\helloworld.gadget -r0 @..\gadget_files.txt
copy ..\helloworld.gadget ..\

This build file now makes use of a file called gadget_files.txt which contains the file specific to building the gadget (ie includes gadget.xml and not config.xml).



You can now run the build batch and it will generate a .gadget file.  Double-click this file under Windows Vista or Windows 7 and it will install and run your gadget.  Unfortunately you’re likely to see something like the following:


This happens because the gadget dynamically sizes to fit the content, which means that if you don’t specify a height or width for the gadget you get very minimal space allocated to it. This is simply fixed by adding size information to the body tag of the Main.htm file.

<body style="height:200px;width:200px;border:1px solid #000000">

Now if you build and run (ie double-click on the gadget file) the gadget you will see the following:


And there you have it – your widget is running as a gadget.  Now there are some additional features of gadgets that we aren’t using here but I’ll come back to them as we get into adding more functionality to the widget.

Comments are closed