Weather Online app for Windows Phone

Comments

Hamishwillee - Expand a bit on how this actually works?

Hi Somnath

I've subedited this a bit for readability.

The problem I have with this article is that if you don't already understand XML parsing and binding the result to the UI, this article isn't going to help you (I didn't before I read it, and I still don't). It is not enough to just show what worked - you need to explain how it works. So for example above you'd explain why you need a class (like WeatherInfoCurrent), how this object gets created and populated, and how you create the link between this object in the UI. Yes I can see (for example) that Text="{Binding Path=low}" binds to the text in WeatherInfo class, but this looks like magic - how does the system know that this object is what it uses?

Does what I'm saying make sense?

Also, are there any good references for this on the wiki or in MSDN?

Regards

H

hamishwillee 04:04, 27 April 2012 (EEST)

Log in or Join to leave comments.

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

See Also

• Weather in Windows Phone 7
• Google Weather for Qt and WP7

Article Metadata

---

Code Example

Source file: Media:WeatherOnline.zip

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): WP7 Emulator

---

Compatibility

Platform(s): Windows Phone 7.5

---

Article

Keywords: XML Parser/ XElement

Created: somnathbanik (14 Oct 2011)

Last edited: hamishwillee (10 Apr 2013)

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