Creating a Weather Gadget for Windows 7

Posted by: Shoban Kumar , on 2/10/2010, in Category WinForms & WinRT
Views: 109668
Abstract: In this article we will see how you can develop a Weather gadget for Windows 7 which uses Yahoo Weather API for fetching Weather data. The application will also have some of the latest exciting features of Windows 7 like Thumbnail Toolbar and Progress bar.
Creating a Weather Gadget for Windows 7
In this article we will see how you can develop a Weather gadget for Windows 7 which uses Yahoo Weather API for fetching Weather data. The application will also have some of the latest exciting features of Windows 7 like Thumbnail Toolbar and Progress bar.
We will need the Windows API Codepack to add Windows 7 features to the application. Download Windows API code pack and extract the contents to a location of your choice. The download has samples and projects files which we will be using in our project.
Below is the screenshot of the application you will be developing.

Let’s get started.  
Step 1: Fire up Visual Studio and create a new Windows Forms Application Project.
Note: Make sure you choose the .net framework as 3.5
Step 2: Right Click Solution > Add > Existing Project and navigate to the folder in which the Windows API Code pack was extracted. Open ‘WindowsAPICodePack’ folder and then add the following projects to your solution.
a.    ‘Core’ which can be found under ‘core’folder
b.    Shell which can be found under ‘shell’folder.
Step 3: Now right click your new project we created in Step 1 and Add References to the above projects. In the resulting window select "Projects" tab and it will list the projects currently added to the solution. We have to select both and click ok.
Step 4: Add the following controls to your form
a.    Rich Text Box : RTTemp : This control will be used to display the temperature.
b.    Rich Text Box : RTWeatherType : This control will be used to display the weather type.
c.    Picture Box : weatherImage
Step 5: Import the following namespaces
a.    Microsoft.WindowsAPICodePack.Shell;
b.    Microsoft.WindowsAPICodePack.Taskbar;
c.    System.Xml;
d.    System.Xml.XPath;
Step 6: Yahoo has a weather API, using which we will be fetching weather report of a particular location. To fetch a particular location’s weather data we will need WOEID (Where on Earth Identification) of that location. To find the WOEID of a particular location, go to and search for the location. The WOEID of the location can be found on the URL. In the below URL 2295411 is the WOEID for Mumbai
Step 7: According to Yahoo Weather API page
The Weather RSS feed enables you to get up-to-date weather information for your location.
We will use this RSS feed (XML file) to display weather details about a location.
Step 8: Following are the global variables which will be used in the application.
string[] strLocationID = { "2295411", "615702", "44418", "2295424", "2295426" };
string[] strLocations = { "Mumbai", "Paris", "London", "Chennai", "Trivandrum" };
int currentLocation = 0;
private ThumbnailToolbarButton buttonNext;
private ThumbnailToolbarButton buttonPrevious;
TaskbarManager tbManager = TaskbarManager.Instance;
Private strLocationID As String() = {"2295411", "615702", "44418", "2295424", "2295426"}
Private strLocations As String() = {"Mumbai", "Paris", "London", "Chennai", "Trivandrum"}
Private currentLocation As Integer = 0
Private buttonNext As ThumbnailToolbarButton
Private buttonPrevious As ThumbnailToolbarButton
Private tbManager As TaskbarManager = TaskbarManager.Instance
In the code shown above, we have the list of locations and their WOEID’s. We also have 2 ‘ThumbnailToolbarButtons’ which will be used to change locations.
Step 9: The following code shown below will fetch the weather report of a particular location. We will be using currentLocation to keep track of the location details.
private void GetWeatherReport(int locationId)
    this.Text = strLocations[locationId];
    XPathDocument doc = new XPathDocument("" + strLocationID[locationId] + "&u=c");
    XPathNavigator nav = doc.CreateNavigator();
    XmlNamespaceManager ns = new XmlNamespaceManager(nav.NameTable);
    ns.AddNamespace("yweather", "");
    XPathNodeIterator nodes = nav.Select("/rss/channel/item/yweather:condition", ns);
    while (nodes.MoveNext())
        XPathNavigator node = nodes.Current;
        RTTemp.Text = node.GetAttribute("temp", ns.DefaultNamespace).ToString() + "°C";
        RTWeatherType.Text = node.GetAttribute("text", ns.DefaultNamespace).ToString();
        weatherImage.ImageLocation = "" + node.GetAttribute("code", ns.DefaultNamespace).ToString() + ".gif";
        SetProgressBarStyle(Convert.ToInt16(node.GetAttribute("temp", ns.DefaultNamespace)));
Sub GetWeatherReport(ByVal locationId As Integer)
        Me.Text = strLocations(locationId)
        Dim doc As New XPathDocument("" & strLocationID(locationId) & "&u=c")
        Dim nav As XPathNavigator = doc.CreateNavigator()
        Dim ns As New XmlNamespaceManager(nav.NameTable)
        ns.AddNamespace("yweather", "")
        Dim nodes As XPathNodeIterator = nav.[Select]("/rss/channel/item/yweather:condition", ns)
        While (nodes.MoveNext())
            Dim node As XPathNavigator = nodes.Current
            RTTemp.Text = node.GetAttribute("temp", ns.DefaultNamespace).ToString() & "°C"
            RTWeatherType.Text = node.GetAttribute("text", ns.DefaultNamespace).ToString()
            weatherImage.ImageLocation = "" & node.GetAttribute("code", ns.DefaultNamespace).ToString() & ".gif"
            SetProgressBarStyle(Convert.ToInt16(node.GetAttribute("temp", ns.DefaultNamespace)))
        End While
