Silverlight简介.ppt

深蓝软件深蓝软件 Silverlight简介 第一章：Silverlight简介 深蓝软件深蓝软件 1.简单了解Silverlight的开发背景。 2.什么是Silverlight? 3.Silverlight的特点？ 4.Silverlight技术开发平台 5.Silverlight项目的文件组成及运行机理 6.创建第一个Silverlight的简单应用程序。 7.Blend工具简介 本章学习目标： 深蓝软件深蓝软件 随着Web 的深入发展，用户体验在Web项目 中的地位变得越来越重要。回顾浏览器的发展史 ，最初的浏览器还仅限于提供简单的文档显示和 超链接功能，随着时间的推移，Internet发生了巨 大的变化。Internet不再只是大学里的研究课题， 而是发展为被普通大众所使用。虽然在研究人员 的眼中，Web用户界面(UI,User Interface)是完美 无缺的，但是一旦扩大到大众市场成为商业产品 时，却发现UI的发展已经远远滞后，不能满足广 大用户对界面高质量和易操作性的需求。 一、Silverlight开发背景简介 深蓝软件深蓝软件 为了让用户通过浏览器访问Internet资源时具 有更佳的用户体验，各大厂商纷纷提供了多种解 决方案，例如ActiveX控件，Java Applets、Flash 插件，以及能够局部更新Web页面的AJAX技术。 然而，无论是浏览器插件还是AJAX，都存在自身 的局限性。就插件的工作方式而言，插件实际上 是客户端应用程序，它的运行依赖于操作系统和 浏览器的支持，这在一定的程度上损失了部分用 户；同时，基于HTML文档对象模型的AJAX技术 更是对图形，动画，视音频等多媒体功能存在先 天不足。 深蓝软件深蓝软件 n思考：什么是桌面应用程序和网络应用程 序？ n思考：就你目前的理解来讲，什么是较佳 的网络应用程序用户体验呢？ n思考：桌面应用程序和网络应用程序之间 的优缺点？ 深蓝软件深蓝软件 n桌面应用程序：需要在本地计算机上安装 引用程序的程序文件；（C/S） n网络应用程序：无需在本地计算机上安装 引用程序的程序文件；(B/S) n针对这些问题，Microsoft 启动了Web用户 体验战略，主要目的是使Web应用程序既 具有网络程序的灵活性，又能够提供接近 桌面应用程序的用户体验。基于此原因， Silverlight应运而生。 深蓝软件深蓝软件 n Microsoft Silverlight是微软所发展的 Web 前端应 用程序开发解决方案，是微软丰富型互联网应用 程序（Rich Internet Application）策略的主要应 用程序开发平台之一，以浏览器的外挂组件方式 ，提供 Web 应用程序中多媒体（含影音流与音效 流）与高度交互性前端应用程序的解决方案，同 时它也是微软 UX（用户经验）策略中的一环， 也是微软试图将美术设计和程序开发人员的工作 明确切分与协同合作发展应用程序的尝试之一。 二、什么是Silverlight? 深蓝软件深蓝软件 n Microsoft Silverlight是一款跨浏览器，跨平 台的插件，能够超越传统HTML文档的限制 ，为所有Internet用户提供更丰富的图形和 交互媒体体验，从而使用户体验不再成为 Web应用程序推广的瓶颈。终端用户只需 从官方网站上下载一个轻量级安装包，并 将其部署到本地计算机上，浏览器就能够 处理Silverlight应用程序。 深蓝软件深蓝软件 n一种跨浏览器、跨平台的技术。SilverLight 在所有的流行浏览器(任何平台)运行一致。 设计和开发应用程序不需要担心你的用户 是什么平台什么浏览器。无论在哪运行， 都能提供一致的用户体验。 n需要下载很小的文件来安装以支持，只需 几秒。 三、Silverlight的特点 深蓝软件深蓝软件 n它的视频和音频流，视频质量无论从移动 设备还是桌面浏览器都是720p HDTV video 模式。 n用户可在浏览器中直接对其进行控制，可 以拖动、翻转、放大的图片。 n它读取数据并且更新外观，但不会通过刷 新整体页面来打断用户操作。 深蓝软件深蓝软件 n 可以使用已经具有的技能和熟悉的工具来 创建基于Silverlight的应用程序，在Web页 面中，既可以使用HTML，也可以使用 Silverlight的WPF元素，和HTML一样，在 Web应用程序中XAML同样可以使用声明的 标记来创建用户界面，不同的是，XAML提 供了更强大的元素。 对于开发人员而言： 深蓝软件深蓝软件 设计人员可以轻松的拥有 Expression Studio进行设计、编译和 发布Silverlight应用程序。Expression Studio有创建图像、媒体，设计交互和 产生体验需要的一切能力。 Expression Blend能够生成XAML进 行输出，这样使用Visual Studio的程 序员和使用Expression Blend的设计 人员可以共享同样的文件。 深蓝软件深蓝软件 与现存应用程序的集成。SilverLight可 以与已经存在的JavaScript和ASP.NET AJAX代码无缝集成，不会使已经创建的功 能缺失。 可访问.NET Framework编程模型和相 关工具。可以使用托管的C#和VB这样的动 态语言来创建基于SilverLight的应用程序。 可以使用Visual Studio这样的开发工具来创 建基于SilverLight的应用程序。 深蓝软件深蓝软件 Silverlight项目隶属于.NET平台下的项 目类型之一。所以其依附的开发平台还是 微软推出的Visual Studio 2008，而我们都 知道，Web应用程序的核心就是展现给用 户的界面UI(User Interface)，所以，一般情 况下，对于我们的网络应用程序来讲都会 有一定的辅助页面设计工具，而Silverlight 项目的辅助设计工具是Expression Blend。 四、Silverlight技术开发平台 深蓝软件深蓝软件 在默认情况下，新建的Silverlight应用程序包 括Page.xaml和App.xaml两个文件，以及相应的 代码文件Page.xaml.cs和App.xaml.cs。 XAML类型的文件是基于XML格式的，用于 定义Silverlight应用程序界面的文件，是 Silverlight 应用程序的核心之一。 App.xaml主要用于定义供整个应用程序使用 的各种资源，如笔刷，样式等。其对应的代码文 件App.xaml.cs用于处理应用程序级别的事件，如 Application_Startup等。 五、Silverlight项目的文件组成 深蓝软件深蓝软件 Page.xaml是默认的主页面，在应用程 序启动时即进行初始化，在其中可以使用 各种UI组建定义界面，并且在代码文件 Page.xaml.cs中处理事件。 当编译Silverlight应用程序时，VS会将 整个工程编译成一个标准的.NET组件，并 将其他用到的资源封装至一个.xap文件中 。 .xap文件不能单独存在于浏览器中，必 须依托于网页。 深蓝软件深蓝软件 4.1 使用Visual Studio创建Silverlight应用 程序 4.1.1双击桌面上的Microsoft Visual Studio 2008安装快捷方式，以进入Visual Studio 2008环境首页，如下图（1-1）： 六、熟悉Silverlight的开发环境并创建第 一个Silverlight应用程序 深蓝软件深蓝软件 nC#是一种最新的、面向对象的编程语言。 它使得程序员可以快速地编写各种基于 Microsoft .NET平台的应用程序，Microsoft .NET提供了一系列的工具和服务来最大程 度地开发利用计算与通讯领域。 深蓝软件深蓝软件 4.1.2右击菜单栏中的【文件】选项-【新 建】-【项目】，如下图（1-2）所示： 深蓝软件深蓝软件 项目类型选择Silverlight出现如下图（1-3）所示： 深蓝软件深蓝软件 4.1.3我们注意看，在“项目类型”底下我们选 择【Visual C#】-【Silverlight】,在右侧的 模板窗格中我们选择【Silverlight应用程序】 ，如下图（1-4）所示： 深蓝软件深蓝软件 4.1.4在底栏的名称文本框中输入这个项目 的名称，在位置文本框中确定项目保存的 位置，勾选“创建解决方案的目录”，完成上 面的操作之后点击【确定】按钮，此时会 打开“添加Silverlight应用程序”对话框，让 我们选择在HTML网页中如何承载所欲创建 的Silverlight应用程序，这里请执行下列操 作： 深蓝软件深蓝软件 （1）选择“向解决方案中添加新ASP.NET WEB项 目以承载Silverlight”单选按钮 （2）在选项组中保持既有的设置。 如下图（1-5）所示： 深蓝软件深蓝软件 完成上述操作之后，请单击“确定”按钮。这样 我们就成功的创建了我们的第一个Silverlight 应用程序，如下图（1-6）所示： 深蓝软件深蓝软件 现在默认创建的Page.xaml已经在编辑 器中打开。在编辑器中央处，有个深色背 景与白色矩形的区域称为“预览”窗口，它会 显示XAML标记实际运行时的结果。在此提 醒大家，“预览”窗口是只读的，它不像 ASP.NET的“设计“视图，不具备从工具箱 拖放控件的功能。如果要在设计界面上添 加Silverlight控件，可直接将控件从工具箱 拖放到XAML视图。 深蓝软件深蓝软件 位于“预览“窗口之下的是XAML视图，您可以 手动添加代码，或从工具箱拖放控件到适当的位 置，来进行页面布局与设计。当您在XAML视图 中添加XAML标记或添加工具箱的控件时，结果 都会呈现在“预览”窗口中。在某些时候（如生成 项目之后），您可能需要刷新“预览”窗口才能看 到最后的结果。值得一提的是，当您切换至Xaml 视图时，会在XAML程序代码错误处出现波浪线 ，让您更容易了解何处有错误。 深蓝软件深蓝软件 n 附注：在图1-5中，我们可以看到“添加Silverligt应 用程序”对话框中提供了下列3种承载Silverlight应 用程序的选项。 1.向解决方案添加新ASP.NET Web项目以承载 Silverlight. 这是默认选项,它会创建一个合适的ASP.NET 网站或Web应用程序项目。在其中会各有一个 .aspx和.html网页。以便承载并执行您的 Silverlight应用程序。如果您创建新的Silverlight 应用程序，那么采用这个选项确实十分简单。因 为它会自动处理页面中用来承载Silverlight控件的 相关程序代码，让我们可以专注于开发Silverlight 应用程序本身。 深蓝软件深蓝软件 2.在生成时自动生成测试页以承载Silverlight 如果您希望全新开发Silverlight应用程序本身 ，而不需要去管另一个额外的Web应用程序项目 ，请使用这个选项，因为每当您尝试进行调试或 测试Silverlight应用程序时，会在运行时创建一个 新的HTML网页。如此一来，您只需将项目中最 后完成的相关文件部署到Web服务器上即可在网 页中执行。 选择这个选项之后，并不需要额外设置任何选项 。 深蓝软件深蓝软件 3.将此Silverlight控件链接到现有网站 在创建一个新的Web应用程序项目时无法选择 这个选项，只有在为一个既有的项目或网站添加 Silverlight应用程序时才能使用该选项。欲达此目 的，请先打开一个既有的项目或网站，然后在【 文件】菜单中选择【新建项目】命令，接着如下 图所示，在其中进行相关设置。请特别注意，要 选择“解决方案”下拉列表框中的“添入解决方案”选 项。 完成操作之后，请单击“确定”按钮，如图1-7所示 ： 深蓝软件深蓝软件 深蓝软件深蓝软件 在选择这个选项时，如果有多个网站， 那么我们还必须指定用来承载Silverlight应 用程序的网站，然后设置是否要选择“添加 引用该应用程序的测试页”。“使其成为开始 页”与“启用Silverlight调试”等复选框。 深蓝软件深蓝软件 Blend是一个界面设计软件，其本质为 XAML可视化编辑器，可以很直观的为 Silverlight应用程序设计出美观实用的用户 界面，包括对象的绘制、布局制作动画等 功能，能够更容易地提供出色的用户体验 度和满意度。 Blend操作起来与常见的绘图软件很相 似，但也有很多独特的地方，使用起来也 非常简单。 七、Blend工具简介 深蓝软件深蓝软件 使用Blend创建一个Silverlight的应用程序项目 1.【开始】菜单中打开Expression Blend2主界面 深蓝软件深蓝软件 2.选择【新建项目】，弹出此窗口 深蓝软件深蓝软件 3.选择【Silverlight2应用程序】，新建一个 Silverlight2应用程序项目，主界面如下： 深蓝软件深蓝软件 至此，一个简单的Silverlight应用程序创建完 毕。（示例演示一个Hello World的应用程序 创建） Blend工作环境介绍 1.工具箱： 我们可以使用工具箱建立或操作应用 程序中的对象。 深蓝软件深蓝软件 2.控件库： 这块比较重要，其中包含了Silverlight内建的系 统控件，以及用户自定义的控件。 深蓝软件深蓝软件 3.工作区： 深蓝软件深蓝软件 工作区可以简单的分为三块： a. 文件标签，显示已打开的文件与当前选中的文 件。 b. 视图切换区，可选择当前视图模式设计 视图、XAML视图或两者兼有。 c.属性区，设置当前工作区的网格、对齐，以及 显示比例等属性。 深蓝软件深蓝软件 4.对象与时间轴面板： 在使用对象面板时，要注意激活对象与选 中对象的区别。激活对象会有一个黄色的框， 而当前选中对象则为高亮显示。