Silverlight简介.ppt

《Silverlight简介.ppt》由会员分享，可在线阅读，更多相关《Silverlight简介.ppt（48页珍藏版）》请在三一办公上搜索。

1、Silverlight简介,第一章：Silverlight简介,1.简单了解Silverlight的开发背景。2.什么是Silverlight?3.Silverlight的特点？4.Silverlight技术开发平台 5.Silverlight项目的文件组成及运行机理 6.创建第一个Silverlight的简单应用程序。7.Blend工具简介,本章学习目标：,随着Web 的深入发展，用户体验在Web项目中的地位变得越来越重要。回顾浏览器的发展史，最初的浏览器还仅限于提供简单的文档显示和超链接功能，随着时间的推移，Internet发生了巨大的变化。Internet不再只是大学里的研究课题，而是发

2、展为被普通大众所使用。虽然在研究人员的眼中，Web用户界面(UI,User Interface)是完美无缺的，但是一旦扩大到大众市场成为商业产品时，却发现UI的发展已经远远滞后，不能满足广大用户对界面高质量和易操作性的需求。,一、Silverlight开发背景简介,为了让用户通过浏览器访问Internet资源时具有更佳的用户体验，各大厂商纷纷提供了多种解决方案，例如ActiveX控件，Java Applets、Flash插件，以及能够局部更新Web页面的AJAX技术。然而，无论是浏览器插件还是AJAX，都存在自身的局限性。就插件的工作方式而言，插件实际上是客户端应用程序，它的运行依赖于操作系统

3、和浏览器的支持，这在一定的程度上损失了部分用户；同时，基于HTML文档对象模型的AJAX技术更是对图形，动画，视音频等多媒体功能存在先天不足。,思考：什么是桌面应用程序和网络应用程序？思考：就你目前的理解来讲，什么是较佳的网络应用程序用户体验呢？思考：桌面应用程序和网络应用程序之间的优缺点？,桌面应用程序：需要在本地计算机上安装引用程序的程序文件；（C/S）网络应用程序：无需在本地计算机上安装引用程序的程序文件；(B/S)针对这些问题，Microsoft 启动了Web用户体验战略，主要目的是使Web应用程序既具有网络程序的灵活性，又能够提供接近桌面应用程序的用户体验。基于此原因，Silverl

4、ight应运而生。,Microsoft Silverlight是微软所发展的 Web 前端应用程序开发解决方案，是微软丰富型互联网应用程序（Rich Internet Application）策略的主要应用程序开发平台之一，以浏览器的外挂组件方式，提供 Web 应用程序中多媒体（含影音流与音效流）与高度交互性前端应用程序的解决方案，同时它也是微软 UX（用户经验）策略中的一环，也是微软试图将美术设计和程序开发人员的工作明确切分与协同合作发展应用程序的尝试之一。,二、什么是Silverlight?,Microsoft Silverlight是一款跨浏览器，跨平台的插件，能够超越传统HTML文档的

5、限制，为所有Internet用户提供更丰富的图形和交互媒体体验，从而使用户体验不再成为Web应用程序推广的瓶颈。终端用户只需从官方网站上下载一个轻量级安装包，并将其部署到本地计算机上，浏览器就能够处理Silverlight应用程序。,一种跨浏览器、跨平台的技术。SilverLight在所有的流行浏览器(任何平台)运行一致。设计和开发应用程序不需要担心你的用户是什么平台什么浏览器。无论在哪运行，都能提供一致的用户体验。需要下载很小的文件来安装以支持，只需几秒。,三、Silverlight的特点,它的视频和音频流，视频质量无论从移动设备还是桌面浏览器都是720p HDTV video模式。用户可在

6、浏览器中直接对其进行控制，可以拖动、翻转、放大的图片。它读取数据并且更新外观，但不会通过刷新整体页面来打断用户操作。,可以使用已经具有的技能和熟悉的工具来创建基于Silverlight的应用程序，在Web页面中，既可以使用HTML，也可以使用Silverlight的WPF元素，和HTML一样，在Web应用程序中XAML同样可以使用声明的标记来创建用户界面，不同的是，XAML提供了更强大的元素。,对于开发人员而言：,设计人员可以轻松的拥有Expression Studio进行设计、编译和发布Silverlight应用程序。Expression Studio有创建图像、媒体，设计交互和产生体验需要

