CLR & Silverlight上海研发团队的Blog : Silverlight入门系列

在Silver light中进行基本的数据验证

SilverlightShanghai — Wed, 25 Feb 2009 08:29:00 GMT

Silverlight 2支持基本的数据验证功能。在Silverlight 2中，当我们把数据绑定到某个UI控件的时候，该数据所具有的有效性规则也自动被绑定到了该UI控件上。比如某个数据字段被设置为整数型，当我们用非整数型数据对该字段进行更新的时候就会发生错误。我们就可以利用这个规则在UI中对输入数据进行验证。要做到这点，我们只要设置两个XAML属性，并在所定义的事件中实现我们所期望的UI行为就可以了。

比如如下的XAML代码定义了一组控件，用户通过TextBox对数据进行更新：

当NotifyOnValidationError和ValidatesOnExceptions这两个属性都设置为true的时候，Silverlight就会在对输入数据验证所绑定的规则发生错误的时候触发BindingValidationError事件，这样我们就会在验证发生错误时得到通知。

接下来我们要做的就是实现事件触发时的行为，也就是我们期望的UI行为。如：

private void FirstNameTextBox_BindingValidationError(object sender, ValidationErrorEventArgs e) { if (e.Action == ValidationErrorEventAction.Added) { ((Control)e.OriginalSource).Background = new SolidColorBrush(Colors.Red); this.Dispatcher.BeginInvoke(()=>HtmlPage.Window.Alert("The input format is invalid")); } if (e.Action == ValidationErrorEventAction.Removed) { ((Control)e.OriginalSource).Background = new SolidColorBrush(Colors.White); } }

在上面这段代码中，当错误发生时，控件（这里是TextBox）的背景色就会变成红色，并利用HTML页面的警告窗口给用户提示信息。而当错误被更正时，空间就会还原到默认的白色。

入门系列（五）：事件处理

SilverlightShanghai — Mon, 14 Jan 2008 12:13:00 GMT

上次我们尝试了如何在Silverlight中创建一个自定义控件。这次让我们再深入一步，谈谈Silverlight中的事件处理。通过这种方式，我们就可以给上次制作的自定义控件增强它的交互性了。Silverlight 2.0提供了两种添加事件的方式。

方法一：

在Silverlight 2.0中，事件处理方法都是用托管代码编写的。最简单的添加事件的方式是在分隔代码（Code behind）文件中编写事件处理方法，并将该方法在XAML文件中和相应的元素对应起来。比如对于一个TextBlock，我们在XAML中有如下代码：

其中，MouseLeftButtonUp属性表示这个TextBlock将会侦听并接受鼠标左键的单击事件，单击事件将会在松开鼠标左键的时候触发。而这个事件处理的方法的名字是onClick。

在这个XAML的分隔代码中，我们可以这样定义onClick这个方法：

public void onClick(object sender, MouseEventArgs e)
{
tb.Text = "Got events!";
}

请注意事件处理方法的返回类型为void，并且接收两个参数，一个是object类型的参数，TextBlock tb所在的这个对象将会通过这个参数被传入，另一个是事件参数。如果是鼠标事件，该参数类型将为MouseEventArgs。

这样，当我们用鼠标左键点击字符串“Waiting...”的时候，该字符串将会变成“Got events!”。

方法二：

以上介绍的是最简单的事件处理方式。我们还可以通过在托管代码中注册事件句柄（EventHandler）来处理事件。这样我们就不需要在XAML中给TextBlock赋予MouseLeftButtonUp的属性。为此，我们需要创建一个新的EventHandler的方法，将onClick这个事件处理方法注册到相应的对象的事件引用中。这里引用到的是TextBlock tb：

void MouseEvent_Loaded(object sender, EventArgs e)
{
tb.MouseLeftButtonUp += new MouseEventHandler(onClick);
}

注意MouseEvent_Loaded的第二个参数类型是EventArgs。

最后，我们需要重写构造方法，在构造方法中将这个EventHandler注册到整个类的加载事件句柄（Loaded）中：

public Page()
{
this.Loaded += new EventHandler(MouseEvent_Loaded);
}

用.NET开发SL1.1开发入门系列（四）：自定义控件

SilverlightShanghai — Mon, 24 Dec 2007 08:04:00 GMT

