Part 1 Introduction
第一章WPF基础
向量和像素
如今大多数图形都是基于像素的。图形上的每一个点都以像素的形式呈现出来。大多情况，比如用DV摄影，你想要的只是DV“看到”的那些信息，不过这样有一个缺点，就是这些内容放大以后会失真（Garfield:不知道？那就去找个jpg文件放大看看）。而矢量图就不存在这种缺点，因为矢量图上的每个元素都是由一些几何对象：线段、圆、多边形，曲线……组成的。这样最大的好处就是图片放大后不会失真：比如一个圆，放大后只是改变了它的直径，但他还是完整的（位图里面的“圆”放大后就会出现阶梯状失真）。但是很明显，并不是所有的图形都可以用矢量来表现，比如你的照片是几乎不可能用这些矢量元素计算出来的。
WPF
不久前，微软的那帮人坐在一起为他们的Vista操作系统设计下一代用户接口（UI）技术，这种系统是基于矢量图和xml的，它就是现在的WPF(Windows Presentation Foundation)
WPF是.net Framework 3.0的主要组成部分，它被默认安装在Vista里，XP和2003则可以去下载安装包。其他的一些.net 3.0技术包括：
WCF (Windows Communication Foundation)
Communication subsystem
WCS (Windows CardSpace)
Digital identity subsystem
WF (Windows Workflow Foundation)
Workflow subsystem
WPF应用程序可以在浏览器里运行，也可以作为独立的桌面程序运行，这两种情况都需要.net Framework 3.0或者更高的版本。现在，大多数的WPF应用都是独立的，因为vista 市场占有率并不大，而且那个.net 3.0安装包包很大。所以，微软开发了一个相似的技术，针对浏览器的Silverlight。我们先来看看WPF来了解些背景。
WPF定位在矢量图形，但是它对位图同样支持的很好，而且还支持音频，视频这些多媒体数据。毫无疑问，所有的编码工作（在business logic 方面）都是用c#,https://www.doczj.com/doc/f41337713.html,这些.net 语言完成的。.Net框架，更准确地来说是CLR，定义了WPF应用中所有元素可能用到的类型，并且可以享受VS带来的用户体验，而且，它提供了大量的API。
XAML（eXtensible Application Markup Language）
XAML，其实还是xml，用来构成WPF的UI。WPF运行时解释xaml并随后显示UI。
微软提供了好几种工具来开发xaml，你可以用VS，不过相信我，用Expression Blend 你会更happy。.Net Framework 3.0 SDK也提供了一个所见即所得的xaml工具——“XAMLPad”。
呃~~你可以去看看Chris Sells and Ian Griffith (O’Reilly)写的Programming WPF来进一步了解WPF。
关于Silverlight
有些人说微软的Silverlight 是Flash 杀手，但是我并不确定这是否会成为事实。他们确实非常相似，flash 和Silverlight 都是浏览器插件，都对矢量图，音频，视频以及脚本提供了支持。 但是他们的技术基础是不同的，Flash 用一种半公开(semi-open)的二进制格式,而Silverlight 是基于WPF 的。在被称为Silverlight 之前，这项技术被叫做WPF/E （Windows Presentation Foundation Everywhere ）,至少在理论上是Everywhere 。 浏览器插件对不同浏览器的支持是个关键问题，现在Silverlight 支持…和…，以后会支持更多OS 的…
Silverlight 插件的核心是图形子系统，支持WPF 的一个子集（见第四章），它同样包括负责显示视频/音频内容的代码（见第七章）
Silverligh 的体系结构相当复杂（感兴趣的点我），不过它可以被分成几大块。表现系统（presentation system ）负责UI ，包括动画，文本渲染和视频/音频重放。因为它集成在浏览器里，所以它的内容可以被显示出来，也可以被JavaScript DOM 操作，而且利用JavaScript 代码（或者，https://www.doczj.com/doc/f41337713.html, ajax 框架），Silverlight 应用程序可以方便的存取web 服务等服务器端API 。
搭建Silverlight 开发环境
虽然用记事本写Silverlight 就已经绰绰有余，但是如果你想开发效率高些的话，还是得搭建一个像样的开发环境出来。 ……（这方面的资料很多，很容易找到，我先不译了，放到最后再译）
第一个例子
=_=! 我相信你知道这本书的时候已经写过hello world 了，所以这部分也放到最后再译。如果没有，请先去看看QuickStarts 中文版，也可以去看East 翻译的《JavaScript 开发 Silverlight 入门系列》
你必须去看看
Silverlight 1.0 QuickStarts 中文版（入门一定要看） Blend 1.0中文版的帮助（当然是中文的）
Silverlight 1.0 SDK Document （在SDK 的安装目录里，当Silverlight 的金山词霸用吧） 当然，还有https://www.doczj.com/doc/f41337713.html,/
为什么要用工具？
就像你在前几章看到的，Silverlight 1.0程序里并没有任何编译过程和生成二进制数据，你要做的只是建立以下三种类型的文件：
z XAML 文件来存放Silverlight的内容
z JavaScript 文件来存放部分Silverlight内容以及用代码来控制和访问Silverlight内容。
z Html 文件用来包含Silverlight
通常来说，用一个Xml编辑器足以建立Silverlight应用程序,但是这就像“用记事本也可以写https://www.doczj.com/doc/f41337713.html, 2.0程序”一样，虽然可以，但是谁会这么做呢？
因此，本章我们将向你介绍3种编辑器，应该会对你建立Silverlight程序有些帮助，我们会对每个工具作一个简单介绍，如果可能还会做些比较。
XML 编辑器
比如：XML Spy , XML Notepad 2007 ……唉，那些纯Xml编辑器功能太差，前重后轻左宽右窄，又不能所见即所得，用起来会很不舒服，整晚失眠，会连累你的！他们虽然会用css或者xslt来可视化，可是你也不能这样应付自己，微软知道了会告你虐待程序员的！说起那个编辑器，去年我在https://www.doczj.com/doc/f41337713.html,村认识了一位SpketIDE，她手工精美，代码又可以自动完成，js/xaml通吃，干脆我介绍你再下载一个吧！
矢量图 编辑器
Silverlight是基于矢量图型的，当然它也支持位图，但是矢量图有很多优点：缩放时不会失真。现在有很多矢量图编辑器，不过只有极少数支持xaml，Microsoft Design就是其中之一，它是Microsoft Expression Studio的一部分，在
https://www.doczj.com/doc/f41337713.html,/expression/products/download.aspx?key=design
你会找到有关它的更多信息，也可以在这儿下载它的60天试用版。
Silverlight IDEs
这个基本没的选，就是Blend 2了（你可以去下个Blend 1中文版，然后把里面的帮助拎出来看）,目前最新版本September Preview，下载地址：
https://www.doczj.com/doc/f41337713.html,/downloads/details.aspx?familyid=2E917813-0FD2-4E87-B1AE-E8 6BB7C692C7&displaylang=en
还可以看看
在https://www.doczj.com/doc/f41337713.html,/expression/里可以看到Microsoft Expression Studio的系列产品
Part 2 Declarative Silverlight
第四章XAML 基础
XAML
XAML是种xml方言，因此本书会用到很多尖括号。本章我们将会去了解一下那些最重要的XAML元素，其实这么薄一本书也不可能覆盖所有的元素，但是我们会尽可能让你以最快的速度上手XAML。
如果你以前用XAML做过WPF开发，那么你可能已经知道了本章（及第六章）的大部分内容，不过，他们还是有些微小的差别:Silverlight不能像WPF那样对XAML提供完整的支持，它只支持其中的一个子集。以后的版本将会支持更多的元素和属性，当然，除了那些只适合桌面程序而不适合浏览器的元素。
XAML文档的根元素是
使用文本
你已经运行过Hello World了吧？！目前为止我们往Silverlight内容里面添加文本都是用的
z设置TextBlock的Text属性
z把文本写到开始/结束标记之间
例 4-1 使用第二种方式输出一个简单的文本。注意，这种方式在VS里是不允许的，会得到一个提示，不过图4-1似乎证明这样也是可行的。
为了让它在浏览器里显示出来，你需要额外的两个文件。
首先，需要一个JavaScript文件来初始化Silverlight内容（例 4-2）。这个附加在Html上的JavaScript文件，在本书我们会称之为“HTML 代码隐藏”,后面你会碰到“HTML JavaScript 文件”“XAML JavaScript 文件”这种称呼，指得就是这种文件。
注意那些加粗的代码元素：
z source XAML文件的URL,必填
z parentElement 存放Silverlight内容的DOM元素，必填
z id 让javascript代码可以通过这个id来访问Silverlight内容
第二个是一个HTML文件，它是由浏览器加载并显示的，它引用了“HTML 代码隐藏”文件和Silverlight.js(SDK里有，也是本书的一部分)。这个HTML页面需要包含一个
看到了吧？大多数情况下，当你建立一个新的Silverlight应用，你可以先把那些文件复制粘贴过来，包括HMTL文件，HTML Javascript文件,XAML文件，需要的话还得复制XAML Javascript文件，随后要做的就是按你的需要更改他们的文件名。书的后面部分如果文件没有添加额外的内容，就会避免再重复提起它们。你可以去下载本书的源码。
图 4-1 显示的是文本的默认布局：字体：Lucida 大小：11 points，黑体，你甚至不用安装这个字体就可以显示出来，因为它是Silverlight插件的一部分。因此在Mac OS X里你看到的效果将是一样的（图 4-2）
除了Lucida以外，还支持其他几种跨平台的字体：
z Arial
z Arial Black
z Comic Sans MS
z Courier New
z Georgia
z Times New Roman
z Trebuchet MS
z Verdana
除此之外的其他字体，即使客户端安装了也不会被支持；如果你输入一个无效的字体名，Silverlight会默认采用Lucida.
为了应用这些字体，你可以用下面的属性来设置：
FontFamily 字体名
FontSize 字体大小
FontWeight 字形
比如：
Thin,ExtraLight,Light,Normal,Medium,SemiBold,Bold,ExtraBold,Black,ExtraBlack；
不幸的是，IDE智能感知给你提供的字形列表可能会包含一些额外的，非法的字形。
你可以在 例 4-4 显示了一些其他的样式，比如 Forground 前景色（这儿指的文本颜色），你可以用颜色名（比如：红色绿色蓝色 =_=!开玩笑的，应该是英文），或者用RGB格式的#FFFFFF…，你也可以在RGB前面加2位十六进制数，00到FF来定义不透明度，00:完全透明，只能看到背景，元素不见了，设为ff，元素就一点儿都不透明。比如：#7FFFFF00,就是50%(7f)透明的黄色(#ffff00). Background用来设置背景色，其他还有好多，你可以去翻翻SDK。 你也可以在Silverlight应用程序里加载外部的OpenType或者TrueType（TTF）字体，第9章将会详细介绍。 使用形状(shape) Silverlight的可视元素大部分都是形状(shape)：那些实现应用程序视觉体验的几何元素。这部分我们将讲述大部分已有的形状元素。 这些元素有很多共同的属性，比如 Fill 如何填充形状的内部，例如，用一种颜色填充 Stroke 如何绘制形状的轮廓, 例如，用一种颜色绘制 StrokeThickness 形状轮廓的宽度，像素级。不一定是整形。 我们将以最简单的形状做为开始：线段，在XAML里用 三条线段组成的三角形，在图 4-4可以看到显示效果。因为五像素的Stroke,所以三角形的拐角处看起来并不很完美。 如果你想绘制一个封闭图形，比如三角形，矩形……你最好用 如果你想忽略上面的最后一步，只是想要一个未闭合的形状，你可以用 例 4-6 再次绘制了一个三角形，不过这次拐角明显好多了（图 4-5），用Polygon我们没办法为每个边着不同的颜色，所以用Fill增加了一种显示效果。 还有一种特殊的多边形，矩形。在Silverlight里用 你可能还会对矩形的另外一个特性感兴趣：圆角。矩形的圆角其实是椭圆形的一部分，随后会介绍椭圆形，你可以设置椭圆的半径，如果水平，垂直半径相同，你会得到个圈儿。矩形的圆角也是这样的，通过RadiusX和RadiusY属性来设置半径。 例 4-7 将绘制一个圆角矩形，效果如图4-6 压轴的是最重要的一个形状,如果你想做一个复杂的设计，肯定离不开它—— 在Blend里你用铅笔划一条路径然后看看他的Data,你会发现一堆乱七八糟的数据，而且是大小写不敏感的。 首先我们来看看路径的填充规则(FillRule)，注意这种情况，如果你绘制路径的时候有交叉部分，将会有两种处理方式：F0和F1 F0代表EventOdd Stands for EvenOdd, meaning that points that have an even number of path segments between them and the end of the canvas are considered outside the path; points with an odd number are considered inside and would be filled. F1 代表NonZero Stands for NonZero, meaning that all points where a line between the point and the end of the canvas crosses the path from the left side as often as from the right side are considered inside the path. =_=! 我不知道怎么翻译，意译也说不清，贴个图看吧 大多数情况下你用的是EvenOdd，所以它被设成了默认值。 如果你正在写代码，现在可能会很郁闷，因为 下面看看Data属性里的一些命令标识符，第一个是M，他代表“Move”,它的意思是把钢笔（Pen）移动到这个位置，但是并不开始绘制。比如：M 40,30 将会把钢笔放到坐标为（40,30）这个点上，随后的代码才会开始绘制各种形状。下面我们将再次绘制一条线段，线段用L命令表示，你只用再为L命令提供一个结束点坐标就行了，因为钢笔的当前位置就是线段的开始位置！下面的语句将绘制一条从（40，30）到（70，80）的线段：M 40,30 L 70,80 记住，他们是用空格隔开的。看明白了吧？M和L都是后面跟一个坐标作为参数。 H x坐标可以画一条水平线，比如：M 40,30 H 50 V y坐标可以画一条垂直线，比如：M 40,30 V 50 用Line命令只能画出那些不包含曲线的形状，如果需要绘制曲线，就要用到A命令，它可以绘制椭圆拱形，你需要为它提供一组参数： z x,y半径 z旋转角度（度数） z这个角度是否大于180度（1/0） z是否朝着正方向（1/0） z结束点坐标 试一下： M 50,50 A 50,50 90 0 1 100,50 还有一种很常见的曲线，贝赛尔曲线，由法国汽车设计师（？数学家）Pierre Bézier发现，并由此为计算机矢量图形学奠定了基础。贝赛尔曲线的定义有四个点（指的三次贝赛尔曲线）：起始点、终止点（也称锚点）以及两个相互分离的控制点。滑动控制点，贝塞尔曲线的形状会发生变化，贝塞尔曲线的有趣之处在于它的“皮筋效应”，也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换。 如果是二次贝塞尔曲线，只有一个控制点。二次和三次贝赛尔曲线分别用Q命令和C命令，记住，开始点已经有了，你要做的就是提供控制点坐标和结束点坐标，当然，如果用Q，只用提供一个控制点坐标，用C就得提供两个。 例如： 二次贝赛尔曲线：M 125,125 Q 110,60 175,75 三次贝赛尔曲线：M 150,125 C 125,175 20,125 50,100 贝赛尔曲线还有些其他用法，比如 用S替换Q ,T替换C来绘制平滑贝赛尔曲线 呃，还有一个命令Z,你可以加到那些命令的后面看看效果，它其实就是把曲线的结束点和开始点连接起来。 例4-8 是前面那些路径绘制命令的一些实际应用，它们在图4-7里面是按顺时针排列出来的，你可以看对应着看看。 前面提到过，手写Path是件很痛苦的事情，你可以下个Expression Design来设计路径，Blend对此支持的很不好，工具箱基本是空滴，在Design里你会发现很多好用的工具。 还有一种曲线不能被忘掉的：椭圆形。用 请看例4-9 和图4-8 Geometry元素 Geometry元素很像形状的替代品，比如线段，矩形，路径……但是这种元素它自己是不能被绘制出来的，必须被放在其他元素的内部。比如一个你要裁剪（Clip）一个UI 对象，你可以把一个Geometry元素指定给它，让该元素按照这个Geometry元素进行裁剪。或者你可以把它赋给 有好几种geometry元素，包括EllipseGeometry, LineGeometry, PathGeometry, 和RectangleGeometry，看下面的例子（在后面的例 4-16会给出另外一种不同的方式来实 现这种效果） 布局元素 如果你不指定元素的位置，它将默认显示在显示区域的原点(0,0)，也就是左上角。你可以试试，建立一个XAML文件，把几个没有指定位置的 你可以用Canvas.Top和Canvas.Left属性来设置大多数元素的位置，这两个属性分别指定了元素左上角的坐标x值和y值。 Canvas.Top和Canvas.Left是元素到它所在的Canvas元素顶部，左侧的距离。 试一下，例4-10，效果如图 4-9： 只有 当然，像其他元素一样，画布也可以层叠布置，默认规则是按照它们在XAML出现的顺序，先出现的元素显示在最底层，最后出现的元素在最上层，类似CSS里的z-index,你可以把z-index理解为三维坐标里的z坐标，Silverlight也使用相同的策略来改变元素的默认层次。 例4-11展示了Canvas.ZIndex属性的应用，最上层的元素拥有最小的z-index值。效果如图：4-10 使用图形 尽管Silverlight是一个基于矢量的技术，但是依然支持位图。在XAML里用 例 4-12是代码，效果如图4-11,那么
相关主题
文本预览