Windows Phone 7 网络编程之天气预报应用

    天气预报应用是通过异步调用Google天气api（http://www.google.com/ig/api?weather=城市拼音），对其进行xml的数据解析，将其数据简单的展现出在Windows Phone 7的客户端上。

首页的城市数据绑定类，以及预设好的城市列表

City.cs

View Code

using System.ComponentModel;

namespace WeatherForecast
{
/// <summary>
/// 城市绑定类
/// </summary>
public class City : INotifyPropertyChanged
{
private string cityPinyin; // 城市拼音
private string province; // 省份
private string cityName; // 城市名称

public string CityPinyin
{
get
{
return cityPinyin;
}
set
{
if (value != cityPinyin)
{
cityPinyin = value;
NotifyPropertyChanged( " CityPinyin " );
}
}
}

public string Province
{
get
{
return province;
}
set
{
if (value != province)
{
province = value;
NotifyPropertyChanged( " Province " );
}
}
}

public string CityName
{
get
{
return cityName;
}
set
{
if (value != cityName)
{
cityName = value;
NotifyPropertyChanged( " CityName " );
}
}
}

public event PropertyChangedEventHandler PropertyChanged;

/// <summary>
/// 构造city类
/// </summary>
public City( string cityPinyin, string province, string cityName)
{
CityPinyin = cityPinyin;
Province = province;
CityName = cityName;
}

/// <summary>
/// 用于绑定属性值改变触发的事件，动态改变
/// </summary>
private void NotifyPropertyChanged( string property)
{
if (PropertyChanged != null )
{
PropertyChanged( this , new PropertyChangedEventArgs(property));
}
}
}
}

Cities.cs

View Code

using System.Collections.ObjectModel;

namespace WeatherForecast
{
/// <summary>
/// 继承 ObservableCollection <City> 用户数据绑定
/// </summary>
public class Cities : ObservableCollection < City >
{
public Cities() { }
/// <summary>
/// 设置默认的绑定城市 利用App类里面定义的静态变量cityList
/// </summary>
public void LoadDefaultData()
{
App.cityList.Add( new City( " Shenzhen " , " 广东省 " , " 深圳市 " ));
App.cityList.Add( new City( " Beijing " , " 北京市 " , " 北京市 " ));
App.cityList.Add( new City( " Shanghai " , " 上海市 " , " 上海市 " ));
App.cityList.Add( new City( " Guangzhou " , " 广东省 " , " 广州市 " ));
App.cityList.Add( new City( " Yangjiang " , " 广东省 " , " 阳江市 " ));
}
}
}

对首页城市列表的绑定需要在app程序启动类里面赋值

App.xaml.cs需要添加获取城市列表的代码

      public static Cities cityList;//绑定的城市列表

      ……

      private void Application_Launching(object sender, LaunchingEventArgs e)
        {
            // 创建城市列表
            if ( cityList==null)
            {
                cityList = new Cities();
                cityList.LoadDefaultData();
            }
        }

首页的界面设计代码

< phone:PhoneApplicationPage
x:Class ="WeatherForecast.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" >
< Grid x:Name ="LayoutRoot" Background ="Transparent" >
< Grid.RowDefinitions >
< RowDefinition Height ="Auto" />
< RowDefinition Height ="*" />
</ Grid.RowDefinitions >
< StackPanel x:Name ="TitlePanel" Grid.Row ="0" Margin ="12,17,0,28" >
< TextBlock x:Name ="PageTitle" Text ="天气预报" Margin ="9,-7,0,0" Style =" {StaticResource PhoneTextTitle1Style} " />
</ StackPanel >
< Grid x:Name ="ContentPanel" Grid.Row ="1" Margin ="12,0,12,0" >
< ListBox Height ="646" HorizontalAlignment ="Left" Margin ="6,0,0,0" Name ="CityList" VerticalAlignment ="Top" Width ="474" SelectionChanged ="CityList_SelectionChanged" >
< ListBox.ItemTemplate > <!-- 数据绑定 -->
< DataTemplate >
< StackPanel x:Name ="stackPanelCityList" Orientation ="Vertical" >
< TextBlock HorizontalAlignment ="Left" Foreground =" {StaticResource PhoneForegroundBrush} " FontSize ="40" Text =" {Binding CityPinyin} " />
< StackPanel Orientation ="Horizontal" HorizontalAlignment ="Left" >
< TextBlock Margin ="0,0,10,0" FontSize ="25" Text ="省份：" Foreground ="LightBlue" />
< TextBlock Margin ="0,0,10,0" FontSize ="25" Text =" {Binding Province} " Foreground =" {StaticResource PhoneForegroundBrush} " />
< TextBlock Margin ="0,0,10,0" FontSize ="25" Text ="城市：" Foreground ="LightBlue" />
< TextBlock Margin ="0,0,10,0" FontSize ="25" Text =" {Binding CityName} " Foreground =" {StaticResource PhoneForegroundBrush} " />
</ StackPanel >
</ StackPanel >
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ Grid >
</ Grid >
</ phone:PhoneApplicationPage >

