Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Weather Online app for Windows Phone

From Wiki
Jump to: navigation, search

This code example creates a weather app for Windows Phone 7 using XML data from the World Weather Online service.

WP Metro Icon File.png
WP Metro Icon Web.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920
Created: somnathbanik (14 Oct 2011)
Last edited: hamishwillee (22 Jul 2013)



The example uses the free World Weather Online service to get and display the weather in the user's specified location. We can search for weather based on the get the based on city name, and also specify state (US only) and country (other search options supported by the API are given here). The API also allows us to specify how many days the weather information should return.

The service requires that we register for a key, which is used in our web request. The format of the web request is as shown below (where xxx is the key, yyy is the city name and zzz is the country name):,zzz&num_of_days=3&format=xml

Once we get the XML data we parse the content and display on the screen.

Current Weather


First lets create a project with Windows Phone Application Template. Once the project is being created, lets add a TextBox (search box), Button and two ListBox in the MainPage.xaml file.


<TextBox Height="72" HorizontalAlignment="Left" Margin="6,76,0,0" Name="locationTextBox" Text="" VerticalAlignment="Top" Width="345" />
<Button Content="Go" Height="72" HorizontalAlignment="Right" Margin="0,76,6,0" Name="goButton" VerticalAlignment="Top" Width="93" Click="goButton_Click" />
<ListBox Height="496" HorizontalAlignment="Left" Margin="-4,155,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" >
<StackPanel Orientation="Horizontal" Height="132" >
<Grid Height="100">
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<Image Grid.Column="0" Height="100" Width="100" Source="{Binding Path=icon}"></Image>
<TextBlock Text="{Binding Path=day_of_week}" Foreground="Orange" Grid.Column="1" Margin="10,10,10,60"></TextBlock>
<TextBlock Grid.Column="1" Margin="10,40,300,30" Text="MinF: "></TextBlock>
<TextBlock Text="{Binding Path=low}" Grid.Column="1" Margin="70,40,250,30" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" Margin="150,40,160,30" Text="MaxF: "></TextBlock>
<TextBlock Text="{Binding Path=high}" Grid.Column="1" Margin="215,40,90,30" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Path=condition}" Grid.Column="1" Margin="10,75,10,0"></TextBlock>

We parse the XMLs in two sections. One is the Current Condition of weather, and another is the information of present day along with the next two days . We use XElement to parse the element and store in the list box.

XElement XmlWeather = XElement.Parse(e.Result);
listBoxc.ItemsSource = from weather in XmlWeather.Descendants("current_condition")
select new WeatherInfoCurrent
observation_time = weather.Element("observation_time").Value,
temp_C = weather.Element("temp_C").Value,
temp_F = weather.Element("temp_F").Value,
icon = weather.Element("weatherIconUrl").Value,
condition = weather.Element("weatherDesc").Value
//all three days
listBox1.ItemsSource = from weather in XmlWeather.Descendants("weather")
select new WeatherInfo
day_of_week = weather.Element("date").Value,
high = weather.Element("tempMaxF").Value,
low = weather.Element("tempMinF").Value,
icon = weather.Element("weatherIconUrl").Value,
condition = weather.Element("weatherDesc").Value

We create two different classes for storing data in two different list box


public class WeatherInfo
public string day_of_week { get; set; }
public string low { get; set; }
public string high { get; set; }
public string icon { get; set; }
public string condition { get; set; }
public class WeatherInfoCurrent
public string observation_time { get; set; }
public string temp_C { get; set; }
public string temp_F { get; set; }
public string icon { get; set; }
public string condition { get; set; }

Source Code

The full source code of the example is available here:

This page was last modified on 22 July 2013, at 05:30.
104 page views in the last 30 days.