Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

天气Online

From 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 05:23.
104 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×