您好，脚本专家！采用 Silverlight

Microsoft 脚本专家

下载这篇文章的代码: HeyScriptingGuy2007_10.exe (156KB)

人类历史 长期以来总是存在完全相反势力的冲突：罗马人与野蛮的游牧部落之间的冲突；Hatfields 与 McCoy 之间的冲突；脚本专家与持相反观点的人的冲突，他们认为系统管理脚本编写的专栏实际应该讨论系统管理脚本编写，而不是对相反势力的历史冲突追根究底。[或者，比如挂肉钩...—Ed。]

计算机世界也会受到这些完全相反的势力冲突的影响。特别是，我们应该注意开发人员和系统管理员之间的冲突。正如卡尔·马克思对这种情况进行调查后所言：“要么这个人去世了，要么我的手表停了”。

哦，错了，应该是格劳乔·马克思说的。卡尔·马克思说：“艺术通常是一种秘密表述，并且是随着时间不断进化的”。说实话，我们不知道这意味着什么。此外，格劳乔·马克思比卡尔·马克思有风趣，尽管格劳乔的名言与开发人员和系统管理员之间的冲突关系不大。

不过，我们很确信，曾经是卡尔·马克思经常使脚本专家在每天早上上班之前背诵自发的忠贞誓言：“系统管理员不是开发人员。”的确，系统管理员不是开发人员。开发人员是编写计算机程序的人员，而系统管理员是......说实话，我们也不确定 Microsoft 中是否有人真正了解系统管理员从事什么工作。但无论从事什么工作，肯定不是编写计算机程序。

当然，卡尔·马克思也写过歌曲“时代在变化”。（或者，至少他告诉我们他写过。）

从某些方面讲，幸亏有了 TechNet 脚本中心 (microsoft.com/technet/scriptcenter)，系统管理员才逐渐发现了 VBScript 并开始编写自己的实用程序，尽管这些实用程序不如典型的计算机程序那么完整和全面，但是仍然能够执行有用的管理任务。在编写这些实用程序时，系统管理员必须掌握与开发人员所用的非常相似的技能。

但这也仅是冰山的一角。Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) 的出现意味着 Microsoft® .NET Framework 不再仅限于面向系统管理员和脚本编写人员。Windows Vista® 向全球推出了小工具 (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx)，使系统管理员（或至少编写脚本的系统管理员）与开发人员处于同一起点。现在，有了 Microsoft Silverlight，即“一种跨浏览器、跨平台的插件，用来为 Web 提供基于下一代 .NET Framework 的媒体体验和丰富的交互式应用程序。”

听起来印象很深刻，不是吗？但是，您会问，这与我这样的系统管理脚本编写人员有什么关系？事实上，我们也不完全确定。但是，Silverlight 确实有助于创建出色的用户界面和多媒体演示文稿。尽管市场材料总是宣传 Silverlight 适用于创建 Web 应用程序，但一个罕为人知的事实是：Silverlight 在 HTML 应用程序或 HTA (microsoft.com/technet/scriptcenter/hubs/htas.mspx) 中同样表现不俗，深受脚本编写人员喜爱。因此，Silverlight 可能值得您花费一些时间来尝试一下。

说明

应该指出的是，今天我们不打算讨论 Silverlight 的众多功能和潜在用途；我们主要想向您展示足够的代码段，以便您能较为深刻地了解这一技术。如果您想安装 Silverlight（顺便说一下，是免费的），请转到 Silverlight 主页 microsoft.com/silverlight。silverlight.net/GetStarted 上还提供了 SDK、示例项目和许多其他有用的资料。

现在，我们假定您已安装了 Silverlight。此外，我们还假定您已访问 TechNet 杂志网站 (technetmagazine.com/code07.aspx) 的“代码下载”部分并下载了图 1 中所示的文件。

Figure 1 Silverlight 项目组件

