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

                那么，开始吧。首先确认安装了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    具体如下图：

 

然后在这个弹窗，选择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/c0wsbg3ju1

直接右键解压到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>（三）手把手教你写天气预报程序：运用WebClient获取天气和json数据解析