接下来的几篇入门将会涉及到更多C#代码的编写。首先让我们从最常用的自定义控件开始。

我们都知道自定义控件有很多好处。它不仅可以弥补Silverlight所提供的控件元素的不足，可以让我们根据自己的需要自由的定制复杂的元素，还可以提高某一组有类似的明确用途的元素的重用性。比如说我们可以把按钮作为我们的自定义控件。虽然Silverlight 2.0 （即原先的Silverlight 1.1）将会提供按钮等控件的直接支持，但是因为它很典型，所以接下来还是让我们以一个按钮为例，step by step，来制作一个自定义控件，并把这个控件加入到Silverlight的应用程序中。

1. 创建自定义控件项目

自定义控件项目和普通得Silverlight项目有所不同。在新建项目的时候要选择Silverlight Class Library。

项目新建之后可以看到一个包含一个空的类的代码文件（比如.cs文件），以及一些程序集的引用等等。接下来的例子里我们并不会用到这个代码文件，所以可以选择将不用的文件删除。

2. 设计控件UI

对自定义控件设计UI使用的同样是XAML。为此我们给这个新的项目里加入一个XAML文件来呈现界面。需要注意的是，在Add New Item的对话框里，我们要选择Silverlight User Control。

在这个新的XAML文件中，我们可以看到在根节点Canvas的标签中比Silverlight项目中基本的XAML页面少了一些属性，主要少了对程序集的引用。

3. 添加公有属性

有了XAML，我们就可以通过引用编译后的项目的程序集文件来使用这个自定义控件了。但是这个时候这个自定义控件还只是一个静态的界面。作为一个控件，我们总希望能对它的一些基本属性进行一些定制。因此我们需要给这个自定义控件加入公有属性。这里我们就需要对XAML的分隔代码文件进行一些修改。

打开分隔代码文件，我们可以看到类似如下的代码：

public class MyControl : Control
{
     public MyControl()
     {
            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("MySilverlightControl.MyControl.xaml");
            this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
      }
}

值得一提的是，所有的自定义控件都是继承自一个叫Control的类的，而不是Canvas类，因此在代码里我们不能像在Silverlight Project中的分隔代码里那样直接使用XAML中元素的名字来定义元素的属性，而需要通过遍历XAML树找到某一个元素。

在上面的代码中，InitializeFromXaml方法返回一个FrameworkElement对象，这个对象给我们一个XAML树的根节点，我们需要通过这个根节点找到我们所要的元素。因此，我们首先需要在这个类中声明一个成员变量，然后将InitializeFromXaml的值赋给它：

FrameworkElement implementationRoot;

//......

implementationRoot = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());

然后就可以通过遍历implementationRoot所包含的XAML树找到所需要的元素。首先还是需要声明所需要的成员变量。比如需要找到XAML中某个TextBlock：

TextBlock tb;

//......

tb = implementationRoot.FindName("myTextBlock") as TextBlock;

其中myTextBlock是XAML中通过x:Name给某个TextBlock元素取的名字。

接下来就可以用tb来给这个TextBlock加入公共属性了。比如设定一个可以改变该TextBlock文字内容的属性：

public string Text
{
    get
    {
        return tb.Text;
    }
    set
    {
        tb.Text = value;
    }
}

4. 测试控件

通过以上几步，一个基本的自定义控件完成了。由于自定义控件项目形成的是一个程序集文件，我们并不能通过项目本身直接的看到我们控件运用的结果。我们可以在解决方案中新建一个Silverlight Project的项目来测试自定义控件。

测试的方法很简单。首先先将自定义控件项目生成的程序集文件通过“Add Reference --> Project标签”的方式引用到新建的Silverlight Project项目中。然后在XAML文件的Canvas根节点中声明一个新的名字空间并指明程序集文件的名字：

这样就大功告成了。我们可以像使用其他元素一样使用自定义的控件了。只是需要在使用时特别指明控件的名字空间。

<mynamespace:myControl x:Name="testControl" Text="Hi" />

Silverlight1.1开发入门系列（三）：画刷和变形

SilverlightShanghai — Fri, 23 Nov 2007 08:03:00 GMT