您不一定需要 SampleProject.js，至少本月的专栏操作不需要。Silverlight 允许您在项目中将脚本附加到对象和事件；这些脚本既可以硬编码到 HTML 文件中，也可以从外在的“include”文件（如该文件）中读取，本例就属于后一种情况。此外，我们要将 SampleProject.html 转化为 HTA：只需将其重命名为 SampleProject.hta 即可。很简单，对吧？

确保将所有这些文件保存在一个文件夹中，然后准备探究其中的乐趣吧。

XAML 文件

您可能已经猜到了，本月“您好，脚本专家！”将围绕 XAML 文件展开。（顺便说一下，XAML 发音为“zamel”，与 camel或者 mammal甚至 enamel 发音相似。）XAML 是可扩展应用程序标记语言的缩写。除此之外，XAML 还可以使用类似于 XML 的语言创建用户界面。这会使某些人（尤其是系统管理员）创建用户界面变得容易吗？您将马上找到答案。

要开始寻找，请启动“记事本”并用它打开文件 SampleProject.xaml。如果发现已存在代码，请将其替换为以下代码：

<Canvas
 xmlns="https://schemas.microsoft.com/
    client/2007"
 xmlns:x="https://schemas.microsoft.com/
    winfx/2006/xaml">
</Canvas>

注意：SampleProject.hta 已预配置为加载 SampleProject.xaml 中的信息。要使用其他 XAML 文件，您需要编辑 CreateSilverlight.js 文件。

粘贴代码后，保存该文件，然后双击 SampleProject.hta。猜猜您会看到什么？没错：一个大的笨拙的灰色框。

不过，请稍等一下，先不要离开！这正是您应该看到的。

看不到很多内容，只是因为我们还没有做任何事情：目前我们已经做的一切就是向 XAML 文件添加了一个画布。但这是很重要的一步。毕竟，要尝试画油画，第一件事就是找到用来绘画的画布。在 Silverlight 中也是如此：我们需要一幅用来“绘画”的画布，才能将元素添加到项目。现在我们有了一幅画布。

顺便说一下，为什么我们会获得一个宽度和高度各为 300 像素的灰色框呢？这很简单：这些是文件 CreateSilverlight.js 默认情况下的规范。如果您不喜欢这些默认值，可以打开 CreateSilverlight.js 并根据需要调整设置。您喜欢宽度为 800 像素、高度为 300 像素的白色画布吗？（您喜欢的可能是我们将要使用的示例。）那么，只需确保在 CreateSilverlight.js 中包含以下三行代码即可：

width:'800', // Width of rectangular region of 
             // control in pixels.
height:'300', // Height of rectangular region 
              // of control in pixels.
background:'white', // Background color of
                    // control.

注意：一个要点是在原始 .js 文件中，背景设置为 #D6D6D6。现在，我们已将其设置为白色。事实证明，在 XAML 文件中，您可以使用 RGB 值来表示颜色，也可以使用颜色名称来表示颜色。（请访问 msdn2.microsoft.com/bb188314.aspx 获取颜色值和颜色名称的完整列表。）既然脚本专家喜欢使用 RGB 值来指代颜色（“我的房子？它是一个具有 FFCD5C5C 修整的 FFFFFACD”），在此我们决定使用颜色名称。

附加提示：您不必一定使用纯色作为画布背景。将图 2 中的代码粘贴到 XAML 文件，看看出现了什么。

Figure 2 漂亮的颜色

<Canvas
 xmlns="https://schemas.microsoft.com/client/2007"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="800"
 Height="300">
 
 <Canvas.Background>
 <LinearGradientBrush>
 <GradientStop Color="Blue" Offset="0.0" />
 <GradientStop Color="Black" Offset="1.0" />
 </LinearGradientBrush>
 </Canvas.Background>

</Canvas>

您以前试过吗？很棒吧？

当然，空白画布本身并不会那么有趣。正因为如此，让我们继续向该画布中添加对象吧。尽管 Silverlight 允许您添加各种不同类型的对象（包括椭圆、矩形、线条和多边形），我们还是向画布中添加一个良好的传统文本块。如何操作？通过在 XAML 文件中的 <Canvas> 和 </Canvas> 标记之间插入以下标记：

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">
</TextBlock>

