一步一步学Silverlight 2系列(1):创建一个基本的Silverlight应用

概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列第一篇创建一个基本的Silverlight 2应用,不能免俗,从最简单的Hello Word 开始。

建立项目

安装完Silverlight 2 Beta 1之后打开VS2008,打开新建项目对话框,可以看到Silverlight Application项目模板。

TerryLee_Silverlight2_0001

Silverlight应用不能够独立运行,之后弹出的对话框中可供我们选择创建一个ASP.NET Web Site或者Web Application Project用来托管Silverlight应用程序。

TerryLee_Silverlight2_0002

这里我们选择创建一个Web Application Project,创建完成后的项目结构如下所示:

TerryLee_Silverlight2_0003

理解.xap文件

在建立一个Silverlight应用程序后,我们什么都不做,直接编译一下整个解决方案,可以看到在资源管理器中多出了一个ClientBin的文件夹,并在下面添加了一个TerryLee.SilverlightDemo2.xap的文件。

TerryLee_Silverlight2_0004

该文件是一个标准的.NET程序集,在编译的时候所有的XAML标识和资源文件如图片等都会包含在里面,采用了标准的Zip压缩算法,以减少客户端下载的文件体积。拷贝一份该文件,并且修改后缀名.xap为.zip,并且解压缩,可以看到里面包含了一些dll文件和一个AppManifest.xaml:

TerryLee_Silverlight2_0005

再打开TerryLee.SilverlightDemo2TestPage.aspx文件,在页面的顶部引入了System.Web.Silverlight程序集,支持<asp:Silverlight/>控件:

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<asp:Silverlight/>控件的声明如下,其中属性Source属性指定了刚才编译生成的.xap文件的路径:

<asp:Silverlight ID="Xaml1" runat="server" 
        Source="~/ClientBin/TerryLee.SilverlightDemo2.xap" 
        Version="2.0" Width="100%" Height="100%" />

创建一个Hello Word程序

现在我们创建一个简单的Hello Word Silverlight程序,使用如下XAML创建一个简单的按钮:

TerryLee_Silverlight2_0006

运行后效果如下:

TerryLee_Silverlight2_0007

为按钮添加Click事件,在XAML编辑器中输入事件名称Click之后,再按Tab键将会使用默认的命名方法生成事件处理方法:

TerryLee_Silverlight2_0008

打开Page.xaml.cs文件后,可以看到已经生成了对应的事件处理方法,现在就可以用熟悉的C#来编写处理程序了,如单击按钮时我们改变按钮的背景色和文字:

private void myButton_Click(object sender, RoutedEventArgs e)
{
    this.myButton.Content = "Clicked!";
    this.myButton.Background = new SolidColorBrush(Colors.Red);
}

再运行上面的程序并单击按钮,按钮的文字及背景色发生了变化:

TerryLee_Silverlight2_0009

结束语

本篇文章是使用Visual Studio 2008开发Silverlight 2应用程序的一个入门,相信大家都已经看过ScottGu的文章已经有所了解。但是为了整个系列完整起见,还是做了一下重复的劳动。

下一篇:一步一步学Silverlight 2系列(2):基本控件

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
Tag标签: Silverlight,XAML
posted @ 2008-03-07 21:20 TerryLee 阅读(21499) 评论(98)  编辑 收藏 网摘 所属分类: [03]  银光点亮世界

  回复  引用  查看    
#1楼 2008-03-07 22:29 | 李永京      
坐上沙发,学习。这个Silverlight 2.0 bate1 的控件好像不可以直接拖到xaml页面上,好像也不可以设置属性吧?哎~~~~~~~~~~
  回复  引用  查看    
#2楼 [楼主]2008-03-07 22:34 | TerryLee      
@李永京
直接拖拽控件现在还不支持,但是你可以拖拽到XAML文件中,属性现在也不可以设置:)
  回复  引用  查看    
#3楼 2008-03-07 23:08 | overred      
这系列又开始了。。。。。。。。。。。。
  回复  引用  查看    
#4楼 [楼主]2008-03-07 23:20 | TerryLee      
@overred
呵呵,Silverlight 2有必要学啊:)
  回复  引用  查看    
#5楼 2008-03-08 13:00 | Dove.Net      
好快的速度....
  回复  引用  查看    
#6楼 [楼主]2008-03-08 13:11 | TerryLee      
@Dove.Net
这个周末有点空,就好好学习一下Silverlight 2了:)
  回复  引用  查看    
#7楼 2008-03-08 13:20 | 李永京      
问一下:选择创建一个ASP.NET Web Site或者Web Application Project用来托管Silverlight应用程序。你为什么选择创建Web Application Project呢?不选择ASP.NET Web Site呢?这个没有designer.cs文件和其它的obj等文件夹感觉清爽一点。它们有什么不同啊?
  回复  引用  查看    
#8楼 [楼主]2008-03-08 13:28 | TerryLee      
@李永京
Web Site是非常讨厌的一个东西,但它却是VS2005推荐的方式,可是在VS2005 SP1中又加入了Web Application。我个人还是习惯于用Web Application。
  回复  引用  查看    
#9楼 2008-03-09 02:13 | 守護~︶箬      
天天学习了!!
  回复  引用  查看    
#10楼 2008-03-09 10:50 | 生鱼片      
看不见自动生成代码的Web Site我也觉得不舒服
  回复  引用  查看    
#11楼 [楼主]2008-03-09 12:22 | TerryLee      
@守護~︶箬
:)
  回复  引用  查看    
#12楼 [楼主]2008-03-09 12:23 | TerryLee      
@生鱼片
是啊。。。
  回复  引用    
#13楼 2008-03-12 02:45 | 飞雪尔 [未注册用户]
我只想说,lz的vista遇到了和我一样的问题,就是文件夹视图混乱,我现在vista SP1下这个问题还是没有解决,像lz的bin目录都是纯文件,可视图确是照片视图,还有分级的一栏,汗。

我的vista也是,明明我调整为全部项目了,搞不好下次又会乱掉,有些变成音乐,有些变成图片,好烦啊。
  回复  引用  查看    
#14楼 [楼主]2008-03-12 08:28 | TerryLee      
@飞雪尔
不怎么影响使用吧?:)
  回复  引用    
#15楼 2008-03-12 11:58 | 飞雪尔 [未注册用户]
@Terry
影响使用的呀,比如我的文档文件夹自动变成照片视图,结果就会没有“修改时间”一栏,没办法方便的排序。好啰嗦啊。
  回复  引用    
#16楼 2008-03-13 19:40 | ShowJay [未注册用户]
BETA1 装的 好慢阿 ...
  回复  引用  查看    
#17楼 [楼主]2008-03-13 19:44 | TerryLee      
@ShowJay
呵呵,还可以吧
  回复  引用    
#18楼 2008-03-18 09:56 | +Trevio [未注册用户]
为什么我安装SILVERLIGHT后,打开VS2008还是没有SILVERLIGHT模板呢?
  回复  引用  查看    
#20楼 [楼主]2008-03-18 18:41 | TerryLee      
@+Trevio
嗯,下载冯岩给出的链接之后,再安装就没有问题了
  回复  引用    
#21楼 2008-03-19 09:24 | +Trevio [未注册用户]
--引用--------------------------------------------------
冯岩: @+Trevio
请到下面去下载!安装后就会有的!
<a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=e0bae58e-9c0b-4090-a1db-f134d9f095fd&amp;amp;amp;DisplayLang=en&amp;displaylang=en" target="_new">http://www.microsoft.com/downloads/details.aspx?FamilyID=e0bae58e-9c0b-4090-a1db-f134d9f095fd&amp;amp;amp;DisplayLang=en&amp;displaylang=en</a>
--------------------------------------------------------
--引用--------------------------------------------------
TerryLee: @+Trevio
嗯,下载冯岩给出的链接之后,再安装就没有问题了
--------------------------------------------------------


谢谢!!
  回复  引用  查看    
#22楼 2008-03-20 09:36 | Sam Xie      
@Terry
现在 vs2008 与 sliverlight 已经集成了, 在 web application 中会有多个 page, silverlight 里会有多个 xaml 文件, silverlight application 编译后生成的是 xap 格式文件, 请问在不同的 webpage 里如何运用不同的 xaml?
谢谢
  回复  引用  查看    
#23楼 [楼主]2008-03-20 10:48 | TerryLee      
@Sam Xie
现在可以使用UserControl,如果要在多个页面的话,可能需要建立多个Silverlight项目,以便生成不同的xap文件:)
  回复  引用    
#24楼 2008-03-22 19:11 | 关注silverlight [未注册用户]
@ Terry
看了上面的回复, 生成不同的 xap, 这没错, 如果后一个 silverlight 需要用到前一个 silverlight 的数据, 怎么传递呢?

谢谢
  回复  引用  查看    
#25楼 [楼主]2008-03-22 21:32 | TerryLee      
@关注silverlight
没明白你要用前一个“Silverliht”的什么数据?Silverlight是一个客户端技术,数据只能通过Web Service等方式来获取
  回复  引用    
#26楼 2008-03-23 11:15 | 332 [未注册用户]
新建一个web application中的App.xaml是干什么用的啊
同时请教另外一个问题:我如何通过坐标来确定控件的位置?
谢谢!!!!
  回复  引用    
#27楼 2008-03-24 13:40 | jazz [未注册用户]
没有学习过sliverlight,请问这只能在vs2008里面运行吗?我现在还在用vs2005,可以安装吗?安装完会出现相应的模版吗?
  回复  引用  查看    
#28楼 [楼主]2008-03-24 21:22 | TerryLee      
@332
往后面看吧,也许看了后面几篇文章你就找到答案了!
  回复  引用  查看    
#29楼 [楼主]2008-03-24 21:22 | TerryLee      
@jazz
只能在VS2008下
  回复  引用    
#30楼 2008-03-28 16:49 | 隐姓埋名! [未注册用户]
很好 很强大~
  回复  引用  查看    
#31楼 2008-04-02 10:55 | david_qie      
你好!急找你
qq:81471528
MSN:qiehuaiyan@163.com
请教一个问题,我是按照搂主的方法来做的。后来运行程序,按F5,结果就崩掉了。断在了 Page.xaml.cs文件中的 InitializeComponent();这句。弹出一个错误框。信息为:

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.dll

Additional information: System.Exception: 致命的なエラーです。 (Exception from HRESULT: 0x8000FFFF (E_UNEXPECTED))
場所 MS.Internal.XcpImports.ConvertStringToTypedCValue(IntPtr pContext, UInt32 cClrTypeName, String clrTypeName, UInt32 cValue, String value, CValue& outVal, Int32& typeIndex)
場所 MS.Internal.SilverlightTypeConverter.ConvertFrom(Object value) [Line: 252683839 Position: 255]

如果是按ctlr+F5运行的话,结果是网页里面无任何内容,就是一片空白。不知道为啥,请楼主指教。
  回复  引用    
#33楼 2008-04-06 15:05 | 樱山飞雪 [未注册用户]
支持lz 按照lz的教程操作的 实现了最终的按钮单击 3Q~~
  回复  引用    
#34楼 2008-04-11 15:43 | 按时电风扇电风扇 [未注册用户]
可以把列子的连接放出来吗
让我真实的体会体会
呵呵

  回复  引用  查看    
#35楼 2008-04-19 09:19 | chy710      
在xaml里,不支持如html里选择一对标记变成粗体显示?
  回复  引用  查看    
#36楼 2008-04-20 18:22 | Henllyee.Cui      
我按照楼主的做出来,运行时,页面出现前台脚本错误,而且看不到效果
  回复  引用  查看    
#37楼 2008-04-20 18:47 | Henllyee.Cui      
前台脚本报错为:Error:Sys.InvalidOperationException: Invalid XAML for control 'Xaml1'. [ClientBin/HelloWorld.xap] (line 1, col 3): illegal xml character
  回复  引用    
#38楼 2008-04-22 14:26 | fanpan [未注册用户]
按照楼主的步骤做的,但是按F5运行,弹出下面的错误框:

在 System.Windows.Markup.XamlParseException 中第一次偶然出现的“System.Windows.dll”类型的异常

其他信息: AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 7 Position: 37]

请问这是什么原因啊!
  回复  引用    
#39楼 2008-04-24 22:17 | xiazhaohua [未注册用户]
A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.dll

Additional information: AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 9 Position: 31]



我的出这个错误啊
  回复  引用    
#40楼 2008-05-08 16:22 | davidguoliu [未注册用户]
估计李会军也不能解决把,这么多人问他都不回答。
  回复  引用  查看    
#41楼 2008-05-09 15:40 | 猴哥      
我就加上了button这段代码,vs2008中的设计页面有按钮图像的,但是运行时在浏览器中就是一张空白页,没有任何东西,右键出现silverlight configuration 这是为什么啊!
  回复  引用    
#42楼 2008-05-12 14:19 | thy [未注册用户]
求救:
第二步:选择创建一个ASP.NET Web Site或者Web Application Project用来托管Silverlight应用程序。
我安装的是VS.net 2008中文版,且安装了silverlight1.0 silverlight2(beta1)版,但我建立silverlight项目时,没有弹出这个窗口来进行选择(所以根本不能做这个实例),而是直接建了个silverlight的项目(这个项目是没法添加*.aspx文件的),请问是怎么回事?
  回复  引用    
#43楼 2008-05-12 14:21 | thy [未注册用户]
求救:
---
Silverlight应用不能够独立运行,之后弹出的对话框中可供我们选择创建一个ASP.NET Web Site或者Web Application Project用来托管Silverlight应用程序。
---
我建立silverlight项目时,没有弹出这个窗口来进行选择,请问是怎么回事?
  回复  引用  查看    
#44楼 2008-05-18 10:35 | kkun      
已练习,感谢
  回复  引用  查看    
#45楼 2008-05-22 10:58 | Longkin      
silverlight 现在乱七八糟的版本,写文章的人也是乱七八糟的版本,
我昨天按照你的方法,装了一天,今天要写个图像展示的页面,正好可以用下
谁知道你那个简单的例子都没成功,页面就一个空白,页不报个错什么的,
小弟,跪求你知道一下,是不是安装的问题呢?
  回复  引用    
#46楼 2008-05-27 10:05 | E-WEN [未注册用户]
学习中...
  回复  引用    
#47楼 2008-06-06 13:45 | Jeky Zhang [未注册用户]
“运行后一片空白”的解决方案:

在Silverlight中需要使用xap、XAML文件类型,如果您想在IIS服务器上使用Silverlight程序,所以必须在IIS中注册xaml和xap的MIME文件类型。打开IIS->站点属性->HTTP头->MIME类型->新建:

扩展名: .xap
MIME类型:xapapplication/x-silverlight

扩展名: .xaml
  MIME类型:application/xaml+xml
  回复  引用    
#48楼 2008-06-13 23:11 | yw1984 [未注册用户]
我按照你说,刚开始创建个项目模板后运行没有出现bin,而是提示错误.
错误 1 当前上下文中不存在名称“InitializeComponent” E:\silverlight\SilverlightApplication1\SilverlightApplication1\App.xaml.cs 23 13 SilverlightApplication1
错误 2 当前上下文中不存在名称“InitializeComponent” E:\silverlight\SilverlightApplication1\SilverlightApplication1\Page.xaml.cs 18 13 SilverlightApplication1

  回复  引用  查看    
#49楼 2008-06-19 22:16 | Goumh      
学习。。。。。
  回复  引用  查看    
#50楼 2008-07-04 11:50 | 狼Robot      
开始向李老师学习Silverlight,哈哈.
  回复  引用    
#51楼 2008-07-09 15:11 | Ivy0 [未注册用户]
同48楼一样的问题
错误 1 当前上下文中不存在名称“InitializeComponent” E:\silverlight\SilverlightApplication1\SilverlightApplication1\App.xaml.cs 23 13 SilverlightApplication1
错误 2 当前上下文中不存在名称“InitializeComponent” E:\silverlight\SilverlightApplication1\SilverlightApplication1\Page.xaml.cs 18 13 SilverlightApplication1

  回复  引用    
#52楼 2008-07-09 16:21 | Ivy0 [未注册用户]
解决了。应该是SDK的版本问题,下载一个beta2的版本就可以了
  回复  引用    
#53楼 2008-07-29 15:57 | tulip [未注册用户]
我是只用expression blend2.5做UI,后台我不会,请问我该学哪些东西呢,那我做出来的东西是不是只有懂silverlight的人才能接着开发程序代码?谢谢,我刚刚了解silverlight。请多谅解!
  回复  引用  查看    
#54楼 [楼主]2008-07-30 00:57 | TerryLee      
@tulip
这个答案我想不用回答吧,不懂Silverlight的人怎么开发程序呢?呵呵

如果做UI,还需要对控件的机制做一些了解,如Style、ControlTemplate、VisualStateManager等。
  回复  引用  查看    
#55楼 2008-07-30 09:20 | 麒麟.NET      
这个……不是Hello World啊……-_-|||
  回复  引用  查看    
#56楼 [楼主]2008-07-30 09:58 | TerryLee      
@麒麟.NET
o(∩_∩)o...
  回复  引用    
#57楼 2008-07-30 13:56 | tulip [未注册用户]
我装了silverlight2beta2了,VS2008也装了,在VS里新建project的时候project type 里怎么没有silverlight?请指教,非常感谢
  回复  引用  查看    
#58楼 [楼主]2008-07-31 01:12 | TerryLee      
@tulip
很难说是什么问题,卸载重装一次试试看吧:)
  回复  引用    
#59楼 2008-07-31 09:23 | tulip [未注册用户]
我在网上查了查说没装alpha for silverlight2,装上后倒是在project type里有silverlight工程了,但还是不能建工程,报错,那我卸载重装一下在试试看,谢谢terry
  回复  引用  查看    
#60楼 [楼主]2008-08-01 00:51 | TerryLee      
@tulip
不用客气,如果还是不行,把错误信息贴上来,大家一起帮你分析一下:)
  回复  引用    
#61楼 2008-08-01 09:51 | tulip [未注册用户]
恩,好的,一定少不了麻烦你们!
  回复  引用  查看    
#62楼 [楼主]2008-08-01 10:10 | TerryLee      
@tulip
:)
  回复  引用    
#63楼 2008-08-01 10:36 | tulip [未注册用户]
第一个弹出框报的错:
The file TestPage.html.js could not be found within the project templates.contining to run, but the resulting project may not build properly

第二个弹出框报的错:
The project file'C:\Documents and settings\tulipwang.BEIJING\Local setting \temp\tiopagm5.qac\Temp\SilverlightProject10.vbproj'can not be opened.
The project type is not supported by this installation。
还有杀毒软件AVG还报有威胁病毒好像叫hidden Extension .js。
郁闷呀,还望老师指点。。。
是不是我该把VS卸载以后连C盘programfiles里官运VS的所有文件都删掉再重装一次
  回复  引用    
#64楼 2008-08-01 11:30 | tulip [未注册用户]
terry,麻烦你告诉我我现在要学liverlight,需要装那几个软件,我不做后台,制作UI,动画和部分的事件
  回复  引用  查看    
#65楼 [楼主]2008-08-01 11:48 | TerryLee      
@tulip
如果只做UI,安装Expression Blend 2.5就行了。
  回复  引用    
#66楼 2008-08-01 12:25 | tulip [未注册用户]
但是js事件脚本没办法写呀

  回复  引用  查看    
#67楼 [楼主]2008-08-01 13:26 | TerryLee      
@tulip
用Silverlight 2还需要写JS事件脚本吗?不解
  回复  引用    
#68楼 2008-08-04 15:32 | tulip [未注册用户]
那像一些鼠标事件怎么控制呢?
  回复  引用  查看    
#69楼 [楼主]2008-08-06 13:28 | TerryLee      
  回复  引用    
#70楼 2008-08-09 01:21 | www_scott [未注册用户]
Error 1 Could not load file or assembly 'System.Core, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e' or one of its dependencies. 系统找不到指定的文件。怎么解决?


  回复  引用    
#71楼 2008-08-09 01:32 | www_scott [未注册用户]
解决了,sdk版本的问题
  回复  引用  查看    
#72楼 [楼主]2008-08-13 21:45 | TerryLee      
@www_scott
不好意思,回复的晚了。
  回复  引用    
#73楼 2008-08-26 14:59 | happygrass [未注册用户]
N个月前安装了SILVERLIGHT,安装的时候碰到了很多问题, 照李老师的做了几个例子,项目忙,没有接着学习,现在又回头来学习~~~~~~~李老师,要多多指教~
  回复  引用  查看    
#74楼 [楼主]2008-08-27 09:49 | TerryLee      
@happygrass
不用客气,随时交流。。。
  回复  引用  查看    
#75楼 2008-09-23 17:13 | rockey      
装了一天终于把silverlight装的跟LZ的一样了。。不过我装的是中文版的。哈哈。 以后天天来学习,不会的地方LZ要多多帮忙啊
  回复  引用    
#76楼 2008-10-14 23:36 | KennyY [未注册用户]
请问如何不用装VS2008等工具,直接用命令行编译?还有必须要用ASP.NET?
  回复  引用    
#77楼 2008-10-21 14:31 | liaohenchen [未注册用户]
Lee,您好,请问一下,我今天刚装上了VS2008,silverlight也是最新的2.0版本,但我建立一个新的silverlight项目的时候,没有让我选择托管Silverlight应用程序的弹出框,出来之后有一些Js文件,这个是不是主要是用JS开发的呢?还有就是如果我要转换成像你这样的开发,我该怎么做?(因为觉得你的例子写的很好,所以。。)

麻烦了。。
  回复  引用    
#78楼 2008-10-22 09:14 | liaohenchen [未注册用户]
问题解决了
是由于安装的东东不对。。
开始学习了。。
还是感谢。。。
  回复  引用