首先感谢林政老师的博客，给了我很大的指导。
准备工作
我的开发环境：
- Visual Studio 2013(With Update 4)
- Windows Phone 8.1
- Windows 8.1
我使用的是百度天气的api，所以你需要一个百度天气的ak，戳这里申请。记住你ak的值，像这样拼接uri：
http://api.map.baidu.com/telematics/v3/weather?location=城市&output=xml&ak=你的ak
可以获取一个xml格式的返回数据：
具体思路
实现
ForecastPeriod类，用来记录每天的天气和数据的绑定：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;
namespace WeatherForecastDIY
{
/// <summary>
/// 天气预报数据类
/// </summary>
class ForecastPeriod:INotifyPropertyChanged
{
private string weather;//天气
private string wind;//风力
private string maxTemperature;//最高温
private string minTemperature;//最低温
private string date;//日期
private string dayPictureUrl;//天气图片
private string temperature;//温度
public string Weather
{
set
{
if (value != weather)
{
weather = value;
OnpropertyChanged("Weather");
}
}
get
{
return weather;
}
}
public string Wind
{
set
{
if (value != wind)
{
wind = value;
OnpropertyChanged("Wind");
}
}
get
{
return wind;
}
}
public string MaxTemperature
{
set
{
if (value != maxTemperature)
{
maxTemperature = value;
OnpropertyChanged("MaxTemperature");
}
}
get
{
analysisTemperature();
return maxTemperature;
}
}
public string MinTemperature
{
set
{
if (value != minTemperature)
{
minTemperature = value;
OnpropertyChanged("MinTemperature");
}
}
get
{
analysisTemperature();
return minTemperature;
}
}
public string Date
{
set
{
if (value != date)
{
date = value;
OnpropertyChanged("Date");
}
}
get
{
return date;
}
}
public string DayPictureUrl
{
set
{
if (dayPictureUrl != value)
{
dayPictureUrl = value;
OnpropertyChanged("DayPictureUrl");
}
}
get
{
return dayPictureUrl;
}
}
public string Temperature
{
set
{
if (value != temperature)
{
temperature = value;
OnpropertyChanged("Temperature");
}
}
get
{
return temperature;
}
}
/// <summary>
/// 分析温度字符串，得到最高最低温
/// </summary>
private void analysisTemperature()
{
if (Temperature == null)
return;
int p = -1;//波浪号的位置
for (int i = 0; i < Temperature.Length; i++)
if (Temperature[i] == '~') { p = i; break; }
if(p==-1)//没有波浪号
{
maxTemperature = Temperature;
minTemperature = Temperature;
}
else
{
maxTemperature = Temperature.Substring(0, p) + "℃";
minTemperature = Temperature.Substring(p + 1, Temperature.Length - p - 1);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnpropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if(handler!=null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}
Forecast类，这个的主要功能是异步获取数据和解析Xml：
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net;
using System.Net.Http;
using System.Xml;
using System.Xml.Linq;
using System.IO;
using System.ComponentModel;
using Windows.UI.Xaml;
using Windows.Storage;
namespace WeatherForecastDIY
{
/// <summary>
/// 天气预报类
/// </summary>
class Forecast:INotifyPropertyChanged
{
private string city;//城市名
private string currentTemperature;//实时的温度
private Visibility vis;//控制进度条是否可见
public string City
{
set
{
if (city != value)
{
city = value;
OnpropertyChanged("City");
}
}
get
{
return city;
}
}
public string CurrentTemperature//实时气温
{
set
{
if (currentTemperature != value)
{
currentTemperature = value;
OnpropertyChanged("CurrentTemperature");
}
}
get
{
return currentTemperature;
}
}
public ForecastPeriod TodayForecast//当天的天气
{
set;
get;
}
public Visibility Vis
{
set
{
if(value!=vis)
{
vis = value;
OnpropertyChanged("Vis");
}
}
get
{
return vis;
}
}
public ObservableCollection<ForecastPeriod> ForecastList { set; get; }//不知道多少天的天气集合
/// <summary>
/// 构造函数，初始化
/// </summary>
/// <param name="CityName"></param>
public Forecast(string CityName)
{
City = CityName;
ForecastList = new ObservableCollection<ForecastPeriod>();
TodayForecast=new ForecastPeriod();
}
public Forecast()
{
City = "成都";//默认是成都萌萌哒
ForecastList = new ObservableCollection<ForecastPeriod>();
TodayForecast = new ForecastPeriod();
}
/// <summary>
/// 异步获取天气预报
/// </summary>
/// <returns></returns>
private async void getForecastAsync()
{
//异步一开始设置进度条可见
Vis = Visibility.Visible;
//局部变量
ObservableCollection<ForecastPeriod> newForecastList = new ObservableCollection<ForecastPeriod>();
//异步获取数据，很多童鞋问为啥uri要加DateTime，那是因为如果uri是一样的，不知道哪里的缓存就不让你更新数据
Uri uri = new Uri("http://api.map.baidu.com/telematics/v3/weather?location=" + City + "&output=xml&ak=HyXsPscHkQOfR0nxyUmYrV8l&date=" + System.DateTime.Now.ToString());
HttpClient httpClient = new HttpClient();
HttpResponseMessage response = await httpClient.GetAsync(uri);
response.EnsureSuccessStatusCode();
Stream stream = await response.Content.ReadAsStreamAsync();
//搞到Xlm
XElement now = XElement.Load(stream);
//用完释放好习惯
httpClient.Dispose();
//解析Xml，请对照着百度返回的Xml看
//判断是否成功
if(now.Element("status").Value.Equals("success"))
{
//往下走啊往下走
now = now.Element("results").Element("weather_data").Element("date");
//这天的天气
ForecastPeriod newForecastPeriod = new ForecastPeriod();
//那一排Xml天气数据居然是并列的，解析解析
while (now != null)
{
//获取当前节点的名字
string nowName=now.Name.LocalName;
if (nowName.Equals("date"))
{
string tmp = now.Value;
//当日期的长度大于2，就是当天的日期，那个有实时天气的（这个半夜会迷之失效，为啥问度娘）
if (tmp.Length > 2)
{
newForecastPeriod.Date = tmp.Substring(0, 2);
//简单的说就是在提取实时气温
int p = -1;
for (int i = 0; i < tmp.Length; i++) if (tmp[i] == '：') { p = i; break; }
CurrentTemperature = tmp.Substring(p + 1, tmp.Length - p - 3);
}
else
newForecastPeriod.Date = now.Value;
}
else if (nowName.Equals("dayPictureUrl"))
newForecastPeriod.DayPictureUrl = now.Value;
else if (nowName.Equals("weather"))
newForecastPeriod.Weather = now.Value;
else if (nowName.Equals("wind"))
newForecastPeriod.Wind = now.Value;
else if (nowName.Equals("temperature"))
{
//每次到气温的时候就结束了一天的预报，把这一天的情况加入集合
newForecastPeriod.Temperature = now.Value;
newForecastList.Add(newForecastPeriod);
newForecastPeriod = new ForecastPeriod();
}
now = (XElement)now.NextNode;
}
//终于解析完了（长吁一口气）
//接下来就是赋值了
TodayForecast.Weather = newForecastList[0].Weather;
TodayForecast.Wind = newForecastList[0].Wind;
TodayForecast.MaxTemperature = newForecastList[0].MaxTemperature;
TodayForecast.MinTemperature = newForecastList[0].MinTemperature;
foreach (ForecastPeriod forecastPeriod in newForecastList)
ForecastList.Add(forecastPeriod);
}
else
{
//熊孩子一定乱输的城市，然后被度娘给了Error
//所以要纠正过来，还是默认成都萌萌哒
City = "成都";
//改应用数据
ApplicationDataContainer localsetting = Windows.Storage.ApplicationData.Current.LocalSettings;
localsetting.Values["City"] = City;
//这叫不叫递归调用呢？反正再来一次
getForecastAsync();
}
//终于异步完了，关掉进度条
Vis = Visibility.Collapsed;
}
/// <summary>
/// 没什么用的函数，懒得改了，大家明白那个意思就好
/// </summary>
public void getForecast()
{
getForecastAsync();
}
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// 绑定
/// </summary>
/// <param name="name"></param>
protected void OnpropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}主界面，设计得太丑，还望美工好的童鞋给予指导和建议：
<Page
x:Class="WeatherForecastDIY.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WeatherForecastDIY"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="Setting" Icon="Setting" Label="设置" Click="Setting_Click"/>
<AppBarButton x:Name="Refresh" Icon="Refresh" Label="刷新" Click="Refresh_Click"/>
<AppBarButton x:Name="SolidStar" Icon="SolidStar" Label="为我打分"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<Pivot Title="{Binding City}">
<PivotItem Header="今日">
<StackPanel x:Name="TodayStackPanel" Orientation="Horizontal">
<StackPanel x:Name="TodayWeatherStackPanel" Height="Auto" Width="15" Orientation="Vertical">
<TextBlock Text="天气 " TextWrapping="Wrap" Height="60" Width="Auto" FontSize="15"></TextBlock>
<TextBlock Text="{Binding Path=TodayForecast.Weather}" TextWrapping="Wrap" Height="Auto" Width="Auto" FontSize="15"></TextBlock>
</StackPanel>
<StackPanel x:Name="TodayWindStackPanel" Height="Auto" Width="15" Orientation="Vertical">
<TextBlock Text="风力 " TextWrapping="Wrap" Height="60" Width="Auto" FontSize="15"></TextBlock>
<TextBlock Text="{Binding Path=TodayForecast.Wind}" TextWrapping="Wrap" Height="Auto" Width="Auto" FontSize="15"></TextBlock>
</StackPanel>
<StackPanel x:Name="TodayMaxTemStackPanel" Height="Auto" Width="15" Orientation="Vertical">
<TextBlock Text="最高温 " TextWrapping="Wrap" Height="60" Width="Auto" FontSize="15"></TextBlock>
<TextBlock Text="{Binding Path=TodayForecast.MaxTemperature}" TextWrapping="Wrap" Height="Auto" Width="Auto" FontSize="15"></TextBlock>
</StackPanel>
<StackPanel x:Name="TodayMinTemStackPanel" Height="Auto" Width="15" Orientation="Vertical">
<TextBlock Text="最低温 " TextWrapping="Wrap" Height="60" Width="Auto" FontSize="15"></TextBlock>
<TextBlock Text="{Binding Path=TodayForecast.MinTemperature}" TextWrapping="Wrap" Height="Auto" Width="Auto" FontSize="15"></TextBlock>
</StackPanel>
<TextBlock x:Name="CurrentTemperature" Height="240" Width="100" Text="{Binding CurrentTemperature}" VerticalAlignment="Top" FontSize="100" FontStyle="Normal"></TextBlock>
<TextBlock Text="℃" Height="90" Width="90" VerticalAlignment="Top" FontSize="50"></TextBlock>
</StackPanel>
</PivotItem>
<PivotItem Header="每天">
<Grid x:Name="EverydayWeatherGrid">
<ListBox x:Name="EverydayWeatherListBox" Background="White">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="60" Width="Auto" Margin="0,0,0,15" Orientation="Horizontal">
<TextBlock Text="{Binding Date}" Width="60" FontSize="30"></TextBlock>
<Image Source="{Binding DayPictureUrl}" Width="60" Height="Auto"></Image>
<TextBlock Text="{Binding Temperature}" Width="60" Height="Auto"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</PivotItem>
</Pivot>
<ProgressBar x:Name="ProgressBar" HorizontalAlignment="Left" Height="10" VerticalAlignment="Top" Visibility="{Binding Vis}" IsIndeterminate="True" Width="399.999969482422"/>
</Grid>
</Page>接下来是MainPage.xaml.cs，注释写得很详细：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=391641 上有介绍
namespace WeatherForecastDIY
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
private string city;//城市（我不是字幕君。。。）
public string City
{
set
{
if(value!=city)
{
city = value;
}
}
get
{
return city;
}
}
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
//第一次进来时就更新
getCity();
ReportForecast();
}
/// <summary>
/// 报道天气
/// </summary>
private void ReportForecast()
{
Forecast forecast = new Forecast(City);
forecast.getForecast();
//数据绑定
DataContext = forecast;
EverydayWeatherListBox.ItemsSource = forecast.ForecastList;
}
/// <summary>
/// 读应用数据的函数（突然意识到应该说方法，而不是函数）
/// </summary>
private void getCity()
{
ApplicationDataContainer localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;
if (!localSettings.Values.ContainsKey("City"))
localSettings.Values["City"] = "成都";//怎样都是成都萌萌哒
City = localSettings.Values["City"].ToString();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// TODO: 准备此处显示的页面。
// TODO: 如果您的应用程序包含多个页面，请确保
// 通过注册以下事件来处理硬件“后退”按钮:
// Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
// 如果使用由某些模板提供的 NavigationHelper，
// 则系统会为您处理该事件。
//上面一堆堆完全不知所以然，简单说就是这个界面从不见了到出现时调用这个方法
getCity();
ReportForecast();
}
/// <summary>
/// 更新按钮
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Refresh_Click(object sender, RoutedEventArgs e)
{
getCity();
ReportForecast();
}
/// <summary>
/// 设置按钮
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Setting_Click(object sender, RoutedEventArgs e)
{
//调到SetCirt界面
Frame.Navigate(typeof(SetCity), City);
}
}
}
接下来是SetCity的页面，也就是设置城市的页面，这个难点在于换页面。
设计：
<Page
x:Class="WeatherForecastDIY.SetCity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WeatherForecastDIY"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="Accept" Icon="Accept" Label="确定" Click="Accept_Click"></AppBarButton>
<AppBarButton x:Name="Cancel" Icon="Cancel" Label="取消" Click="Cancel_Click"></AppBarButton>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<StackPanel x:Name="SetCityStackPanel">
<TextBlock Margin="0,0,0,0" Height="15" FontSize="15" Text="输入城市"></TextBlock>
<TextBox x:Name="TextBox" Height="15" Width="Auto" FontSize="15"></TextBox>
</StackPanel>
</Grid>
</Page>
SetCity.xaml.cs：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
namespace WeatherForecastDIY
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class SetCity : Page
{
public SetCity()
{
this.InitializeComponent();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
//想必大家都看见了上方微软君的迷之解释了吧。。。
TextBox.Text = (string)e.Parameter;
}
private void Cancel_Click(object sender, RoutedEventArgs e)
{
TextBox.Text = "";
}
private void Accept_Click(object sender, RoutedEventArgs e)
{
//改改改，应用数据什么的
ApplicationDataContainer localsetting = Windows.Storage.ApplicationData.Current.LocalSettings;
localsetting.Values["City"] = TextBox.Text;
//回到主界面
Frame.GoBack();
}
}
}