silverlight   发布时间:2022-05-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了<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    具体如下图:

<WP7>(二)手把手教你写天气预报程序:UserControl的运用



然后在这个弹窗,选择OS 7.1

<WP7>(二)手把手教你写天气预报程序:UserControl的运用


点击OK


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

运行方法:先看这

<WP7>(二)手把手教你写天气预报程序:UserControl的运用

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


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

<WP7>(二)手把手教你写天气预报程序:UserControl的运用


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

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


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

<WP7>(二)手把手教你写天气预报程序:UserControl的运用



在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"/>


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

<WP7>(二)手把手教你写天气预报程序:UserControl的运用



我们需要从外部给这个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;
            }
        }

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

<WP7>(二)手把手教你写天气预报程序:UserControl的运用

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


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

xmlns:my="clr-namespace:WeatherForecast"

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

<WP7>(二)手把手教你写天气预报程序:UserControl的运用

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

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

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

<WP7>(二)手把手教你写天气预报程序: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下面会显示蓝色波浪线,而且在设计框里也不显示控件。运行一次就好。运行一次后,在设计框里显示如下:

<WP7>(二)手把手教你写天气预报程序:UserControl的运用


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

这节工程代码下载:

http://dl.dbank.com/c0awblgtqp

大佬总结

以上是大佬教程为你收集整理的<WP7>(二)手把手教你写天气预报程序:UserControl的运用全部内容,希望文章能够帮你解决<WP7>(二)手把手教你写天气预报程序:UserControl的运用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。