Hello SilverLight 4(写给初学者的SilverLight教程)

chehongzhi 2010-06-29 09:41:01

加精

今天是第一课，我选择的参考书是《Hello SilverLight4》。看书名就知道这是一本入门的书，所以对于我们菜鸟来说，这本书最合适啦！学会之前不要逃走哦！

我们的教程一共有8章，它们分别是：
1. SilverLight是什么东东？（我：微软的东东）
2. SilverLight的控件们（一看就知道是微软的风格，控件编程正合适咱们菜鸟）
3. SilverLight的数据服务（没有数据的东东最多也就是展示性质的）
4. 通过Expression Blend学习XAML（对于咱们菜鸟来说，这是重点和难点）
5. 做一个Fish Eye按钮（效果比这章的标题要另人兴奋的多）
6. WCF RIA服务的再利用（...我也不懂）
7. 脱离浏览器（看看怎么个情况）
8. SilverLight游戏编程（可以不看前面直接学习这章吗？）

希望这8部分不会太枯燥，好了，废话说太多，咱们开始进入正题。

一 Hello SilverLight

人们（特别是咱们程序员）总是害怕改变，因为这意味着又要学习新东西了。当要开发RIA时恐怕我们又要学习一大堆不知所云的东西。如果做为.NET程序员的你选择了Flex开发的话，上面的情况就无法避免了；如果你选择了SilverLight，那并没有多少新东西要学习，相信我，这是真的。有很多程序员（像我一样），在从事WEB开发。还有很多程序员，在从事桌面程序开发。尽管ASP.Net企图把这两者有机的结合起来，但是还是有点不同。例如，我想动态的改变一下字体大小和颜色，在Web开发中，恐怕要使用JavaScript，但在桌面应用程序中，这小菜一碟。SilverLight也在向这方面努力，尽量使得双方的程序员都能尽快的适应SilverLight开发，第七章将详细进行说明。如果你开发过WPF应用程序的话，那太好了，你可以直接跳过许多章。这并不夸张，因为SilverLight是WPF的一个子集。比如它们都使用XAML界面语言。要让用户看到你的SilverLight程序，需要一个5MB大小的插件，就像Flash一样。不过这个插件可比Flash强多了，它对完整版.NET进行了精简，支持非常多的.NET功能。这意味着.NET的众多优点也被SilverLight继承了。
RIA这个概念最早由Macromedia在2002年提出，并在其Flash中实现。RIA程序使用起来的感觉和桌面程序非常相似，只不过RIA程序不能够拥有对用户磁盘读写的所有权限（出于安全考虑才出此下策）。抛开SilverLight和Flex我们来看一看RIA的通用特征吧！

失量图形
众所周知，现今有两大图形格式（别告诉我你不知道！），位图和失量图。两种格式的优缺点不知道的同学可以上网上查一下，因为篇幅关系，这里就不在做介绍了。值得注意的是，失量图形在透明，缩放等动画效果上比较位图有相当大的优势哦！

动画
不得不承认，最先吸引我学习SilverLight的就是这个所谓的“动画”，结果我完全被骗了。在传统的网页中我们也可以通过Timer以及JavaScript来创建一个动画，每隔一个特定的时间段就执行一次特定的任务（通常是改变一个值），以此来实现动画效果。而这些效果在SilverLight中小菜一碟。

客户端存储
有一次，我刚从网上看完一部大片，我感觉这部电影拍的非常棒。于是我想到把自己激动的心情通过博客来与大家分享，进入博客的编辑器我开始打字，正当我将要完成的时候，浏览器死掉了！可以想像当时我是多么的沮丧。我相信很多人都有类似的经历，通常的建议是先在本机的编辑器中（比如Word）把内容编辑好，然后再复制粘贴到网上。这的确是一个好办法，但是对于此我们真的就无能为力了吗？有人提到Cookie，但是它的容量太小了。我们来看看SilverLight是怎样处理这件事情的，它叫做“独立存储（Isolated Storage）”技术，后面我们会详细的说明。
开发工具
你可以使用记事本来开发，以此来显示你有多么与众不同。大部分正常人还是会选用Visual Stdio或Expression Blend来进行开发。VS便于调试，Blend便于布局和制作动画，区别主要就是这样。可以使用两种开发工具的原因其实很简单，那就是让设计人员和程序员关系处的更好一些，因为他们可以使用同一种工具同一种语言进行交流。而不是程序员看着一堆PhotoShop制作的PSD文件发呆。

好了，说了不少，可以开始创建我们的第一个SilverLight应用程序了，Let’s go!

一个世上最简单的SilverLight程序
我将使用VS2010 Express来进行演示，Microsoft很厚道的为我们提供了一个免费版本。

视频内容

好的，我们的程序创建完毕了，事实上，它看起来像一个网页，显示了一行文字“Hello SilverLight4”。但它不是。我们会在后面把它更完善一些。
双击MainPage.xaml文件你将会看到如下内容：
<UserControl x:Class="HelloSilverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
这就是XAML标记语言，它是基于XML的，可读性非常的好。正如你所看到的，在XAML中不会混合其它的代码，Flex就做不到这一点。

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
...
这几行是引用名称空间，和纯XML不同的是，这些URI是有意义的。它们在编译时会映射到相应的.NET空间。
代码和XAML分离的好处之一是，界面工作和程序工作可以同时进行。

设置<Grid x:Name="LayoutRoot" Background="Blue">可以使背景变成蓝色，就像使用HTML和CSS一样，这样做是为了使传统的WEB开发人员可以快速的适应SilverLight开发。事实上大部分的CSS样式可以在SilverLight中找到对应的（几乎是完全相同的）属性。

今天就到这里了，更加精彩的内容在后面呢。（2010.6.28）

今天咱们继续，昨天的内容大家应该都能明白怎么个情况吧？不明白的地方可以发送邮件到chehongzhi@163.com，我会一一解答。那么就开始今天的教程吧！

新建一个SilverLight项目后会IDE也就是VS2010会为我们自动生成一些文件（VS是神器！），这些文件里面有三个最重要:
MainPage.xaml：这个文件就是我们做大部分工作的地方，这里面我们可以放控件，可以做动画，可以在MainPage.cs后台文件中写我们枯燥的程序。
APP.xaml：这里面是全局资源，也就是说，这里面的东西在整个应用程序运行的过程中都可以使用。
APP.cs：这里面是SilverLight程序初始化的一些代码，我们后面会说明里面是什么东东。
其它还有很多文件随项目生成，不过一般情况下没什么用，又因为这是一个初级教程，所以这些文件也就不一一的说明了（其实其中一个原因是：我也不懂- -）。
XAML是基于XML的，所以不太懂XML的同学可以先去了解一下XML。不过我觉得XML发展到现在，大家应该都明白XML是怎么个情况吧？
现在我考考你们：
<TextBlock Height="56" Margin="12,25,85,0" Name="textBlock1"
Text="Hello, Silverlight!" VerticalAlignment="Top"
Foreground="White" FontSize="30" />
上面的XAML显示什么内容？我想即使你不懂技术，查查字典也能明白上面例子的答案吧。从这个例子可以看出，XAML标记中的属性几乎完全等同于传统WEB开发中的CSS样式。

部署SilverLight应用
SilverLight应用程序易于部署。为什么这么说呢？因为SilverLight只有两个文件需要部署（一个xaml文件和一个dll文件，如果你的程序中有图片、声音和视频等资源的话，这些资源也包括在内），说部署有点复杂，就是只有两个文件需要拷贝到你的服务器上，而就是这两个文件还被打包成一个后缀为xap的文件，也就是说，你写好程序，把生成的xap文件拷到服务器上，就OK了，你要说这都不会我抽你。
Xap文件生成在应用程序目录下的BIN\Debug目录。Xap其它是一个ZIP压缩文件，这么做的原因是ZIP文件可以被很好的压缩和解压。
把这一段HTML插入到网页中，你的SilverLight程序就会被用户看到了。
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/HelloSilverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.41108.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.41108.0" style="text-
decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get
Microsoft Silverlight" style="border-style:none"/>
</a></object>
如果以前你在网页中使用过Flash，那这些代码你一定不陌生。蓝色的代码是当用户没有安装SilverLight时，会显示的内容，它会提示用户下载并安装SilverLight。

当然，你可以改成其它的图片，至少把它变成中文的！

小结：
RIA使得桌面程序和Web程序的界限更加不明确了，当全屏使用SilverLight时，几乎完全无法感觉到这是一个Web程序。
SilverLight使得我们.NET程序员不用去学习新的复杂的技术，以现有的技术和编程语言就可以开发Flash一样的程序。
SilverLight容易部署，XAML标记语言向WEB公开自己的DOM树，以方便搜索引擎的收录。通过下面的学习，你将会看到SilverLight真正的特点（当然，前面的教程也不是假的，只是让人提不起精神）。
[持续更新中....]

...全文