您可以看到，这些 XAML 材料的确没有那么难。我们首先以 <TextBlock> 标记开头，然后确保在该标记后包含各种 TextBlock 参数（如 Name 和 FontSize），最后用 </TextBlock> 标记表示 TextBlock 结束。这样很棒吧？这几乎可以将任何对象添加到 XAML 文件。想要添加宽度为 300 像素、高度为 100 像素的矩形吗？没问题，如下所示：

<Rectangle
 Height="300" 
 Width="100" 
 Fill="Blue">
</Rectangle> 

顺便说一下，将形状（如矩形）添加到画布时，请确保指定了填充颜色和/或笔划颜色。如果未指定填充颜色和/或笔划颜色，Silverlight 会向画布添加一个透明的矩形。此时，除非您拥有某种超人的 X 射线视力，否则您无法看到该矩形，但该矩形在那里的确存在。

为某些 Silverlight 对象着色就是通过填充颜色和笔划颜色来实现的。对于其他对象，您需要使用画笔，如附加提示中向您展示（但没有介绍）的 LinearGradientBrush。如果您更喜欢用纯色为对象着色，则可以使用恰如其名的 SolidColorBrush。例如，看一下图 3 中用红色对文本进行着色的 XAML 标记（从技术角度来说，是对文本块的前台属性着色）。

Figure 3 为文本着色

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">

 <TextBlock.Foreground>
 <SolidColorBrush Name="test_brush" Color="red"/>
 </TextBlock.Foreground>

</TextBlock>

要获得更好的效果，请尝试使用图片填充文本的 ImageBrush 属性：

<TextBlock.Foreground>
 <ImageBrush Name="test_brush" ImageSource="Sunset.jpg"/>
</TextBlock.Foreground>

下面还有一个提示：如果您要使用 ImageBrush 属性，则很可能希望增大“字号”的值，因为文本越大，效果越好。

请试一试，看看会发生什么。这将给您留下深刻印象。

但请稍等：好戏还在后头

我们必须对您说实话：到目前为止，我们一直在使用效果好的资料。可以在 Silverlight 中显示文本相当棒；但您可以绘制矩形、椭圆和多边形就更棒了。不过，与可以将动画添加到 Silverlight 项目相比，所有这些就都显得逊色了。

再说一次，本文中我们要做的是为您介绍一些可用来创建 Silverlight 动画的方法；我们几乎没有篇幅来谈论其他内容。（不要责怪我们；我们一直在建议将**《TechNet 杂志》改为“您好，脚本专家！”杂志，但显然我们的建议还没有获得认可。）

闲话少说，以下是一种使我们的文本缓缓（但是一定会）淡入的很棒的效果。只需将图 4 中的代码添加到 XAML 文件中的 <TextBlock> 和 </TextBlock> 标记之间即可。

Figure 4 TextBlock 技巧

<TextBlock.Triggers>
 <EventTrigger RoutedEvent=
     "TextBlock.Loaded">
 <BeginStoryboard>
 <Storyboard>
 <DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
</TextBlock.Triggers>

不可否认，看起来这里还要执行很多步骤；幸运的是，大部分内容仅仅是示例标记。一开始，您不能仅将动画添加到 XAML 文件，还需要指示希望该动画播放的时间。这需要我们为 TextBlock 指定一组触发器。在本例中，我们将创建加载 TextBlock 后随时可以启动动画的触发器：

<EventTrigger RoutedEvent="TextBlock.Loaded">

在 Silverlight 中，动画必须在 storyboard（从电影行业借用的术语）上放映。这就是我们拥有 <BeginStoryboard> 和 <Storyboard> 标记的原因。