前一阵子因为忙着TechED以及项目开发，很久没有到上面来踏一脚。今天忙里偷闲，让我们继续我们的用.NET开发Silverlight应用程序的入门系列。今天的主题比较简单，也是最后一个和XAML直接相关的主题：Silverlight中不同类型的画刷和变形。因为这两个属性变化多端，进一步了解一下可以帮助我们更好的理解Silverlight中的XAML。

A. 画刷（Brush）

画刷用于对图形对象进行填充。最主要的画刷属性是Fill和Stroke。Fill用于对对象进行填充，而Stroke用于对线条进行填色。对于Fill和Stroke，Silverlight中又进一步定义了几种不同填充方式：SolidColorBrush，LinearGradientBrush/RadialGradientBrush，ImageBrush，和VideoBrush。

1. SolidColorBrush

表示填入某个单一的颜色。这是默认的填充方式。我们既可以用颜色名来直接指定颜色，也可以用颜色代号（如#FFFFFF 或 #FFFFFFFF等）来定义更多的颜色。在Silverlight中一共定义了141种颜色的名字，如Blue、Red、Green等等。以下两种代码其实是等价的：

或者：

2. LinearGradientBrush/RadialGradientBrush

这两个都是渐变色的画刷。前者是线性渐变，而后者是放射性渐变。两者的语法相近，都需要用GradientStops这个属性来定义不同颜色的渐变点。而LinearGradientBrush中还需要通过StartPoint和EndPoint来定义起止点。

LinearGradientBrush：

显示结果如下：

RadialGradientBrush：

结果如下所示：

3. ImageBrush

当然，除了给对象直接填充颜色，我们还可以使用图片作为其背景。所使用的画刷类型是ImageBrush。使用方法大致如下：

显示结果如下：

4. VideoBrush

在Silverlight中，我们还可以使用VideoBrush把视频作为动画背景。实现方式同样很简单：

B. 变形（Transform）

Silverlight里几乎所有的元素都支持变形操作。常见的变形操作有如下几个。为了更好的说明每一类的变形效果，请先记住下面这张脸：）

旋转变形：<RotateTransform/>

缩放变形：<ScaleTransform/>

扭曲变形：<SkewTransform/>

移动变形：<TranslateTransform/>

该变形使图形的位置发生变化。

组合变形：<MatrixTransform/>

使用该元素可以使图形同时进行缩放、扭曲，以及移动变形。

下面是两段示例代码：

进行单一的变换：

进行一组的变换：

<Canvas x:Name="Content" Width="500" Height="500">

    <TextBlock FontSize="24“>Button still works!</TextBlock>

    <mybutton:Button Text="Push Me" Canvas.Top="50" />

    <Canvas.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="45"/>
        <SkewTransform AngleX="45"/>
      </TransformGroup>
    </Canvas.RenderTransform>

  </Canvas>

使用.NET语言开发SL应用程序入门（二）：界面和对象模型

SilverlightShanghai — Fri, 26 Oct 2007 06:14:00 GMT

1. XAML：用来描述界面的语言

Silverlight是用XAML语言来描述界面的。XAML是eXtensible Application Markup Language的缩写，也就是可扩展的应用程序标记语言。在WPF（Windows Presentation Foundation）中，第一次出现了XAML，用来描述.NET语言。而Silverlight中的XAML只用来对用户界面作出统一的描述，弥补HTML/CSS等在界面定制上的不足，并使开发人员和设计人员可以运用同一种语言进行交流，减少额外的工作量。因此，Silverlight XAML的语法相对WPF中的XAML相对要简单一些，也更容易上手。

虽然我们可以使用Microsoft Expression Studio的视觉化方式设计界面，但是了解XAML的基本语法可以帮助我们更好的定制自己的界面。如果想要直接编写XAML，使用Visual Studio 2008则可以提高编写的效率，因为里面有自动感应功能（Intellisense）。

2. Canvas容器<Canvas />和各种元素

任何Silverlight应用程序的界面描述都是以一个叫Canvas（画布）的容器为根开始的。当我们在Microsoft Expression Blend或者Visual Studio 2008中创建一个新的Silverlight项目后，总会生成一个只包含根Canvas的.xaml文件，如下所示：

任何元素都必须添加在这个根Canvas容器的里面，因为一个界面里只能有一个这样的根Canvas容器。我们可以在这个根容器里加入子容器或者其他元素。每个元素都有一个标签相对应。比如在子容器中添加一个矩形，并在根容器中添加一个椭圆形：