using System;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;

namespace WeatherForecast
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
CityList.ItemsSource = App.cityList; // 绑定城市列表
}

/// <summary>
/// 获取天气预报事件
/// </summary>
private void CityList_SelectionChanged( object sender, SelectionChangedEventArgs e)
{
// 如果列被选中
if (CityList.SelectedIndex != - 1 )
{
City curCity = (City)CityList.SelectedItem; // 获取当前选中的城市的绑定的类
this .NavigationService.Navigate( new Uri( " /ForecastPage.xaml?City= " +
curCity.CityPinyin, UriKind.Relative)); // 跳转向ForecastPage.xaml 并传递参数CityPinyin 接口要用到城市的拼音
}
}

/// <summary>
/// 跳转到ForecastPage.xaml页面前执行该事件
/// </summary>
protected override void OnNavigatedFrom(NavigationEventArgs args)
{
// 清空选中的列
CityList.SelectedIndex = - 1 ;
CityList.SelectedItem = null ;
}
}
}

第二个界面  异步调用Google的天气api，解析xml，然后绑定到客户端

天气预报类

ForecastPeriod.cs

View Code

using System.ComponentModel;

namespace WeatherForecast
{
/// <summary>
/// 天气预报绑定类
/// </summary>
public class ForecastPeriod : INotifyPropertyChanged
{
private string day_of_week; // 星期
private int low; // 最低温度
private int high; // 最高温度
private string icon; // 图片地址
private string condition; // 天气情况

public event PropertyChangedEventHandler PropertyChanged;

public ForecastPeriod()
{
}

public string Day_of_week
{
get
{
return day_of_week;
}
set
{
if (value != day_of_week)
{
this .day_of_week = value;
NotifyPropertyChanged( " Day_of_week " );
}
}
}

public int Low
{
get
{
return low;
}
set
{
if (value != low)
{
this .low = value;
NotifyPropertyChanged( " Low " );
}
}
}

public int High
{
get
{
return high;
}
set
{
if (value != high)
{
this .high = value;
NotifyPropertyChanged( " High " );
}
}
}

public string Icon
{
get
{
return icon;
}
set
{
if (value != icon)
{
this .icon = value;
NotifyPropertyChanged( " Icon " );
}
}
}

public string Condition
{
get
{
return condition;
}
set
{
if (value != condition)
{
this .condition = value;
NotifyPropertyChanged( " Condition " );
}
}
}

private void NotifyPropertyChanged( string property)
{
if (PropertyChanged != null )
{
PropertyChanged( this , new PropertyChangedEventArgs(property));
}
}
}
}

天气预报列表类 以及异步调用解析的方法

Forecast.cs

View Code

using System;
using System.Net;
using System.Windows;
using System.ComponentModel;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Xml.Linq;