7、的一切能力。Expression Blend能够生成XAML进行输出，这样使用Visual Studio的程序员和使用Expression Blend的设计人员可以共享同样的文件。,与现存应用程序的集成。SilverLight可以与已经存在的JavaScript和ASP.NET AJAX代码无缝集成，不会使已经创建的功能缺失。可访问.NET Framework编程模型和相关工具。可以使用托管的C#和VB这样的动态语言来创建基于SilverLight的应用程序。可以使用Visual Studio这样的开发工具来创建基于SilverLight的应用程序。,Silverlight项目隶属于.NET平

8、台下的项目类型之一。所以其依附的开发平台还是微软推出的Visual Studio 2008，而我们都知道，Web应用程序的核心就是展现给用户的界面UI(User Interface)，所以，一般情况下，对于我们的网络应用程序来讲都会有一定的辅助页面设计工具，而Silverlight项目的辅助设计工具是Expression Blend。,四、Silverlight技术开发平台,在默认情况下，新建的Silverlight应用程序包括Page.xaml和App.xaml两个文件，以及相应的代码文件Page.xaml.cs和App.xaml.cs。XAML类型的文件是基于XML格式的，用于定义Silv

9、erlight应用程序界面的文件，是Silverlight 应用程序的核心之一。App.xaml主要用于定义供整个应用程序使用的各种资源，如笔刷，样式等。其对应的代码文件App.xaml.cs用于处理应用程序级别的事件，如Application_Startup等。,五、Silverlight项目的文件组成,Page.xaml是默认的主页面，在应用程序启动时即进行初始化，在其中可以使用各种UI组建定义界面，并且在代码文件Page.xaml.cs中处理事件。当编译Silverlight应用程序时，VS会将整个工程编译成一个标准的.NET组件，并将其他用到的资源封装至一个.xap文件中。.xap文件

10、不能单独存在于浏览器中，必须依托于网页。,4.1 使用Visual Studio创建Silverlight应用程序 4.1.1双击桌面上的Microsoft Visual Studio 2008安装快捷方式，以进入Visual Studio 2008环境首页，如下图（1-1）：,六、熟悉Silverlight的开发环境并创建第一个Silverlight应用程序,C#是一种最新的、面向对象的编程语言。它使得程序员可以快速地编写各种基于Microsoft.NET平台的应用程序，Microsoft.NET提供了一系列的工具和服务来最大程度地开发利用计算与通讯领域。,4.1.2右击菜单栏中的【文件】选

11、项-【新建】-【项目】，如下图（1-2）所示：,项目类型选择Silverlight出现如下图（1-3）所示：,4.1.3我们注意看，在“项目类型”底下我们选择【Visual C#】-【Silverlight】,在右侧的模板窗格中我们选择【Silverlight应用程序】，如下图（1-4）所示：,4.1.4在底栏的名称文本框中输入这个项目的名称，在位置文本框中确定项目保存的位置，勾选“创建解决方案的目录”，完成上面的操作之后点击【确定】按钮，此时会打开“添加Silverlight应用程序”对话框，让我们选择在HTML网页中如何承载所欲创建的Silverlight应用程序，这里请执行下列操作：,（

12、1）选择“向解决方案中添加新ASP.NET WEB项目以承载Silverlight”单选按钮（2）在选项组中保持既有的设置。如下图（1-5）所示：,完成上述操作之后，请单击“确定”按钮。这样我们就成功的创建了我们的第一个Silverlight应用程序，如下图（1-6）所示：,现在默认创建的Page.xaml已经在编辑器中打开。在编辑器中央处，有个深色背景与白色矩形的区域称为“预览”窗口，它会显示XAML标记实际运行时的结果。在此提醒大家，“预览”窗口是只读的，它不像ASP.NET的“设计“视图，不具备从工具箱拖放控件的功能。如果要在设计界面上添加Silverlight控件，可直接将控件从工具箱

13、拖放到XAML视图。,位于“预览“窗口之下的是XAML视图，您可以手动添加代码，或从工具箱拖放控件到适当的位置，来进行页面布局与设计。当您在XAML视图中添加XAML标记或添加工具箱的控件时，结果都会呈现在“预览”窗口中。在某些时候（如生成项目之后），您可能需要刷新“预览”窗口才能看到最后的结果。值得一提的是，当您切换至Xaml视图时，会在XAML程序代码错误处出现波浪线，让您更容易了解何处有错误。,附注：在图1-5中，我们可以看到“添加Silverligt应用程序”对话框中提供了下列3种承载Silverlight应用程序的选项。1.向解决方案添加新ASP.NET Web项目以承载Silver