Silverlight定义的常见的几何图形包括矩形<Rectangle />，椭圆<Ellipse/>，直线<Line />，多边形<Polygon />，多叉线<PolyLine />（不封闭的折线），路径<Path />（可以画出任意的形状和线条，比如不封闭的曲线），等等。<TextBlock />允许我们定制显示在界面上的文字。

3. 附加元素属性

尝试以上代码，可以发觉我们其实看不到任何我们想要的性状，因为它们的默认的大小属性均为0。可见，仅使用这些元素标签还不足以得到我们想要得形状，我们需要在标签中设置它的属性值，确定它的大小、位置等等。

观察根Canvas，我们已经可以了解到一些属性的定制，比如只在根节点出现的定义xml名字空间（xmlns）以及自定义的xml名字空间（xmlns:x）。其中还有一些常用的属性，如宽（Width），高（Height）。在Canvas中，这两个属性既可以用像素值来表示，也可以用百分比来表示。x:Name表示该元素示例的名称，有了这个名称，我们就可以在.NET代码中操作这个元素示例。Background属性设置了背景的颜色，不设置这个值，则该元素透明。

每个元素都有属于自己的一组属性。比如，我们可以将刚才的代码改进一下：

则可以看到以下效果：

其中Fill指定了填充色，Stroke和StrokeThickness定制了形状的轮廓线条的颜色和粗细。我们可以看到根Canvas下的子元素（包括子容器Canvas）的位置属性均表示相对上一级Canvas的坐标位置。值得注意的是这里虽然矩形myRect超出了subCanvas定义的边界范围，但它并不会被subCanvas剪裁，且仍属于subCanvas中的元素。

顺便一提，目前我们只有Canvas一种容器，在不久的将来，Silverlight将会提供更多的容器，使布局管理更方便。

4. 对象模型

在WPF中，XAML是.NET代码的xml表现形式；而在Silverlight中，我们同样有与XAML相对应的.NET语言编程方式。其中，每一个元素对应一个对象，元素属性在其.NET对象中都有对应的属性。例如先前一个例子中的矩形就可以用以下C#语言来表示：

Rectangle myRect = new Rectangle();
myRect .SetValue(Canvas.TopProperty, 117);
myRect .SetValue(Canvas.LeftProperty, 123);

myRect .Width = 100;
myRect .Height = 100;

SolidColorBrush brushBlue = new SolidColorBrush();
brushBlue.Color = Colors.Blue;
myRect .Fill = brushBlue;

SolidColorBrush brushRed = new SolidColorBrush();
brushRed.Color = Colors.Red;
myRect .Stroke = brushRed;

myRect .StrokeThickness = 3;

这里SolidColorBrush对象派生自Brush，是画刷的一种。Silverlight里定义了好几种不同的画刷对图形进行填充。属性Fill的默认画刷是SolidColorBrush，因此可以在.xaml文件中可以直接给Fill属性赋值，但在.NET语言中则必须明确指出画刷的类型。有关画刷的具体内容我们会在以后介绍。

刚才用C#定义出来的矩形还是独立的，如果要把它在界面上表示出来，则需要在其后加上下面这句代码将矩形加入上一级Canvas中：

Children.Add(myRect);

使用.NET语言开发Silverlight应用程序入门（一）：了解项目结构

SilverlightShanghai — Fri, 26 Oct 2007 06:13:00 GMT

从今天开始，让我们系统的了解一下如何用.NET语言来开发Silverlight的应用程序。这个入门系列会包含用.NET语言（这里主要使用C#语言）开发Silverlight应用程序的各个方面，如UI控制、自定义控件、与HTML及Script语言的集成应用、HTTP网络存取等等。如果大家有什么感兴趣的话题也可以提出来。由于Silverlight 1.1还处于Alpha版本，.NET语言中关于Silverlight的一些API可能会与将来的正式版本中有些出入，但是大多数基本的东西还是不变的。

使用.NET语言开发Silverlight应用程序入门之一：了解项目结构

