《手把手教你写天气预报》由会员分享，可在线阅读，更多相关《手把手教你写天气预报（71页珍藏版）》请在金锄头文库上搜索。
1、此文档供上网不便的朋友使用，仅供学习交流使用。此文档不能复制，鼓励手敲代码，毕竟拖控件粘代码始终是不好的事情。如果实在是需要，可以到博客上面来复制代码http:/ 先来展示下程序的效果图吧 这个程序虽小，但是基本的东西都是具有的。说下用到的具有特色的知识点（简单的不说了）：UserControl ，WebClient 请求，Json 数据解析，XML 数据解析，TombStone ，IsolatedStorage 存储，本地数据库 SQL CE。上面的每个知识点要写都是一个 Demo。此例子展示怎么将所有知识点联系到一块做一个实在的应用。Window phone 开发，我感觉现在这样的中文实例
2、教程很少。我的英语水平也不好，按照教育部的说法，六级没过，那些神马英文教程，勉强能看，但那也是相当纠结的事情。我估计还有不少不爱看英文教程，看到英文就头疼的爱好 WP7开发的入门者，所以打算写这么一个教程，尽量详细到每一步，尽量把分析思考写出来。如写的不好，尽请见谅。 写一个新手看的懂，让他们能做出这么一个可以用的应用增加一点自信心。最后一句：新手请进，老鸟飘过（二）手把手教你写天气预报程序：UserControl 的运用那么，开始吧。首先确认安装了 window phone SDK（没有的先去安装，SDK 自带 VS2010 Express 版，还有就是电脑系统要是 win7，XP 不支持微
3、软原版的模拟器，不过可以使用传智播客做的模拟器，具体自己百度） 。如果本来安装了 VS2010 ultimate 的。可以用之开发，但是确认升级到了 SP1版，不然不能使用，而且，如果本来的 VS2010是中文版，那么需要到 C:Program FilesMicrosoft Visual Studio 10.0Common7IDEProjectTemplatesCSharp（C 盘为 SDK 安装目录）,复制 Silverlight for Windows Phone 文件夹（此为 window phone 模板）到 C:Users用户名DocumentsVisual Studio 2010T
4、emplatesProjectTemplatesVisual C#下，这样原来的中文版VS2010就能识别 window phone 模板了。打开 VS2010。无论你打开的是中文版的还是英文版的，我用的是中文版的，我下面所说的操作大部分都是中文的。如果你英文不好还要用英文版的（虽然基本没几个英文单词） ，如果找不到我也没办法了（不过大部分应该都附图） 。点击文件-新建- 项目，在左边的模板里面选择 visual C#，然后再选择 silverlight for window phone，然后在右边选择 window phone application。填入名称：WeatherForecast
5、 具体如下图：点击确定。然后在这个弹窗，选择 OS 7.1，点击 OK。现在也可以点击运行。 运行方法：先看这 绿色三角后面选择的是 Emulator，就是模拟器。还有一个选项是 Device，就是手机。确认选择的是模拟器，点击绿色三角或者按 F5 运行。运行成功！ 我觉得这么一个程序，首先应该要能够获取到天气信息展示到界面。先分析下界面应该怎么做吧。新手看到这么复杂的界面大部分还真是无从入手。 观察界面，就是一个 Grid 的布局。但是麻烦的是右边的预报后几天天气的布局。单靠 grid 布局达不到如此效果。所以把这做成 UserControl。这样更容易布局。也可以展示下UserContro
6、l 的应用。现在，先添加一个 UserControl。在右边的解决方案管理器，在WeatherForecast 上右键，添加，新建项。添加一个 window phone user control。命名为 ForecastTemplate，点击添加，如图：在 ForecastTemplate.xaml。里面的 name 为 LayoutRoot 的 grid 里面添加两个 TextBlock，一个 Image。具体代码如下：现在在左边的设计框显示的是这样的： 我们需要从外部给这个 UserControl 的 Textblock 或者 Image 的属性赋值，那么需要给 ForecastTempl
7、ate 这个类添加成员变量来控制Textblock 或者 Image 的属性。那么。转到 ForecastTemplate.xaml.cs页面。也就是在 ForecastTemplate.xaml 的代码页面，右键，查看代码。就看到了。在 ForecastTemplate.xaml.cs 页面，在ForecastTemplate 类中添加如下的成员。/定义 Image 的 Source 属性。这样这个用户控件就能从外面访问到这个 Image 控件的Source 属性了private string _imageUri;public string ImageUrigetreturn _imageU
8、ri;set_imageUri = value;BitmapImage bmp = new BitmapImage(new Uri(value, UriKind.Relative);WImg.Source = bmp;/定义了 TextBlock 的 Text 属性。外头就可以给这个 Text 属性赋值了private string _weekday;public string Weekdaygetreturn _weekday;set_weekday = value; ;weekday.Text = value; private string _temp;public string Temp
9、getreturn _temp;set_temp = value;temp.Text = value;是否发现在这显示红色波浪线？因为没有引入命名空间。在 BitmapImage 上右键。解析，选择第一个 Using。这样就引入了命名空间。这里提这个主要是给新手提个醒，遇到错误不要着急。先看清楚是什么状况。解决就好了。现在转到 MainPage.xaml 页面。先添加命名空间。xmlns:my=clr-namespace:WeatherForecast贴图展示命名空间添加位置 正确添加命名空间。智能提示就能访问到Usercontrol 现在添加一些图片资源文件到工程。我这工程添加的图片资源可以
10、到这下载：http:/ Images 文件夹。然后复制整个Images 文件夹到工程里，具体操作：复制文件夹，然后解决方案资源管理器右键 WeatherForecast 这个工程，选择粘贴就完成了引入资源到工程。现在到 MainPage.xaml 中添加代码：Name 为 contentPanel 的 grid 添加代码。一开始 ForecastTemplate 下面会显示蓝色波浪线，而且在设计框里也不显示控件。运行一次就好。运行一次后，在设计框里显示如下：好了，这一节就到这吧。省得篇幅太长了。这节主要介绍了 UserControl 的运用。如有问题可以直接留言。这节工程代码下载：http:/
11、 （三）手把手教你写天气预报程序：运用 WebClient 获取天气和 json 数据解析上一节我们练习了 UserControl，这次我们就要把UserControl 运用到实际的布局上面来。首先，把 MainPage 中的原来的测试 UserControl 的代码删除，在 ContentPanel 添加代码：在设计框显示如下：这样界面就这样吧。感觉也没啥好说的。现在看 WebClient。在 点击图中的右下角用红框选择的小按钮或者点击文档大纲。选择 PhoneApplicationPage。选择好了。随意找个地点击一下，就成了图中的显示样子。然后选择属性 这里显示的是 PhoneAppli
12、cation 的属性。如果不是。重新点击 然后在属性页面选择事件： 然后找到 Loaded，在右边的框框双击，生成了一个PhoneApplicationPage_Loaded 事件。编译器自动帮你导向了事件处理在这个 Loaded 事件中，我打算用 WebClient 获取天气信息。并且显示到界面上。获取天气，就要用到天气预报 API。免费的 API 可以看我写的这个：http:/ API 是中央气象台的。主要是因为这个 API 能够获取到县城的天气信息。而且预报的信息很全。缺点就是我只收集到了大约10个省份的城市代码。这节我们就获取北京的天气。用到的 Url 是：http:/ 数据）：wea
13、therinfo:city:北京,city_en:beijing,date_y:2012年3月11日,date:,week:星期日,fchh:11,cityid:101010100,temp1:6 -6,temp2:9-2,temp3:130,temp4:11-1,temp5:91,temp6:103,tempF1:42.821.2,tempF2:48.228.4,tempF3:55.432,tempF4:51.830.2,tempF5:48.233.8,tempF6:5037.4,weather1:晴,weather2:晴,weather3: 多云转晴,weather4: 晴转多云,weat
14、her5:多云转阴,weather6:阴,img1:0,img2:99,img3:0,img4:99,img5:1,img6:0,img7:0,img8:1,img9:1,img10:2,img11:2,img12:99,img_single:0,img_title1:晴,img_title2:晴,img_title3:晴,img_title4:晴,img_title5:多云,img_title6:晴,img_title7:晴,img_title8:多云,img_title9:多云,img_title10:阴,img_title11:阴,img_title12:阴,img_title_single: 晴,wind1:微风,wind2:微风,wind3: 微风,wind4:微风,wind5: 微风,wind6: 微风,fx1:微风 ,fx2