14、light.这是默认选项,它会创建一个合适的ASP.NET网站或Web应用程序项目。在其中会各有一个.aspx和.html网页。以便承载并执行您的Silverlight应用程序。如果您创建新的Silverlight应用程序，那么采用这个选项确实十分简单。因为它会自动处理页面中用来承载Silverlight控件的相关程序代码，让我们可以专注于开发Silverlight应用程序本身。,2.在生成时自动生成测试页以承载Silverlight 如果您希望全新开发Silverlight应用程序本身，而不需要去管另一个额外的Web应用程序项目，请使用这个选项，因为每当您尝试进行调试或测试Silverlig

15、ht应用程序时，会在运行时创建一个新的HTML网页。如此一来，您只需将项目中最后完成的相关文件部署到Web服务器上即可在网页中执行。选择这个选项之后，并不需要额外设置任何选项。,3.将此Silverlight控件链接到现有网站 在创建一个新的Web应用程序项目时无法选择这个选项，只有在为一个既有的项目或网站添加Silverlight应用程序时才能使用该选项。欲达此目的，请先打开一个既有的项目或网站，然后在【文件】菜单中选择【新建项目】命令，接着如下图所示，在其中进行相关设置。请特别注意，要选择“解决方案”下拉列表框中的“添入解决方案”选项。完成操作之后，请单击“确定”按钮，如图1-7所示：,在

16、选择这个选项时，如果有多个网站，那么我们还必须指定用来承载Silverlight应用程序的网站，然后设置是否要选择“添加引用该应用程序的测试页”。“使其成为开始页”与“启用Silverlight调试”等复选框。,Blend是一个界面设计软件，其本质为XAML可视化编辑器，可以很直观的为Silverlight应用程序设计出美观实用的用户界面，包括对象的绘制、布局制作动画等功能，能够更容易地提供出色的用户体验度和满意度。Blend操作起来与常见的绘图软件很相似，但也有很多独特的地方，使用起来也非常简单。,七、Blend工具简介,使用Blend创建一个Silverlight的应用程序项目1.【开始】

17、菜单中打开Expression Blend2主界面,2.选择【新建项目】，弹出此窗口,3.选择【Silverlight2应用程序】，新建一个Silverlight2应用程序项目，主界面如下：,至此，一个简单的Silverlight应用程序创建完毕。（示例演示一个Hello World的应用程序创建）Blend工作环境介绍 1.工具箱：我们可以使用工具箱建立或操作应用程序中的对象。,2.控件库：这块比较重要，其中包含了Silverlight内建的系统控件，以及用户自定义的控件。,3.工作区：,工作区可以简单的分为三块：a.文件标签，显示已打开的文件与当前选中的文件。b.视图切换区，可选择当前视图

18、模式设计视图、XAML视图或两者兼有。c.属性区，设置当前工作区的网格、对齐，以及显示比例等属性。,4.对象与时间轴面板：在使用对象面板时，要注意激活对象与选中对象的区别。激活对象会有一个黄色的框，而当前选中对象则为高亮显示。在绘图或添加对象前需要注意先激活一个布局对象，使图形或对象添加在其内部。,另一部分是时间轴面板，可以使用它为对象添加以时间轴为基础的动画。,5.项目选项卡：文件面板中显示了当前打开项目中所有包含或与项目有关的文件。,6.属性选项卡：,7.资源选项卡：资源选项卡中列出了当前项目中所有的资源与样式及相关文件。,8.编译结果面板：编译结果面板可以为开发者提供编译报告，输出结果等

19、各种实用信息。,9.设置Blend工作环境：菜单栏-【工具】-【选项】,10.Blend和Visual Studio的关系：两者是一体的，协同工作。一般情况下，我们在Visual Studio中创建一个Silverlight应用程序，然后在Blend中编辑我们的页面（当然还包括事件的定义），页面编辑完成之后，再回到我们的Visual Studio开发环境中进行后台服务器端的逻辑处理。,本章小结,本章首先介绍了Silverlight的开发背景，又讲了什么是Silverlight和Silverlight的特点，然后简单介绍了Silverlight开发平台及项目文件构成，还对Blend工具做了简单的介绍，并且我们还做了第一个Silverlight应用程序。至此，我相信大家对Silverlight应该有了一个初步的认识和了解。,