Windows Phone 7 下的天气预报
对于天气预报的获取,我使用的是Yahoo的API,首先,我们学习一下YAHOO的天气预报API一些使用方法。
yahoo天气预报的url是
http://weather.yahooapis.com/forecastrss?w=2151330&u=c
说说里面参数代表的意思:
参数w对应各个地方在yahoo数据库中的WOEID,如北京的WOEID是2151330,目前也可以用参数p来代替w,不过官方还是推荐用w,貌似p是计划要被取消的。参数u用于确定温度的单位(c是摄氏度f是华氏度)。对于中国(国外没比较)的天气查询来说,YAHOO相对无论从能查到的地方还是预报的内容都是比较全的。
详细的API文档:http://developer.yahoo.com/weather/
获取地址编号
地址编号必须是一个WOEID,你可以通过雅虎的天气预报首页查询你需要的地址编号。这个编号在
你想要的那个城市天气预报页的URL中。你也可以通过在首页中输入你的邮政编码查询WOEID。例如,你想查询广州的天气情况,这个城市的天气预报页的URL是
http://weather.yahooapis.com/forecastrss?p=CHXX0037&u=c,所以它的WOEID是0037.
当向YAHOO发送天气预报的请求后,接收到的XML数据类似下面的
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"> <channel> <title>Yahoo! Weather - Guangzhou, CH</title> <link>http://us.rd.yahoo.com/dailynews/rss/weather/Guangzhou__CH/*http://weather.yahoo.com/forecast/CHXX0037_c.html</link> <description>Yahoo! Weather for Guangzhou, CH</description> <language>en-us</language> <lastBuildDate>Sun, 07 Nov 2010 7:00 pm CST</lastBuildDate> <ttl>60</ttl> <yweather:location city="Guangzhou" region="" country="CH"/> <yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/> <yweather:wind chill="25" direction="340" speed="6.44" /> <yweather:atmosphere humidity="34" visibility="7" pressure="982.05" rising="0" /> <yweather:astronomy sunrise="5:34 am" sunset="5:45 pm"/> <image> <title>Yahoo! Weather</title> <width>142</width> <height>18</height> <link>http://weather.yahoo.com</link> <url>http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif</url> </image> <item> <title>Conditions for Guangzhou, CH at 7:00 pm CST</title> <geo:lat>23.12</geo:lat> <geo:long>113.3</geo:long> <link>http://us.rd.yahoo.com/dailynews/rss/weather/Guangzhou__CH/*http://weather.yahoo.com/forecast/CHXX0037_c.html</link> <pubDate>Sun, 07 Nov 2010 7:00 pm CST</pubDate> <yweather:condition text="Clear" code="31" temp="25" date="Sun, 07 Nov 2010 7:00 pm CST" /> <description> <![CDATA[ <img src="http://l.yimg.com/a/i/us/we/52/31.gif"/><br /> <b>Current Conditions:</b><br /> Clear, 25 C<BR /> <BR /><b>Forecast:</b><BR /> Sun - Clear. High: 28 Low: 16<br /> Mon - Mostly Sunny. High: 29 Low: 16<br /> <br /> <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Guangzhou__CH/*http://weather.yahoo.com/forecast/CHXX0037_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/> (provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/> ]]> </description> <yweather:forecast day="Sun" date="7 Nov 2010" low="16" high="28" text="Clear" code="31" /> <yweather:forecast day="Mon" date="8 Nov 2010" low="16" high="29" text="Mostly Sunny" code="34" /> <guid isPermaLink="false">CHXX0037_2010_11_07_19_00_CST</guid> </item> </channel> </rss> <!-- api2.weather.sg1.yahoo.com uncompressed/chunked Sun Nov 7 06:23:35 PST 2010 -->
最重要的是后面几行,查询当天和第二天的天气。
<yweather:forecast day="Sun" date="7 Nov 2010" low="16" high="28" text="Clear" code="31" /> <yweather:forecast day="Mon" date="8 Nov 2010" low="16" high="29" text="Mostly Sunny" code="34" />
即我们需要用到的节点是 yweather:forecase。
到这里大概了解YAHOO的API使用后,我们来做一个在Windows Phone 7 下获取天气预报的程序。
首先新建一个Silverlight for Windows Phone 7的工程,命名为MyYahooWeather,首先布置一下界面,MainPage.xaml的代码如下:
<phone:PhoneApplicationPage x:Class="MyYahooWeather.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitlePanel contains the name of the application and page title--> <StackPanel x:Name="TitlePanel" Margin="12,17,12,28"> <TextBlock x:Name="ApplicationTitle" Text="My Yahoo Weather" FontSize="40"/> <Rectangle Width="460" Height="5" Fill="Blue"/> <TextBlock x:Name="City" Text="广?州Y" FontSize="32"/> <Rectangle Width="460" Height="5" Fill="Blue"/> </StackPanel> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Rectangle Margin="12,18,6,0"> <Rectangle.Fill> <ImageBrush ImageSource="Images/bk.jpg" Stretch="None"></ImageBrush> </Rectangle.Fill> </Rectangle> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal" Height="200"> <Image x:Name="WeatherIcon2" Source="Images/cloudy.png" Width="300" Height="200" Margin="0,0,-60,-20" /> <StackPanel Orientation="Vertical" Width="250"> <TextBlock x:Name="date1" Text="2010-11-5" Margin="10,20,0,0" FontSize="32" VerticalAlignment="Center" /> <TextBlock x:Name="day1" Text="Mon" Margin="10,1,0,0" FontSize="32" VerticalAlignment="Center" /> <TextBlock x:Name="condition1" Text="Rain" Margin="10,1,0,0" FontSize="32" VerticalAlignment="Center" /> <TextBlock x:Name="temp1" Text="5-6C" Margin="10,1,0,0" FontSize="32" VerticalAlignment="Center" /> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Height="200"> <Image x:Name="WeatherIcon3" Source="Images/cloudy.png" Width="300" Height="200" Margin="0,0,-60,-20" /> <StackPanel Orientation="Vertical" Width="250"> <TextBlock x:Name="date2" Text="2010-11-5" Margin="10,20,0,0" FontSize="32" VerticalAlignment="Center" /> <TextBlock x:Name="day2" Text="Mon" Margin="10,1,0,0" FontSize="32" VerticalAlignment="Center" /> <TextBlock x:Name="condition2" Text="Rain" Margin="10,1,0,0" FontSize="32" VerticalAlignment="Center" /> <TextBlock x:Name="temp2" Text="5-6C" Margin="10,1,0,0" FontSize="32" VerticalAlignment="Center" /> </StackPanel> </StackPanel> </StackPanel> </Grid> </Grid> </phone:PhoneApplicationPage>
在解决方案里面,右击当前解决方案,添加一个文件夹,命名为Images,把背景图片我天气预报用到的图片加进去。
打开MainPage.xaml.cs文件,添加通讯代码。以下是部分代码:
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { WebClient wc = new WebClient(); wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted); wc.DownloadStringAsync(new Uri("http://weather.yahooapis.com/forecastrss?p=CHXX0037&u=c")); } private void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { try { XDocument doc = new XDocument(); doc = XDocument.Parse(e.Result); bool forecastTomorrow = true; foreach (XElement element in doc.Descendants("channel").First().Descendants("item").Nodes()) { if (element.ToString().Contains("<yweather:forecast")) { string date = element.Attribute("date").Value; string day = element.Attribute("day").Value; string conditions = element.Attribute("text").Value; string tempLow = element.Attribute("low").Value; string tempHigh = element.Attribute("high").Value; string code = element.Attribute("code").Value; int weatherCode = Convert.ToInt16(code); string imageName = weatherImage(weatherCode); Uri uri = new Uri("Images/" + imageName + ".png", UriKind.Relative); ImageSource img = new BitmapImage(uri); if (forecastTomorrow) { date1.Text = date; day1.Text = Eday2Cday(day); condition1.Text = conditions; temp1.Text = tempLow + "-" + tempHigh + "°?C"; WeatherIcon2.Source = img; forecastTomorrow = false; } else { date2.Text = date; day2.Text = Eday2Cday(day); condition2.Text = conditions; temp2.Text = tempLow + "-" + tempHigh + "°?C"; WeatherIcon3.Source = img; } } } } catch (Exception ex) { MessageBox.Show(ex.ToString()); } }
点F5运行,效果图如下: