一步一步学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 on 2008-03-07 21:20 TerryLee 阅读(12541) 评论(59)  编辑 收藏 所属分类: Silverlight

评论

#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模板呢?   回复  引用    

#19楼  2008-03-18 14:30 冯岩      

@+Trevio
请到下面去下载!安装后就会有的!
http://www.microsoft.com/downloads/details.aspx?FamilyID=e0bae58e-9c0b-4090-a1db-f134d9f095fd&amp;amp;DisplayLang=en&displaylang=en   回复  引用  查看    

#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   回复  引用  查看    

#32楼  2008-04-02 15:44 80后的任务就是制造08后 [未注册用户]

请教一个问题,我是按照搂主的方法来做的。后来运行程序,按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的版本就可以了   回复  引用    


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-03-08 00:45 编辑过
 
另存  打印
 


导航

公告

  • 网名:TerryLee
  • 本名:李会军
  • 位置:中国北京 Ethos
  • 联系方式:
  • 访问我的个人主页

 MVP配置

 版权声明

  • 本站采用创作共用许可 署名,非商业

绿色通道

IT新闻

统计

与我联系

留言簿(322)

我的标签

随笔分类

随笔档案

个人站点

关注项目

好的网站

我的好友