window phone7.1 天气预报教程(四)ApplicationBar的设置与LongListSelector控件的使用
到现在为止，我们只能显示一个城市的天气，可是如果想得到别的城市的天气呢，总不能去修改程序里的值啊．这样我们就需求添加一个选择城市的页面．
首先，我们要在MainPage．xaml页面中添加一个设置按钮，这个按钮呢，你自己做一个按钮也行，要是ＷＭ７为什么预留了一个ApplicationBar的功能，我们可以直接使用它就行，在每个xaml的页面中．这个功能的代码，已经为什么写好了，只是被注释掉了．它就在前台代码的最下面．
看到了，我们只要把它进行解开就行了．这里简单说一句<shell:ApplicationBarIconButton>就是
看到了吧，而且对于<shell:ApplicationBar.MenuItems>则是点击省略号后，显示的二级菜单位了，你可以自己去试一下．
一般来说我们刚解锁的这个applicationbar的图片全是Ｘ这个Ｘ表示的是没有图片．我们可以去ＳＤＫ中去找我们自己需求的图片，地址是：
Ｃ;/programe file/Microsoft SDKs/window phone/v7.1/Icon/dark下面去选择你要的图片，然后将图片复制到你的项目中，然后修改图片的属性，Build Action:Content
Copy to Output: Copy if newer就可以了
Click="ApplicationBarIconButton_Click"
/// <summary>
/// 设置按钮点击事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/SetCity.xaml", UriKind.Relative));
}
SetCity.xaml页面就是我们的选择城市的页面，这里我们用到一个控制是LongListSelector控件，它需求你安装Silverlight for Windows Phone Toolkit才可以使用．http://silverlight.codeplex.com/releases/view/55034这个是它的下载地址．这个控件的好处是，可以让我们所选择的城市像电话号码薄一样显示出来，我们先看一下效果
看到了，是不是很好看，而且选择起来，也相当方便
我们看一下前台代码：
<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="WeatherForecast.SetCity"
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">
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="GroupHeader">
<Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Key}"></TextBlock>
</Border>
</DataTemplate>
<DataTemplate x:Key="GroupItem">
<Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Key}" Style="{StaticResource PhoneTextLargeStyle}"></TextBlock>
</Border>
</DataTemplate>
<DataTemplate x:Key="ListHeader">
<TextBlock Text="选择城市" Style="{StaticResource PhoneTextTitle1Style}"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="Itemtmp">
<Grid>
<TextBlock Text="{Binding city}"></TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--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" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>-->
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:LongListSelector x:Name="llsCity" SelectionChanged="llsCity_SelectionChanged" Background="Transparent"
ItemTemplate="{StaticResource Itemtmp}"
ListHeaderTemplate="{StaticResource ListHeader}"
GroupHeaderTemplate="{StaticResource GroupHeader}"
GroupItemTemplate="{StaticResource GroupItem}">
</toolkit:LongListSelector>
</Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage>
LongListSelector控件，可以让你自己设计它的样式模板，包括信息，头部等．这里我们就采用了默认情况．
我们来看后台代码，还记得在１中我给的哪个xml文件吗，里面的所有城市的信息．在这里我们要用它来做数据源．
第一步，我们先建立一个类，表示，省，市，以及市的ＩＤ
/// <summary>
/// 定义城市信息类
/// </summary>
public class CityInfo
{
public string city { get; set; }
public string province { get; set; }
public string cityid { get; set; }
}
第二步，我们要重载接口IGrouping主要是用来把得到的信息，拼接起来
/// <summary>
/// 定义城市信息类
/// </summary>
public class CityInfo
{
public string city { get; set; }
public string province { get; set; }
public string cityid { get; set; }
}
/// <summary>
/// 重载接口
/// </summary>
/// <typeparam name="TKey"><peparam>
/// <typeparam name="TElement"><peparam>
public class GroupingLayer<TKey, TElement> : IGrouping<TKey, TElement>
{
//分组数据
private readonly IGrouping<TKey, TElement> grouping;
//初始化
public GroupingLayer(IGrouping<TKey, TElement> unit)
{
grouping = unit;
}
//唯一的键值
public TKey Key
{
get { return grouping.Key; }
}
//重载判断相等方法
public override bool Equals(object obj)
{
GroupingLayer<TKey, TElement> that = obj as GroupingLayer<TKey, TElement>;
return (that != null) && (this.Key.Equals(that.Key));
}
public IEnumerator<TElement> GetEnumerator()
{
return grouping.GetEnumerator();
}
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return grouping.GetEnumerator();
}
}
第三步，添加数据绑定代码
/// <summary>
/// 从XML数据中取出省份，市信息
/// </summary>
public void GetInfo()
{
var xDoc = XDocument.Load("data/city.xml");
List<CityInfo> listCity = new List<CityInfo>();
var info = from city in xDoc.Descendants("Citys")
select new
{
province = city.Element("province").Value,
cityc = city.Element("city").Value,
cityid = city.Element("cityid").Value
};
foreach (var c in info)
{
listCity.Add(new CityInfo() { province = c.province, city = c.cityc, cityid = c.cityid });
}
var selected = from c in listCity
group c by c.province into n
select new GroupingLayer<string, CityInfo>(n);
this.llsCity.ItemsSource = selected;
}
好，我们在构造函数中调用第三步的方法，来看一下效果，是不是显示出来，哪么显示之后，就是我们要点击城市之后，跳动回显示天气的页面，把选择的城市天气显示出来
这里的程序，就和(三)里的一样了，调用webclient写取得你要选择城市的天气．代码如下：
/// <summary>
/// 选择城市时对数据进行更新
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void llsCity_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
CityInfo c = this.llsCity.SelectedItem as CityInfo;
if (c!=null)
{
webclient(c.cityid);
}
}
/// <summary>
/// 加载远程中央气象局数据
/// </summary>
public void webclient(string cityid)
{
WebClient wc = new WebClient();
wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
wc.DownloadStringAsync(new Uri("http://m.weather.com.cn/data/" + cityid + ".html", UriKind.Absolute));
}
/// <summary>
/// 异步加载完成后，向气象类写数据
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
public void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
try
{
if (e.Result.Length < 1 || e.Error != null || e.Cancelled)
{
MessageBox.Show("天气预报数据加载失败！原因：" + e.Error.Message);
return;
}
JObject json = JObject.Parse(e.Result);
wi = new WeatherInfo
{
city = (string)json["weatherinfo"]["city"],
cityid = (string)json["weatherinfo"]["cityid"],
date_y = (string)json["weatherinfo"]["date_y"],
week = (string)json["weatherinfo"]["week"],
info = (string)json["weatherinfo"]["index48_d"],
wind1 = (string)json["weatherinfo"]["wind1"],
temp1 = (string)json["weatherinfo"]["temp1"],
temp2 = (string)json["weatherinfo"]["temp2"],
temp3 = (string)json["weatherinfo"]["temp3"],
temp4 = (string)json["weatherinfo"]["temp4"],
temp5 = (string)json["weatherinfo"]["temp5"],
weather1 = (string)json["weatherinfo"]["weather1"],
weather2 = (string)json["weatherinfo"]["weather2"],
weather3 = (string)json["weatherinfo"]["weather3"],
weather4 = (string)json["weatherinfo"]["weather4"],
weather5 = (string)json["weatherinfo"]["weather5"]
};
//Update();
UpdateXML(json);
}
catch (Exception ex)
{
MessageBox.Show("连接中央气象局出错！");
//ReadXml();
}
}
这里的UpdateXML方法，是用来更新我们的临时存储空间中的数据信息的，还记得上次我们说的吗．第一次加载的时候，会先加载的数据
/// <summary>
/// 更新XML文件，取得最新的数据
/// </summary>
/// <param name="json"></param>
public void UpdateXML(JObject json)
{
if (iso.FileExists("weatherData.xml"))
{
iso.DeleteFile("weatherData.xml");
IsolatedStorageFileStream isfs = new IsolatedStorageFileStream("weatherData.xml", FileMode.Create, iso);
XElement xe = new XElement("weatherInfo",
new XElement("city", (string)json["weatherinfo"]["city"]),
new XElement("cityid", (string)json["weatherinfo"]["cityid"]),
new XElement("date_y", (string)json["weatherinfo"]["date_y"]),
new XElement("week", (string)json["weatherinfo"]["week"]),
new XElement("temp1", (string)json["weatherinfo"]["temp1"]),
new XElement("temp2", (string)json["weatherinfo"]["temp2"]),
new XElement("temp3", (string)json["weatherinfo"]["temp3"]),
new XElement("temp4", (string)json["weatherinfo"]["temp4"]),
new XElement("temp5", (string)json["weatherinfo"]["temp5"]),
new XElement("temp6", (string)json["weatherinfo"]["temp6"]),
new XElement("weather1", (string)json["weatherinfo"]["weather1"]),
new XElement("weather2", (string)json["weatherinfo"]["weather2"]),
new XElement("weather3", (string)json["weatherinfo"]["weather3"]),
new XElement("weather4", (string)json["weatherinfo"]["weather4"]),
new XElement("weather5", (string)json["weatherinfo"]["weather5"]),
new XElement("weather6", (string)json["weatherinfo"]["weather6"]),
new XElement("wind1", (string)json["weatherinfo"]["wind1"]),
new XElement("wind2", (string)json["weatherinfo"]["wind2"]),
new XElement("wind3", (string)json["weatherinfo"]["wind3"]),
new XElement("wind4", (string)json["weatherinfo"]["wind4"]),
new XElement("wind5", (string)json["weatherinfo"]["wind5"]),
new XElement("wind6", (string)json["weatherinfo"]["wind6"]),
new XElement("info", (string)json["weatherinfo"]["index48_d"]));
XDocument xdoc = new XDocument(new XDeclaration("1.0", "utf-8", "yes"), new XComment("天气数据"), new XElement("root", xe));
StreamWriter sw = new StreamWriter(isfs);
xdoc.Save(sw);
sw.Close();
isfs.Close();
NavigationService.Navigate(new Uri("/MainPage.xaml?cityid=" + (string)json["weatherinfo"]["cityid"], UriKind.Relative));
}
}
运行一下看一下效果如何，呵呵．．．．．是不是很有帅呢．这里其实还有几个问题，
第一，正常情况你，天气情况不应该是时时刷新的，应该设置一下，每隔几小时刷新一次，
第二，现在只是保留了一个城市的信息，你可以修改一下，做到保留几个城市的信息．