×
Namespaces

Variants
Actions
(Redirected from Weather Online)

Weather Online app for Windows Phone

From Nokia Developer 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
CompatibilityArticle
Created: somnathbanik (14 Oct 2011)
Last edited: hamishwillee (22 Jul 2013)

Contents

Introduction

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):

http://free.worldweatheronline.com/feed/weather.ashx?key=xxx&q=yyy,zzz&num_of_days=3&format=xml

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

Current Weather

Implementation

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.

MainPage.xaml

<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" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" >
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
 
<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>
 
</Grid>
</StackPanel>
</DataTemplate>
 
</ListBox.ItemTemplate>
</ListBox>

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);
//current
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

WeatherInfo.cs

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: File:WeatherOnline.zip

This page was last modified on 22 July 2013, at 08:30.
234 page views in the last 30 days.
×