为了使文本淡入，我们需要修改 Opacity 属性。我们逐渐将值从 0.0（透明）增加到 1.0（纯色）。由于 Opacity 恰好是 Double 属性（基于双精度数字值的属性），因此我们使用 DoubleAnimation 动画。但我们如何使用 DoubleAnimation 动画呢？方法如下：指示我们要为其制作动画的对象（在本例中是我们为 TextBlock 取的名称 Test）；指定目标属性 (Opacity)；然后指定动画范围（从 0.0 不透明度到 1.0 不透明度）和整个动画的持续时间（5 秒）。换句话说：

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />

注意：请确保使用语法 0:0:5（小时、分钟、秒）来指示 5 秒钟。直接使用值 5 不会生成错误，但它表示动画的持续时间为 5 天！

您试过吗？现在请试一试：在 DoubleAnimation 标记内，将 AutoReverse 属性设置为 True：

AutoReverse="True"

您的动画将淡入，然后淡出。

将 RepeatBehavior 属性设置为 Forever，文本将继续淡入淡出，永无休止：

RepeatBehavior="Forever"

“永远”是不是有点长？那就将 RepeatBehavior 设置为 3x，使动画放映 3 次后退出。

RepeatBehavior="3x"

至少在我们看来，所有这些都很棒。但是，如果您不喜欢淡入然后淡出的文本，而喜欢逐渐更改颜色的文本，怎么办？此时，您应该使用 ColorAnimation 动画：

<ColorAnimation 
 Storyboard.TargetName="test_brush"
 Storyboard.TargetProperty="Color"
 From="Red" To="Blue" Duration="0:0:5" />

注意：如果要尝试此动画，只需确保使用红色文本开始。请记住，我们已经向您展示了如何用红色对文本着色。

这确实很有趣，不是吗？不过，您可能还是感到有点美中不足。原因是：ColorAnimation 确实不错，但是您真正希望的是动画能够在屏幕上飞来飞去。嗨，不要闷闷不乐；如果 Silverlight 不能使动画在屏幕上飞来飞去，那它还算软件吗？请尝试：

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Left)" 
 To="150"
 Duration="0:0:5" />

您可以看到，TextBlock 会从开始位置缓慢移动到距离 Canvas 的左边缘 (Canvas.Left) 150 像素的位置。如果要上下移动 TextBlock，使用 Canvas.Top 属性即可：

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Top)" 
 To="150"
 Duration="0:0:5" />

我们可以（仍然感到激动）合并这些动画并使 TextBlock 左右移动和上下移动吗？我们被难倒了。但是，提示您一下：将两个动画粘贴到 XAML 文件（紧挨在一起），然后看看将发生什么。

注意：好的，我们说实话：我们一直知道您可以合并这些动画。事实上，您可以将一整套动画添加到一个 Silverlight 项目中。这有些棘手 — 您可能必须包含其他标记以确保在一个动画结束后再开始下一个动画。但是，这还可以使您仅仅通过键入类似于 XML 的标记来制作非常有趣的动画。

对不起，各位；展示到此结束

是的，我们知道：我们也讨厌意犹未尽地离开，尤其是现在我们刚要看到真正的好东西。但是不要烦恼；这不一定是再见。如果您想了解有关 Silverlight 的更多信息，请发送邮件至 scripter@microsoft.com。如果大家都很感兴趣，我们将考虑在将来的专栏中提供相关内容。此外，请务必关注 TechNet 脚本中心 (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx)；我们将为您发布链接以完成 XAML 示例 (eXAMLs?)。到那时，我们才能像卡尔·马克思和弗里德里希·恩格斯在布鲁塞尔共产主义通讯委员会上给 G. A. Kottgen 的声明信件中的结尾一样说：“晚安，请安全地开车回家吧”。

Microsoft 脚本专家为 Microsoft 工作，也就是受雇于 Microsoft。在玩、教或看棒球（以及各种其他活动）的闲暇之余，他们还负责维护 TechNet 脚本中心。您可以光顾他们的网站 www.scriptingguys.com，看看他们在做些什么。

© 2008 Microsoft Corporation 与 CMP Media, LLC.保留所有权利；不得对全文或部分内容进行复制.