今天先让我们从Silverlight应用程序的.NET项目结构开始，看一下这样的一个项目中包含了些什么文件，这些文件分别是用来做什么的。了解这些内容有助于我们将来根据自己的需要制作更为复杂的项目内容。在开始介绍之前，请务必安装Silverlight 1.1 Alpha Refresh。

无论是Silverlight 1.0还是1.1版本，一个Silverlight项目总是包含以下几种文件：

嵌入Silverlight应用程序的html文件。
用来执行Silverlight应用程序载入工作的JavaScript文件。
定义和描述应用程序界面的XAML文件。

如果是.NET的项目，界面描述中所定义的新类型都包含在程序集（assembly）文件中。

我们可以用Microsoft Expression Blend 2 （目前最新的预览版本是September Preview）或者Visual Studio 2008 Beta2 （需安装好Silverlight Tool Alpha）来创建一个新.NET的项目。创建成功后，我们就可以看到一个Silverlight的.NET项目包含了如下的目录结构：

References目录
查看该目录，我们可以看到其中包含了许多　（.dll）文件，这些文件定义了项目中所引用的各托管类型。如果我们要使用其他自定义的类型，就可能需要手动添加包含该类型定义的.dll文件。若Silverlight插件中没有包含项目所引用的某些程序集文件，则应用程序用户需要下载这些程序集文件到本地。
Page.xaml
项目默认的主界面的XAML描述文件。
- Page.xaml.cs
  每个xaml文件之后都有一个对应的.NET语言文件。由于我们创建的是C#项目，所以其对应的文件为.cs文件。这个文件对.xaml文件中的所引用的.NET类型做了定义。通过编译之后，项目会生成程序集文件，供.xaml文件引用，且该程序集文件会随Silverlight应用程序一起下载到用户本地。
Silverlight.js
该文件包含了运行Silverlight应用程序之前所必需的各种操作，主要检查用户是否安装了符合版本需求的Silverlight。如果没有安装，则Silverlight应用程序所在的页面将会显示图标，提示用户先安装插件。这里我们不建议Silverlight的开发设计人员改变该.js文件的内容。
TestPage.html（Blend 2中创建的文件名为Default.html）
该文件为项目的默认主页，文件中引入了Silverlight的脚本文件来载入Silverlight应用程序。
- TestPage.html.js（Blend 2中的文件名为Default_html.js）
  该文件中定义了TestPage.html中调用的CreatSilverlight()方法来载入Silverlight应用程序。

让我们再具体的看一看其中一些文件所包含的内容：

TestPage.html

<html>
<head>
    <title>Silverlight Project Test Page </title>
    <script type="text/javascript" src="Silverlight.js" mce_src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js" mce_src="TestPage.html.js"></script>
    <style type="text/css">
    
        .silverlightHost { width: 640px; height: 480px; }
    </style>
</head>

<body>
    
    <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>

TestPage.html.js

//creatSilverlight函数用来执行载入Silverlight应用程序的操作及相关属性
function createSilverlight()
{
Silverlight.createObjectEx({
//指定了初始化载入的应用程序页面
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "1.1",
   enableHtmlAccess: "true"
  },
  events: {}
});

// 下面的函数是默认将键盘焦点集中在Silverlight应用程序上
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }
}

Page.xaml

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       
        Loaded="Page_Loaded"
       
        x:Class="SilverlightProjectStructure.Page;assembly=ClientBin/SilverlightProjectStructure.dll"
        Width="640"
        Height="480"
        Background="White"
        >
</Canvas>

Page.xaml.cs

public partial class Page : Canvas
    {
        //载入应用程序时的初始化方法，该方法中包含了所有页面初始化是所要做的操作
        public void Page_Loaded(object o, EventArgs e)
        {
            // 初始化变量时，以下方法必不可少
            InitializeComponent();

           //接下来指定其他所需的初始化操作……
        }
    }

创建第一个简单的应用程序

SilverlightShanghai — Fri, 26 Oct 2007 05:57:00 GMT

如果你还未尝试过制作Silverlight应用程序，但却对它感兴趣的话，那这篇文章将会是一个不错的起点。在这篇文章中，我们会用到创建一个Silverlight应用程序所要用到的最基本的工具和技巧，包括对XAML文件的操作，事件响应，动画制作等等。

I. 准备工作

要创建一个Silverlight应用程序，必须要安装的是Silverlight运行时，也就是Silverlight的浏览器插件程序。如果只是用JavaScript进行开发，可以安装Microsoft Silverlight 1.0 Release Candidate；如果开发过程需要用到.NET的编程语言，则需要安装Microsoft Silverlight 1.1 Alpha Refresh.

Silverlight的开发设计工作，即使用最简单的记事本也可以做到，但是如果使用以下开发设计工具，将会极大的增加设计开发Silverlight应用程序的效率：

开发人员工具：

· Microsoft Visual Studio 2008 Beta2
下一代开发工具

· Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta2
基于Microsoft Visual Studio的插件程序（add-on），用于创建Silverlight应用程序。

设计人员工具：

· Expression Blend 2 August Preview
为Silverlight创建丰富的用户交互的专业设计程序

· Expression Media Encoder Preview
用来创建和增强视频效果的工具

· Expression Design
Silverlight专业的图形设计工具

更多设计人员工具请访问Expression Studio官方网站。

II. 简单的“Hello World”Silverlight应用程序步骤详解

下面的篇幅将会详细阐述创建一个简单的“Hello World”应用程序的具体步骤。

1．在Visual Studio中新建项目

如果在Microsoft Visual Studio 2008中安装了Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta2，通过以下几步就可以轻松的创建一个Silverlight项目：

· 点击菜单栏FileàNewàProject，会弹出一个New Project对话框，根据自己对编程语言的喜好可以在Project Types中选择Visual C#或Visual Basic（此处选择的是Visual C#）。

· 如果是创建一个完整的应用程序，则在Templates中选择Silverlight Project。

· 在对话框的Name一栏中输入项目名，Location一栏中输入项目创建的位置，点击“OK”。

2．编辑XAML文件

在Microsoft Visual Studio Orcas中创建了一个新的Silverlight项目后，一个名为Page.xaml的文件会自动在Visual Studio中打开。通过在Page.xaml文件的<Canvas>标签后输入下面这个语句，可以在浏览器页面中得到一个简单的“Hello World”字样。（彩色字符为需要输入的语句，绿色字符不用输入）

</Canvas>

按Ctrl+F5则可运行这段代码。

3．用.NET语言加入事件处理

对应每一个xmal文件，都会有一个.NET语言相对应的代码文件，由于此处用的是Visual C#，因此对应于Page.xmal，可以在Solution Explorer的目录树下，找到Page.xmal.cs文件。

在继承于Canvas的Page类中，通过以下代码可以实现鼠标左键点击“Hello World”，使文字变成“I was pushed!”。

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

InitializeComponent();

MyMessage.MouseLeftButtonDown += new MouseEventHandler(MyMessage_MouseLeftButtonDown);

}

void MyMessage_MouseLeftButtonDown(object sender, MouseEventArgs arg)

{

MyMessage.Text = "I was pushed!";

}

4． 调试代码

在Visual Studio中调试Silverlight应用程序和调试其他应用一样简单。例如在“MyMessage.Text = "I was pushed!";”这一行首单击鼠标左键设置断点，然后选择菜单栏中DebutàStart Debugging，或者按F5键，即可进行调试。

当程序运行到断点处会自动暂停。此时可以查看断点处各个参数或属性的值，也可以通过Immediate Window，在调试模式下对代码做临时的修改以察看其效果。如在Immediate Window中输入以下代码，按回车键后，对已暂停的应用程序继续进行调试，则浏览器中的字体透明度会被调整为20%:

MyMessage.Opacity = .2;

5．在Microsoft Expression Blend中编辑动画效果

通过结合使用Microsoft Expression Blend，可以对UI、动画或交互性内容进行更有效的设计开发。且Microsoft Visual Studio Orcas与Microsoft Expression Blend可以协调工作。鼠标右键单击Page.xmal，在弹出菜单中选择Open in Expression Blend，则该项目会同时在Microsoft Expression Blend中打开。

· 设置背景颜色

在设计界面右侧Properties标签àBrushes中选择Solid Color Brush，用鼠标点选调色板，则可以更改应用程序的背景颜色；选择Gradient Brushes，则可以将背景颜色设置为渐变色。

· 添加动画效果

通过以下几步可以给“Hello World”添加旋转效果：

o 点击设计界面左侧Objects and Timeline中的箭头符号，并在弹出的对话框中点击“加号”（Create New Timeline）。

o 在弹出的Create Storyboard对话框中将时间轴的名字取为“Timeline1”，并选中Create as a Resource选项（这样我们稍候就可以用代码对该时间轴进行进一步操作），点击“OK”。

o 点击MyMessage这个TextBlock对象，并在Timeline面板中点击“加号”，即为MyMessage这个TextBlock在时间轴初始位置增加一个关键帧。

o 点击时间轴的0.5秒处，并添加关键帧。

o 将“Hello World”移动到设计界面的右下方，然后将鼠标置于字符串的左下方，使之成为一个折角双箭头。

o 拖动鼠标左键，使“Hello World”按顺时针方向旋转90度。

o 点击时间轴1秒处的位置，并添加关键帧。

o 继续逆时针旋转字符串，并使之旋转回原来的位置。

单击时间轴上方的Play按钮可以及时查看动画效果

6．用.NET语言对动画进行操作

由于用Microsoft Visual Studio Orcas与Microsoft Expression Blend同时打开了同一个项目，当项目在Microsoft Expression Blend中进行了修改并进行了保存之后，Microsoft Visual Studio Orcas中的项目也会对应更新。将Page.xaml.cs中的代码更新如下，则实现了对动画的操作：

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

InitializeComponent();

Timeline1.Completed += new EventHandler(Timeline1_Completed);

MyMessage.MouseLeftButtonDown += new MouseEventHandler(MyMessage_MouseLeftButtonDown);

}

void Timeline1_Completed(object sender, EventArgs arg)

{

MyMessage.Text = "The End!";

}

void MyMessage_MouseLeftButtonDown(object sender, MouseEventArgs arg)

{

//MyMessage.Text = "I was pushed!";

Timeline1.Begin();

}

按Ctrl+F5键则可看到其最终效果：当鼠标左键单击“Hello World”时，字符会移动旋转，并在结束后变成“The End”。

III. 参考资料

请下载Silverlight SDK以更多的文档（英文）和示例：

· Microsoft Silverlight 1.0 Software Development Kit Release Candidate

Silverlight 1.0 RC的SDK，包含了相关文档、示例，以及一个“Go Live”证书，用以商业应用程序的开发。

· Microsoft Silverlight 1.1 Software Development Kit Alpha Refresh

Silverlight 1.1 Alpha的SDK，包含了相关文档，以及示例。

走近Silverlight

SilverlightShanghai — Fri, 26 Oct 2007 05:51:00 GMT

在和大家一起讨论Silverlight之前，让我们先来简要地了解一下Silverlight吧。

一、什么是Silverlight

究竟什么是Silverlight？对不同的角色，Silverlight的定义或许会不一样。

对于互联网用户来说，Silverlight是一个安装简单的插件程序。用户只要安装了这个插件程序，就可以在Windows和Macintosh上多种浏览器中运行相应版本的Silverlight应用程序，享受视频分享、在线游戏、广告动画、交互丰富的网络服务等等。

对于开发设计人员而言，Silverlight是一种融合了微软的多种技术的Web呈现技术。它提供了一套开发框架，并通过使用基于向量的图像图层技术，支持任何尺寸图像的无缝整合，对基于ASP.NET、AJAX在内的Web开发环境实现了无缝连接。Silverlight使开发设计人员能够更好的协作，有效地创造出能在Windows和Macintosh上多种浏览器中运行的内容丰富、界面绚丽的Web应用程序——Silverlight应用程序。

简而言之，Silverlight是一个跨浏览器、跨平台的插件，为网络带来下一代基于.NET媒体体验，和丰富的交互式应用程序。对运行在Macintosh和Windows上主流浏览器，Silverlight提供了统一而丰富的用户体验。通过Silverlight这个小小的浏览器插件，视频、交互性内容，以及其他应用能完好的融合在一起。

二、Silverlight对视频媒体的支持

Silverlight为用户提供了低成本、高质量的流媒体解决方案。它采用荣获Emmy奖的Windows Media技术，使同等质量的视频传输流量下降了约46%，并与现有的Windows Media流量配置方案兼容。如果采用下一代Windows Server （Longhorn）系统中的IIS媒体包，流量还可能会进一步下降。

