×
Namespaces

Variants
Actions

天气Online

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon File.png
WP Metro Icon Web.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 22 Jul 2013 编辑

本文展示了如何快速创建一个天气预报程序。

Contents

简介

读完本文,你会知道如何创建一个程序展示天气预报。主要使用的技术点是解析xml文件,以及用不同的方式展现一组数据。

Current Weather

基本思路

我们使用World Weather OnlineAPI来取得当前的天气状况并显示在屏幕上。首先需要申请一个Key。我们使用免费版的API,可以得到如下信息:

  • 城市名称
  • 城市名称, 州(仅限美国)
  • 城市名称, 州, 国家
  • 城市名称, 国
  • 更多

我们希望天气服务返回xml格式的数据,因此请求这个URI: http://free.worldweatheronline.com/feed/weather.ashx?key=xxxxxxxxxxxxxxxxx&q=yyyyy,zzzzz&num_of_days=3&format=xml

这里xxx是你的Keyyyy是城市名,zzz是国家名。 当你得到xml数据后,就可以解析它并显示在屏幕上。

实现

首先创建一个Windows Phone项目。在MainPage.xaml中,添加一个TextBox用来搜索,以及一个Button和两个ListBox。

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>

我们在两个地方使用xml:当前天气以及今明后三天的天气。我们使用XElement来解析xml并存到ListBox中。

 
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
};

我们创建两个不同的类来存储那两个ListBox的数据。

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; }
}

源代码

完整的源代码在这里: File:WeatherOnline.zip

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