<WP7>（二）手把手教你写天气预报程序：UserControl的运用

概述                那么，开始吧。首先确认安装了window phone SDK（没有的先去安装，SDK自带VS2010 Express版，还有就是电脑系统要是win7，XP不支持微软原版的模拟器，不过可以使用传智播客做的模拟器，具体自己百度）。如果本来安装了VS2010 ultimate的。可以用之开发，但是确认升级到了SP1版，不然不能使用，而且，如果本来的VS2010是中文版，那

                那么，开始吧。首先确认安装了window phone SDK（没有的先去安装，SDK自带VS2010 Express版，还有就是电脑系统要是win7，XP不支持微软原版的模拟器，不过可以使用传智播客做的模拟器，具体自己百度）。如果本来安装了VS2010 ultimate的。可以用之开发，但是确认升级到了SP1版，不然不能使用，而且，如果本来的VS2010是中文版，那么需要到C:\Program files\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplates\CSharp（C盘为SDK安装目录）,复制Silverlight for windows Phone文件夹（此为window phone模板）到C:\Users\用户名\documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#下，这样原来的中文版VS2010就能识别window phone模板了。

          打开VS2010。无论你打开的是中文版的还是英文版的，我用的是中文版的，我下面所说的 *** 作大部分都是中文的。如果你英文不好还要用英文版的（虽然基本没几个英文单词），如果找不到我也没办法了（不过大部分应该都附图）。

        点击文件---新建----项目，在左边的模板里面选择visual C#，然后再选择silverlight for window phone，然后在右边选择 window phone application。填入名称：WeatherForecast    具体如下图：

然后在这个d窗，选择OS 7.1，

点击OK。

点击确定。现在也可以点击运行。

运行方法：先看这

绿色三角后面选择的是Emulator，就是模拟器。还有一个选项是Device，就是手机。确认选择的是模拟器，点击绿色三角或者按F5运行。运行成功！

我觉得这么一个程序，首先应该要能够获取到天气信息展示到界面。先分析下界面应该怎么做吧。新手看到这么复杂的界面大部分还真是无从入手。

观察界面，就是一个GrID的布局。但是麻烦的是右边的预报后几天天气的布局。单靠grID布局达不到如此效果。

所以把这做成UserControl。这样更容易布局。也可以展示下UserControl的应用。

现在，先添加一个UserControl。在右边的解决方案管理器，在WeatherForecast上右键，添加，新建项。添加一个window phone user control。命名为ForecastTemplate，点击添加，如图：

在ForecastTemplate.xaml。里面的name为LayoutRoot的grID里面添加两个TextBlock，一个Image。

具体代码如下：

<GrID.ColumnDeFinitions>            <ColumnDeFinition WIDth="*"/>            <ColumnDeFinition WIDth="*"/>        </GrID.ColumnDeFinitions>        <GrID.RowDeFinitions>            <RowDeFinition Height="*"/>            <RowDeFinition Height="*"/>        </GrID.RowDeFinitions>        <TextBlock GrID.Column="0" GrID.Row="0"                   x:name="weekday" HorizontalAlignment="Center"                   VerticalAlignment="top" Text="星期八"                   FontSize="24"/>        <TextBlock GrID.Column="0" GrID.Row="1"                   x:name="temp" HorizontalAlignment="Center"                   VerticalAlignment="top" FontSize="24"                   Text="7℃~29℃"/>        <Image x:name="Wimg" GrID.Column="1" GrID.Row="0"               GrID.rowspan="2" VerticalAlignment="Center"               HorizontalAlignment="left"/>

现在在左边的设计框显示的是这样的：

我们需要从外部给这个UserControl的Textblock或者Image的属性赋值，那么需要给ForecastTemplate这个类添加成员变量来控制Textblock或者Image的属性。那么。转到ForecastTemplate.xaml.cs页面。也就是在ForecastTemplate.xaml的代码页面，右键，查看代码。就看到了。

在ForecastTemplate.xaml.cs页面，在ForecastTemplate类中添加如下的成员。

//定义Image的Source属性。这样这个用户控件就能从外面访问到这个Image控件的Source属性了        private string _imageUri;        public string ImageUri        {            get            {                return _imageUri;            }            set            {                _imageUri = value;                BitmAPImage bmp = new BitmAPImage(new Uri(value,UriKind.relative));                Wimg.source = bmp;            }        }        //定义了TextBlock的Text属性。外头就可以给这个Text属性赋值了        private string _weekday;        public string Weekday        {            get            {                return _weekday;            }            set            {                _weekday = value; ;                weekday.Text = value;            }        }        private string _temp;        public string Temp        {            get            {                return _temp;            }            set            {                _temp = value;                temp.Text = value;            }        }

是否发现在这显示红色波浪线？

因为没有引入命名空间。在BitmAPImage上右键。解析，选择第一个Using。这样就引入了命名空间。这里提这个主要是给新手提个醒，遇到错误不要着急。先看清楚是什么状况。解决就好了。

现在转到MainPage.xaml页面。先添加命名空间。

xmlns:my="clr-namespace:WeatherForecast"

贴图展示命名空间添加位置。

这个命名空间namespace：后面跟的是当前的工程名。需要访问当前工程空间的页面都要添加。

现在，在代码页面尝试添加Usercontrol吧。

正确添加命名空间。智能提示就能访问到Usercontrol。

现在添加一些图片资源文件到工程。我这工程添加的图片资源可以到这下载：http://dl.dbank.com/c0w9dhbbk1

直接右键解压到Images文件夹。然后复制整个Images文件夹到工程里，具体 *** 作：复制文件夹，然后解决方案资源管理器右键WeatherForecast这个工程，选择粘贴就完成了引入资源到工程。

现在到MainPage.xaml中添加代码：

name为contentPanel的grID添加代码。

<my:ForeCastTemplate Temp="7℃~11℃" Weekday="星期天"                WIDth="300" Height="200"                   ImageUri="/WeatherForecast;component/Images/sunday.jpg" />

一开始ForecastTemplate下面会显示蓝色波浪线，而且在设计框里也不显示控件。运行一次就好。运行一次后，在设计框里显示如下：

好了，这一节就到这吧。省得篇幅太长了。这节主要介绍了UserControl的运用。如有问题可以直接留言。

这节工程代码下载：

http://dl.dbank.com/c0awblgtqp

总结

以上是内存溢出为你收集整理的<WP7>（二）手把手教你写天气预报程序：UserControl的运用全部内容，希望文章能够帮你解决<WP7>（二）手把手教你写天气预报程序：UserControl的运用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。