namespace WeatherForecast
{
/// <summary>
/// 天气类以及处理解析异步请求
/// </summary>
public class Forecast : INotifyPropertyChanged
{
// 天气预报的城市
private string city;
// 天气预报的时间
private string forecast_date;

public event PropertyChangedEventHandler PropertyChanged;

// 不同时间段的天气预报集合
public ObservableCollection < ForecastPeriod > ForecastList
{
get ;
set ;
}

public String City
{
get
{
return city;
}
set
{
if (value != city)
{
city = value;
NotifyPropertyChanged( " City " );
}
}
}

public String Forecast_date
{
get
{
return forecast_date;
}
set
{
if (value != forecast_date)
{
forecast_date = value;
NotifyPropertyChanged( " Forecast_date " );
}
}
}

public Forecast()
{
ForecastList = new ObservableCollection < ForecastPeriod > ();
}

private void NotifyPropertyChanged( string property)
{
if (PropertyChanged != null )
{
PropertyChanged( this , new PropertyChangedEventArgs(property));
}
}
//

/// <summary>
/// 获取Forecast类
/// </summary>
public void GetForecast( string cityPinyin)
{
UriBuilder fullUri = new UriBuilder( " http://www.google.com/ig/api " );
fullUri.Query = " weather= " + cityPinyin;
HttpWebRequest forecastRequest = (HttpWebRequest)WebRequest.Create(fullUri.Uri);
ForecastUpdateState forecastState = new ForecastUpdateState();
forecastState.AsyncRequest = forecastRequest;
forecastRequest.BeginGetResponse( new AsyncCallback(HandleForecastResponse),
forecastState);
}

/// <summary>
/// 异步获取信息
/// </summary>
/// <param name="asyncResult"></param>
private void HandleForecastResponse(IAsyncResult asyncResult)
{
ForecastUpdateState forecastState = (ForecastUpdateState)asyncResult.AsyncState;
HttpWebRequest forecastRequest = (HttpWebRequest)forecastState.AsyncRequest;
forecastState.AsyncResponse = (HttpWebResponse)forecastRequest.EndGetResponse(asyncResult);
Stream streamResult;
string city = "" ;
string forecast_date = "" ;

// 创建一个临时的ForecastPeriod集合
ObservableCollection < ForecastPeriod > newForecastList =
new ObservableCollection < ForecastPeriod > ();

try
{
streamResult = forecastState.AsyncResponse.GetResponseStream();
// 加载 XML
XElement xmlWeather = XElement.Load(streamResult);

// 解析XML
// http://www.google.com/ig/api?weather=Beijing

// 找到forecast_information节点获取city节点和forecast_date节点的信息
XElement xmlCurrent = xmlWeather.Descendants( " forecast_information " ).First();
city = ( string )(xmlCurrent.Element( " city " ).Attribute( " data " ));
forecast_date = ( string )(xmlCurrent.Element( " forecast_date " ).Attribute( " data " ));

ForecastPeriod newPeriod;
foreach (XElement curElement in xmlWeather.Descendants( " forecast_conditions " ))
{
try
{
newPeriod = new ForecastPeriod();
newPeriod.Day_of_week = ( string )(curElement.Element( " day_of_week " ).Attribute( " data " ));
newPeriod.Low = ( int )(curElement.Element( " low " ).Attribute( " data " ));
newPeriod.High = ( int )(curElement.Element( " high " ).Attribute( " data " ));
newPeriod.Icon = " http://www.google.com " + ( string )(curElement.Element( " icon " ).Attribute( " data " ));
newPeriod.Condition = ( string )(curElement.Element( " condition " ).Attribute( " data " ));
newForecastList.Add(newPeriod);
}
catch (FormatException)
{

}
}
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
// 赋值City Forecast_date
City = city;
Forecast_date = forecast_date;
ForecastList.Clear();

// 赋值ForecastList
foreach (ForecastPeriod forecastPeriod in newForecastList)
{
ForecastList.Add(forecastPeriod);
}
});
}
catch (FormatException)
{
return ;
}

}
}

public class ForecastUpdateState
{
public HttpWebRequest AsyncRequest { get ; set ; }
public HttpWebResponse AsyncResponse { get ; set ; }
}

}

xml的格式如图

第二个页面的代码

ForecastPage.xaml

< phone:PhoneApplicationPage
x:Class ="WeatherForecast.ForecastPage"
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"
FontFamily =" {StaticResource PhoneFontFamilyNormal} "
FontSize =" {StaticResource PhoneFontSizeNormal} "
Foreground =" {StaticResource PhoneForegroundBrush} "
SupportedOrientations ="Portrait" Orientation ="Portrait"
mc:Ignorable ="d" d:DesignHeight ="768" d:DesignWidth ="480"
shell:SystemTray.IsVisible ="True" >

