]]>
.gif)
pȝ需?/h3>
- 支持pȝ: Windows Vista and Windows XP Service Pack 2
- 支持览? Microsoft Internet Explorer 6, Windows Internet Explorer 7, Mozilla Firefox 1.5.0.8, and Firefox 2.0.x.
推荐最低硬仉|? Intel Pentium III 450-megahertz (MHz) or faster, equivalent processor 128 megabytes (MB) of RAM
安装说明
- 验证pȝ需?/strong>
认你正在运行的是Silverlight所支持的Windowspȝ和浏览器.- 下蝲
点击上面的Silverlight 1.0 Beta For Windows的下载链接（接受许可协议卛_Q?br>对于 Microsoft Internet Explorer 用户:
览器会提示您运行或保存安装文g(Silverlight.1.0beta.exe)。点?strong>q行开始下载。当您完成下载后览器会再次提示您是否运行安装程序。点?strong>q行开始安装。注意安装Silverlight必须有够的理权限对于 Mozilla Firefox 用户:
保存 Silverlight.1.0beta.exe 到您的硬? 一旦下载完成点?strong>打开可以开始安?- 安装 Silverlight
- Silverlight 1.0 Beta 安装E序会自动安?
- 如果您用的是Windows VistapȝQ在提示您需要安全许可的时候请认q行
- 安装E序会l安装过E，当在IE中完成安装以后，IE览器页面会自动更新Q而在FireFox中，你需要重新启动浏览器
- 您可以开始用Silverlight?/li>
- 体验一下Silverlight以确认安装成?
讉K Microsoft Silverlight site 以确认安装成功ƈ开始体验Silverlight内容. - 下蝲
]]>
Silverlight 是一U新?Web 呈现技术，能在各种q_上运行。借助该技术，您将拥有内容丰富、视觉效果绚丽的交互式体验，而且Q无论是在浏览器内、在多个讑֤上还是在桌面操作pȝQ如 Apple MacintoshQ中Q您都可以获得这U体验。Microsoft .NET Framework 3.0QWindows ~程基础l构Q中的呈现技?XAMLQ可扩展应用E序标记语言Q遵?WPF (Windows Presentation Foundation)Q它?Silverlight 呈现功能的基?/p>
本白皮书逐步引导您了?Silverlight 的基本情况，以及如何使用 Microsoft 的众多工P包括 Microsoft Expression Blend、Microsoft Visual Studio 2005 ?XAMLQ来构徏内容丰富的图形站炏V首先，让我们了解一?Silverlight 发展历程的相兌景信息，以及它在开发领域所处的位置?/p>
构徏一个简单的 Silverlight 应用E序
我们先来看一?Microsoft Expression BlendQ用该工具创徏一?XAML 格式的非常简单的应用E序Q以?Silverlight 使用。要?Blend 中创?Silverlight 应用E序Q请选择 FileQ文Ӟ->New projectQ新建项目）Q此时会打开“New Project”Q新建项目）对话框。请参见?1?/p>
.gif)
?1. 使用 Expression Blend 创徏新的 Silverlight 目
选择 OKQ确定）Q即会创Z个新目。该目包含一个默?HTML 面、该面的一?JavaScript 源代码、一?XAML 文档和该 XAML 文档?JavaScript 源代码及 Silverlight.js?/p>
Silverlight.js 包含用于下蝲和实例化 Silverlight 控g的代码。它作ؓ Silverlight SDK 的一部分提供l用戗?
Default.html 是标准的 HTML |页。该|页包含三个 JavaScript 脚本引用Q分别指?Silverlight.js、Default.html.jsQ其中包含特定于应用E序的用于安?Silverlight 的代码）?Scene.xaml.jsQ其中包含在 XAML 中定义的应用E序事g的事件处理程序）?
它被设计Z个独立的面 (default.html)Q与实例化逻辑 (default.html.js)、设?(Scene.xaml) 和事件代?(Scene.xaml.js) 分开。不q，理论斚w的探讨已l够多了Q现在我们开始开发一个简单的应用E序?/p>
创徏供视频播攑֙使用?UI
在项目中d视频文g。ؓ此，请右键单dq右上方 Project FilesQ项目文ӞH口中的目文gQ然后选择 Add Existing Item...Q添加现有项目）?/p>
选择某个 WMV 文gq将其添加到目Ӟ目览器中显C文gQ同时在视图中添加了一个媒体元素?/p>
.gif)
?2. ?XAML 视图中添加媒体元?/strong>
现在卛_q行您的目Q浏览器启动ƈ播放您的视频Q?/p>
通过~辑 XAML 可以停止自动播放视频。您会看?XAML 设计器右侧有两个选项卡：DesignQ设计）?XAML。选择“XAML”选项卡，会打开 XAML ~辑器，如图 3 中所C。用该~辑器ؓ媒体元素~辑 XAML 文本Q添加属?AutoPlay=False?/p>
.gif)
?3. ?XAML ~辑器中~辑 XAML
现在Q如果您q行该应用程序，会看?Silverlight 内容虽然呈现了视频的W一帧，但ƈ不播放?/p>
在视频播攑֙中添加控?/h3>
应用E序d两个文本块，文本内容分别?Play ?StopQ名U分别ؓ txtPlay ?txtStop。完成后QXAML 应如下所C：
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" > <MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/> <TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/> <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/> </Canvas>
接下来，为文本块?XAML 中添加事件处理程序声明。ؓ此，可以使用 MouseLeftButtonDown 属性声明单击鼠标的处理E序。在 txtPlay 文本块中Q添加对 DoPlay 的事件处理程序；?txtStop 文本块中Q添加对 DoStop 的事件处理程序。完成后QXAML 应如下所C：
<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap" MouseLeftButtonDown="javascript:DoPlay"/> <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap" MouseLeftButtonDown="javascript:DoStop"/>
现在Q如果用户单d中一个文本块Q将触发一个事Ӟ您可通过 JavaScript 功能捕获q处理该事g?/p>
?JavaScript 中处理事?/h3>
模板创徏?Scene.xaml.js 可用于在 JavaScript 中捕获ƈ处理用户事g。由于您?XAML 内指定了 DoPlay ?DoStop 事g处理E序Q因此应在此处付诸实施。相应的代码如下所C：
function DoPlay(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Movie_wmv");
theMedia.Play();
}
function DoStop(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Movie_wmv");
theMedia.Stop();
}
在本例中Q将 Silverlight 控gUCؓ SilverlightControlQ将引用该控件的 JavaScript 变量UCؓ theHost。稍后查扑֪体元素（在本例中UCؓ Movie_wmvQ时Q将用到上述名称。在目中添加电影时Qؓ您创Z此媒体元素，该元素的名称是根据电影名U命名的。因此，如果电媄的名U是 Movie.wmvQ则此媒体元素就UCؓ Movie_wmv。如果用其他电影，则控件也会相应地采用其他名称?/p>
该媒体元素有 Play ?Stop 两个ҎQ分别用于启动或停止媒体播放?/p>
׃存在对该媒体元素的引用，因而可以调用上q方法，电媄随之停止或启动Q如?4 中所C?/p>
.gif)
?4. q行应用E序
]]>
源文件下?/span> http://www.wangpangzi.net/uploads/200703/3dlab.zip
本文的目的是在Blend环境中研IWindows Presentation Foundation(WPF)?DҎ，首先我们导入一个已l徏立好?D模型到程序中Q用动画让其旋转。然后，我们会研I如何动态的使用代码生成模型。最后我们会?D的用L面映到3D模型上，用户q可以与其交互?br>注意Q源文g中的源代码是为每个阶D而设计的Q因此你可以从中间开始学习或者做阶段备䆾之用。每个练习也包含了一份完整的完成后源代码Q你可以直接通过它们查看最l结果?br>
l习一 使用静?D模型(?个Q?
在本l习中，你将会导入一个已l徏立好?D模型Qƈ使用Viewport3D对象把它昄出来Q然后用动画让他旋转v来。最后，用户可以使用鼠标旋{q个模型?br>
d1 导入3D模型?/span>
虽然我们可以使用XAML直接建立3D模型了，但对于稍微复杂的模型来说Q我们最好用专业工具徏立模型，再导出成XAML格式供我们用。在本练习中Q我们将会用一个用q种方式建立?D模型Q即一个XAML文g。ƈ其导入Blend中?br>1Q打开Microsoft Expression Blend.
2Q运行File > New Project…建立新程序?br>3Q在弹出的New Project H口中选择Standard Application,在Name中输入Show3DModel, 选择你的保存文g夹，点OK建立新程序?br>4Q在Source\Exercise1子文件中Q你会看C个叫做Model.xaml的文Ӟ它包含了你将要用的3D模型。用C本打开q个文gQ你会看到很多代码，q些代码靠手工输入无疑是困难q且枯燥的。而生成这个模型文件的工具大大简化了工作Qƈ且自动的代码封装在Viewport3D里ƈ攑օViewbox中。你可以整个文件放入XamlPad中来预览模型?br>5Q将Model.xaml中的所有内容脓到应用程序中window.xaml文g里的Grid标签中?br>6Q按F5~译E序Q运行结果如下：
d2 改变摄像机的位置?/span>
在本d中，我们了解如何改变摄像机的位|?br>1Q?nbsp; 打开Window1.xaml文gQ找到Viewport3D中的Viewport3D.Camera 标签Q它包括了一个PerspectiveCameraQ即透视摄像机。它的UpDirection 目前?,1,0Q把它改?.2,1,0Q然后按F5q行E序Q看看效果的变化?br>2Q?nbsp; 改变摄像机的Position?.25,0,2.2339, 然后q行E序Q观察摄像机位置发生的变化?br>3Q?nbsp; 改变Position?,0,2.2339Q同时也改变LookDirection?3,0,-2.2Q然后再q行E序观察变化?br>4Q?nbsp; 好，现在请随便尝试几个数据组合，h意如果尝试过大的数据Q很Ҏ使摄像机跑到一个较q的地方Q因此会什么都看不到?br>5Q?nbsp; 当你完成实验后，用一下代码其回到初始的默认位置Q以q行后面的Q务?
UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,2.29339"
FieldOfView="39.5978" />
d3 l模型添加动甅R?/span>
1Q打开Window1.xaml文gQ找到Viewport3D中的Viewport3D.Camera 标签Q在此标{Q添加下面的代码Q?
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Rotation3DAnimation Storyboard.TargetName="WpfLogoOR12"
Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)"
Duration="0:0:5" AutoReverse="True"
RepeatBehavior="Forever" AccelerationRatio="0.4" DecelerationRatio="0.4">
<Rotation3DAnimation.From>
<AxisAngleRotation3D Axis="2,10,3" Angle="-45" />
</Rotation3DAnimation.From>
<Rotation3DAnimation.To>
<AxisAngleRotation3D Axis="2,10,3" Angle="45" />
</Rotation3DAnimation.To>
</Rotation3DAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Viewport3D.Triggers>
2Q运行程序，logo模型会自动的发生反复旋{?br>
d4 可交互的旋{模型?/span>
在本l习的最后一个Q务中Q我们将允许使用鼠标旋{模型。你会用?3D Tools for the Windows Presentation Foundation, q是一套可以辅助我们在WPF中用XAML制作3D应用的工P可以?a title=http://www.codeplex.com/3DTools上下载。当Ӟ我们现在已经不必M载了Q我们要用到?DTools.dll target=_blank>http://www.codeplex.com/3DTools上下载。当Ӟ我们现在已经不必M载了Q我们要用到?DTools.dll 库文件在实例的Source\Exercise1文g夹下?br>1Q给目中添?DTools.dll库文件?在Project面板中，叛_References, 选Add Reference…, 然后扑ֈ3DTools.dll文g)
2Q打开Window1.xaml文gQ添加一个XML 命名I间声明Q以在这个XAML文g中?D toolsQ?
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tools="clr-namespace:_3DTools;assembly=3DTools"
Title="Show3DModel" Height="300" Width="300"
>
3Q添?lt;tools:TrackballDecorator>标签Q<Viewport3D></Viewport3D>标签整体包含在添入的标签<tools:TrackballDecorator>... </tools:TrackballDecorator>中?br>TrackballDecorator允许使用鼠标左键拖动旋{包含的模型，使用鼠标右键~小攑֤?br>4Q编译运行程序，现在实C模型的旋转、羃放大交互了?br>
]]>
作ؓFlash的竞争者，现在才出现的有ҎQ不q要是以Flex的竞争者，׃Ajax?netE序员的数量q远出FlexE序员，q个倒是有点看头?/p>
q个是一个演C网站：http://silverlight.net/fox/
软g需求：Microsoft Silverlight 1.0 Beta - for Mac or for WindowsQ播放插ӞQ?strong>Microsoft Silverlight 1.1 Alpha - for Mac or for WindowsQ程序开发预览）Q?a target=_blank>Microsoft Visual Studio codename “Orcas” Beta 1Q微软下一代Visual Studio产品Q，Microsoft Silverlight Tools Alpha for Visual Studio codename “Orcas” Beta 1QVisual Studio的Silverlight开发包Q，Expression Blend 2 May Preview Q给Silverlight开发用L面和设计Q，Expression Media Encoder May Preview Q视频开发）Q?a target=_blank>Expression Design Q设计矢量图形）?/p>
关于后面的图形界面开发的软gQ可以看看Expressionpd介绍视频Q这个是Expression的主?a target=_blank>http://www.microsoft.com/expression/?/p>
看了一下他制作的过E的视频Q感觉有点像是Flash IDE+Flex开发，但是协作的确是相当强悍：Expression Blend可以对图形进行补间动画，而到了Visual Studio可以q行E序代码对图形进行运操作?/p>
感觉上他在图形图像上的确比Flex有优势，但是和成熟的Flash相比它现在还是Alpha、Beta。看到这里我不得不想刎ͼFlex和Flash在下一个版本的Flash IDE中，肯定是要融合在一起了Q就是不在一起也是要能够很好的相互协作，虽然现在CS3出来了，但是q是没有很好的看C们的协作QBridge也只能算一个浏览器。协作方面微软已l抢在前面了QAdobe要加把劲了?/p>
真希望下一ơ看到Adobe的Y件工作方式是QFlash中编辑的矢量囑Ş可以在Illustrator中编辑完成后又放回FlashQPSD囄在Flash中可以直接发送给Photoshop~辑Q编辑后可以直接更新Flash中的PSDQAS直接qFlexQ或是FlashQ来搞定QAE也一样在一起随意工作，我们只需要轻ȝ按钮可以在不同的Y件中做他擅长的事情，最后在FlashQFlexQ中输出swf?/p>