Silverlight的安装包本身已经包含了Windows Media的解码技术。因此，在客户端的操作系统中，不需要安装任何Windows Media Player等软件，就可以播放 WMV，VC-1，WMA和MP3等多种从高清质量到移动设备的视频以及音频。

Silverlight还提供了新的基于视频和动画的广告策略方案，可以在视频上增加视频、动画或其他交互性内容，使视频动画同步播放而不影响视频质量。

三、Silverlight与Web服务

作为一个客户端的插件，Silverlight对于服务端没有任何要求。无论是Windows+IIS+SQL Server+ASP.NET的WISA架构，或是Linux+Apache+MySql+PHP的LAMP架构，或者其他CGI架构，都可以使用Silverlight，而不用作特别配置。Silverlight还可以和现有的网站设计融洽共处。

Silverlight支持LINQ和LINQ to XML等技术，以及JSON，RSS，POX，REST等常见协议，从而可以方便的获得数据，实现服务与数据的混合。Silverlight的页面描述采用了基于文本的XAML文件格式，可以实现搜索引擎优化，使富交互式应用程序的内容能被索引并搜索到。而通过Windows Live提供的Silverlight Streaming，可以快速发布并集成软件服务和富媒体的内容。

四、Silverlight的开发与设计

Silverlight基于.NET框架提供了灵活的编程模型。Silverlight 1.1包含了WPF（Windows Presentation Foundation）的一个子集，利用Microsoft .NET Framework 3.0中的呈现技术 XAML使Silverlight和基于Windows应用程序的表现层保持一致。从版本1.1开始，Silverlight的开发支持JavaScript, .NET托管语言和动态语言等多种编程语言。

Silverlight还提供了一系列工具。通过Microsoft Expression Studio，设计人员可以创建出交互式的用户接口和富媒体体验，为视频媒体进行编码和发布，并创建出符合W3C标准的网络站点。而对于开发人员，Microsoft Visual Studio 2008提供了丰富编程语言支持，强大的跨平台调试功能。并通过Microsoft Intellisense协助开发人员进行客户端和服务端的快速编码开发。因此，无论是开发人员和设计人员，都可以运用已有的技巧和工具，将Silverlight集成到现有的网络应用中。

五、Silverlight的实际应用

虽然Silverlight目前还处于测试版本阶段，它已和国内外多家公司建立了合作关系。比如美国最大的棒球联盟MLB已采用Silverlight播放其网站上的部分视频。为20th Centry Fox、Sony Pictures Television等著名国际公司提供网络电视服务的Maven Networks也将把Silverlight带入自己的网络电视平台。作为2008年奥运会官方互联网赞助商的搜狐公司也与微软合作，打算使用Silverlight来完成互联网上的奥运火炬传递项目。相信不久，随着Silverlight 1.0的正式发布，互联网用户将会有更多的机会体验到Silverlight所带来的精彩的媒体体验和丰富的交互性内容。

六、Silverlight的相关支持

1．版本：Silverlight目前推出了1.0 RC和1.1 Alpha两个版本。Silverlight 1.0版本重点重点在于丰富的界面及视频体验，支持JavaScript的编程开发；而Silverlight 1.1除了包含Silverlight 1.0的特性之外，还支持对.NET托管语言以及动态语言进行Silverlight应用程序开发的。

2．操作系统：Silverlight目前所支持的操作系统包括：Windows Vista，Windows XP，Windows Server 2003，Mac OS X 10.4，以及Mac OS X Leopard；Silverlight 1.1即将支持Windows 2000操作系统。

3．浏览器：Silverlight目前支持的浏览器包括IE 6，IE 7，Firefox 2.0，Firefox 1.5，Safari 2.0。Silverlight 1.1即将支持Opera浏览器。

4．编程语言：Silverlight 1.0支持JavaScript，而Silverlight 1.1目前支持Visual C#, Visual Basic, Jscript和IronPython，很快将支持Ruby以及VBx的编程开发。

下图给开发人员提供了更完整的参考：

七、其他参考资料

关于更多Silverlight的内容，可以访问以下站点：

1．Silverlight全球官方社区 http://www.silverlight.net

2．Microsoft Silverlight官方主页 http://www.microsoft.com/silverlight

3．Microsoft Silverlight开发中心 http://msdn.microsoft.com/silverlight