< Grid x:Name ="LayoutRoot" Background ="Transparent" >
< Grid.RowDefinitions >
< RowDefinition Height ="Auto" />
< RowDefinition Height ="*" />
</ Grid.RowDefinitions >
< StackPanel x:Name ="TitlePanel" Grid.Row ="0" Margin ="24,24,0,12" >
< TextBlock x:Name ="ApplicationTitle" Text ="天气预报" Style =" {StaticResource PhoneTextNormalStyle} " />
< TextBlock x:Name ="PageTitle" Text =" {Binding City} " Margin ="-3,-8,0,0" Style =" {StaticResource PhoneTextNormalStyle} " />
</ StackPanel >
< Grid x:Name ="ContentGrid" Grid.Row ="1" Margin ="12,0,12,0" >
< ListBox Height ="618" HorizontalAlignment ="Left" Margin ="0,5,0,0" Name ="ForecastList" VerticalAlignment ="Top" Width ="474" Grid.RowSpan ="2" SelectionChanged ="ForecastList_SelectionChanged" >
< ListBox.ItemTemplate > <!-- 数据绑定模板 -->
< DataTemplate >
< Grid >
< Grid.RowDefinitions >
< RowDefinition Height ="80" />
< RowDefinition Height ="80" />
< RowDefinition />
< RowDefinition Height ="*" MinHeight ="80" />
</ Grid.RowDefinitions >
< Grid.ColumnDefinitions >
< ColumnDefinition Width ="90" />
< ColumnDefinition Width ="70" />
< ColumnDefinition Width ="180" />
< ColumnDefinition Width ="90" />
</ Grid.ColumnDefinitions >
< TextBlock Text =" {Binding Day_of_week} " Foreground ="LightBlue" FontSize ="40" Grid.Column ="0" Grid.Row ="0" Grid.ColumnSpan ="2" />
< Image Source =" {Binding Icon} " Grid.Column ="0" Grid.Row ="0" VerticalAlignment ="Bottom" HorizontalAlignment ="Right" Grid.ColumnSpan ="2" />
< TextBlock Text ="最低温度(K)" FontSize ="30" Foreground ="LightBlue" Grid.Column ="0" Grid.Row ="1" Grid.ColumnSpan ="2" />
< TextBlock Text =" {Binding Low} " FontSize ="30" Foreground ="White" Grid.Column ="1" Grid.Row ="1" Grid.ColumnSpan ="2" VerticalAlignment ="Bottom" HorizontalAlignment ="Right" />
< TextBlock Text ="最高温度(K)" FontSize ="30" Foreground ="LightBlue" Grid.Column ="0" Grid.Row ="2" Grid.ColumnSpan ="2" />
< TextBlock Text =" {Binding High} " FontSize ="30" Foreground ="White" Grid.Column ="1" Grid.Row ="2" Grid.ColumnSpan ="2" VerticalAlignment ="Bottom" HorizontalAlignment ="Right" />
< TextBlock Text =" {Binding Condition} " FontSize ="25" Foreground ="White" Grid.Column ="0" Grid.Row ="3" Grid.ColumnSpan ="4" TextWrapping ="Wrap" />

</ Grid >
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ Grid >
</ Grid >
</ phone:PhoneApplicationPage >

using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;

namespace WeatherForecast
{
public partial class ForecastPage : PhoneApplicationPage
{
Forecast forecast;

public ForecastPage()
{
InitializeComponent();
}

/// <summary>
/// 当该页面被链接打开时，会调用该事件
/// </summary>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// 获取传过来的City值
string cityPinyin = this .NavigationContext.QueryString[ " City " ];
forecast = new Forecast();
// 获取天气类
forecast.GetForecast(cityPinyin);
// 设置页面数据绑定到forecast
DataContext = forecast;
// 设置ForecastList绑定到forecast.ForecastList
ForecastList.ItemsSource = forecast.ForecastList;
}

private void ForecastList_SelectionChanged( object sender, SelectionChangedEventArgs e)
{
ForecastList.SelectedIndex = - 1 ;
ForecastList.SelectedItem = null ;

}
}
}