在Silverlight中插入一张图片看似简单,但处理不当仍会出现很多问题。本文将从创建一个新工程开始讲起,介绍如何在Silverlight控件中插入一张图片,以及在此过程中可能会出现的问题及解决办法。
1. 首先新建一个Silverlight工程,取名"InsertPicture", File -> New Project... ,如图所示
2. 新建一个ASP.NET Web Site,取名"InsertPictureWebSite"(以下简称WebSite),将位置设为和InsertPicture同一个目录, File -> Add -> New Web Site...,如图所示
这里之所以要新建一个Web Site,是为了方便部署,Silverlight工程最终将编译成一个dll,所以部署该工程时,只需将Web Site下的所有文件拷到IIS目录下就可以了。
3. 给WebSite添加Silverlight链接
右键单击WebSite工程 -> Add Silverlight Link.. ->OK
删除WebSite工程中的Default.aspx,并将InsertPicture工程中"Silverlight.js"
和"TestPage.html"拖拽拷贝到WebSite下
4. 将WebSite设为启动工程
右键单击WebSite工程 -> Property Page ->在弹出的对话框中将"Specific page"设为"TestPage.html", 并将下方的Silverlight框打上钩
前面说了一大堆废话(主要为了避免下面会提到的几个错误),以下开始介绍如何插入图片。
5. 在VS中给InsertPicture工程添加图片,并新建文件夹“images”,将图片放入该文件夹中
Project -> Add Exsiting Item... -> 选择要插入的图片后确定。
6. 用Blend打开InsertPicture工程
右键单击InsertPicture中的"Page.xaml",->Open in Expression Blend...
7. 在Blend中双击所要添加的图片将图片插入到Page.xaml中的parentCanvas内,本文的图片是"logo.jpg"。
8. 回到Visual Studio中按F5,编译运行WebSite工程。此时会发现将出现IE弹出一个对话框报错。
Silverlight error message
Error Code: 2210
ErrorType: DownloadError
Message:AG_E_INVALID_ARGUMENT
该错误发生的原因是在Blend中插入图片时图片的有时图片的Source属性中的斜杠会写反。
错误:
9. 再次编译运行。此时发现IE还是弹出个对话框报错。但错误内容变了。
Silverlight error message
ErrorCode: 3002
ErrorType: ImageError
message: Ag_E_NOT_FOUND
该错误发生的原因是在WebSite中没有添加该图片。Silverlight中的所有位图都是作为外部资源链接来显示的,由于在InsertPicture工程中添加了图片,所以在开发的时候看到该图片,但在运行的时候,Silverlight工程被编译成了dll,此时需要将图片拷贝到WebSite下,让Silverlight能找到,才能将图片显示出来。
解决办法将InsertPicture工程下的images文件夹拖拽拷贝到WebSite工程下。
10. 再按F5编译运行,图片出现了。最终效果如下
1. 首先新建一个Silverlight工程,取名"InsertPicture", File -> New Project... ,如图所示
2. 新建一个ASP.NET Web Site,取名"InsertPictureWebSite"(以下简称WebSite),将位置设为和InsertPicture同一个目录, File -> Add -> New Web Site...,如图所示
这里之所以要新建一个Web Site,是为了方便部署,Silverlight工程最终将编译成一个dll,所以部署该工程时,只需将Web Site下的所有文件拷到IIS目录下就可以了。
3. 给WebSite添加Silverlight链接
右键单击WebSite工程 -> Add Silverlight Link.. ->OK
删除WebSite工程中的Default.aspx,并将InsertPicture工程中"Silverlight.js"
和"TestPage.html"拖拽拷贝到WebSite下
4. 将WebSite设为启动工程
右键单击WebSite工程 -> Property Page ->在弹出的对话框中将"Specific page"设为"TestPage.html", 并将下方的Silverlight框打上钩
前面说了一大堆废话(主要为了避免下面会提到的几个错误),以下开始介绍如何插入图片。
5. 在VS中给InsertPicture工程添加图片,并新建文件夹“images”,将图片放入该文件夹中
Project -> Add Exsiting Item... -> 选择要插入的图片后确定。
6. 用Blend打开InsertPicture工程
右键单击InsertPicture中的"Page.xaml",->Open in Expression Blend...
7. 在Blend中双击所要添加的图片将图片插入到Page.xaml中的parentCanvas内,本文的图片是"logo.jpg"。
8. 回到Visual Studio中按F5,编译运行WebSite工程。此时会发现将出现IE弹出一个对话框报错。
Silverlight error message
Error Code: 2210
ErrorType: DownloadError
Message:AG_E_INVALID_ARGUMENT
该错误发生的原因是在Blend中插入图片时图片的有时图片的Source属性中的斜杠会写反。
错误:
<Image Width="409.483" Height="164.024" Source="images/logo.jpg" Stretch="Fill" Canvas.Top="53" Canvas.Left="48"/>
正确:
<Image Width="409.483" Height="164.024" Source="images/logo.jpg" Stretch="Fill" Canvas.Top="53" Canvas.Left="48"/>
9. 再次编译运行。此时发现IE还是弹出个对话框报错。但错误内容变了。
Silverlight error message
ErrorCode: 3002
ErrorType: ImageError
message: Ag_E_NOT_FOUND
该错误发生的原因是在WebSite中没有添加该图片。Silverlight中的所有位图都是作为外部资源链接来显示的,由于在InsertPicture工程中添加了图片,所以在开发的时候看到该图片,但在运行的时候,Silverlight工程被编译成了dll,此时需要将图片拷贝到WebSite下,让Silverlight能找到,才能将图片显示出来。
解决办法将InsertPicture工程下的images文件夹拖拽拷贝到WebSite工程下。
10. 再按F5编译运行,图片出现了。最终效果如下