End Sub
In the code shown above, we fetch the current weather details about the location and then set the progressbar style based on the temperature. This article will not talk about the XML response from Yahoo weather. See for more details.
Step 10: Now in the code shown below, we set the progress bar style and value using ‘SetProgressValue’andSetProgressState’. Windows 7 has some new exciting features which includes showing the progress in the taskbar. Colour of the progress bar changes based on the current state of the progressbar.
private void SetProgressBarStyle(int weather)
    tbManager.SetProgressValue(50, 100);
    if (weather <= 10)
    if (weather >= 20)
    if (weather >= 30)
 Private Sub SetProgressBarStyle(ByVal weather As Integer)
        tbManager.SetProgressValue(50, 100)
        If weather <= 10 Then
        End If
        If weather >= 20 Then
        End If
        If weather >= 30 Then
        End If
 End Sub
The progress bar style is set based on the temperature.
·         TaskbarProgressBarState.Normal : A normal progressbar is shown
·         TaskbarProgressBarState.Paused : Displays a progressbar with yellow colour
·         TaskbarProgressBarState.Error :Displays a progressbar with Red colour.
Step 11: Add the following code to the Form’s Shown event.
private void Form1_Shown(object sender, EventArgs e)
    buttonNext = new ThumbnailToolbarButton(Properties.Resources.nextArrow, "Next Location");
    buttonNext.Enabled = true;
    buttonNext.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(buttonNext_Click);
    buttonPrevious = new ThumbnailToolbarButton(Properties.Resources.prevArrow, "Previous Location");
    buttonPrevious.Enabled = true;
    buttonPrevious.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(buttonPrevious_Click);
    TaskbarManager.Instance.ThumbnailToolbars.AddButtons(this.Handle, buttonPrevious, buttonNext);
    //TaskbarManager.Instance.TabbedThumbnail.SetThumbnailClip(this.Handle, new Rectangle(weatherImage.Location, weatherImage.Size));
    Private Sub Form1_Shown(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Shown
        buttonNext = New ThumbnailToolbarButton(My.Resources.nextArrow, "Next Location")
        buttonNext.Enabled = True
        AddHandler buttonNext.Click, AddressOf buttonNext_Click
        buttonPrevious = New ThumbnailToolbarButton(My.Resources.prevArrow, "Previous Location")
        buttonPrevious.Enabled = True
        AddHandler buttonPrevious.Click, AddressOf buttonPrevious_Click
        TaskbarManager.Instance.ThumbnailToolbars.AddButtons(Me.Handle, buttonPrevious, buttonNext)
    End Sub
In the code shown above, we created two new thumbnail buttons and set its properties. ‘ThumbnailToolbarButton’accepts two arguments. The first one is the icon of the button and the second one is the tool tip to be displayed. We have also added an event handler for these buttons for client event. Once the buttons are created, we add them to the taskbar instance using
TaskbarManager.Instance.ThumbnailToolbars.AddButtons(this.Handle, buttonPrevious, buttonNext)
Step 12: The following code defines the client event for the thumbnail toolbar buttons.
void buttonNext_Click(object sender, EventArgs e)
    if ((currentLocation + 1) < strLocationID.Length)
        currentLocation += 1;
void buttonPrevious_Click(object sender, EventArgs e)
    if ((currentLocation - 1) >= 0)
        currentLocation -= 1;
Private Sub buttonNext_Click(ByVal sender As Object, ByVal e As EventArgs)
        If (currentLocation + 1) < strLocationID.Length Then
            currentLocation += 1
        End If
End Sub
Private Sub buttonPrevious_Click(ByVal sender As Object, ByVal e As EventArgs)
        If (currentLocation - 1) >= 0 Then
            currentLocation -= 1
        End If
End Sub
That’s it. Save and run your application. Below are some of the screenshots of the weather gadget in action!
Thumbnail of a Hot Location
Thumbnail of Cold location
Thumbnail of a location between 10 and 20 degrees
Thumbnail with Tooltip
The entire source code of this article can be downloaded over here
If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email  
ShobanKumar, Client App Dev MVP from Trivandrum is mainly working on ASP, ASP.NET, VB, VB.NET and PHP. You can also find him blogging at Follow him on twitter @
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles

Page copy protected against web site content infringement by Copyscape

User Feedback
Comment posted by Fontley on Wednesday, February 10, 2010 11:26 PM
the stepbystep instructions came very handy. nIce!
Comment posted by Doug on Monday, March 15, 2010 12:27 PM
This is a "Gadget"?  Looks like a basic WinForm application using some Win7 toolbar features.  Not a Gadget.
Comment posted by ipomz on Monday, April 26, 2010 3:44 AM
Comment posted by benblack on Tuesday, December 14, 2010 12:46 AM
Fantastic article - Thank you very much.

Post your comment
E-mail: (Will not be displayed)
Insert Cancel