所示：



 图5 使用Expression Blend 2编辑Page.xaml文件

    现在让我们在这个页中加入一些控件。首先，我们将在Page.xaml页中建立一个圆角的按钮。如图6所示。在这个按钮中，我们还加入了一个文本区，可以使用它来演示一些信息。

 图6 在Page.xaml中建立一个圆角按钮和一个文本区

单击如图7的画布控件，将它加到Page.xaml中。这个画布将作为所有控件的载体。



         图7将一个画布加到Page.xaml中
    为了在按钮上建立一个边框，在页面上加一个长方形控件，并覆盖我们刚才加的那个画布，如图8所示：


 图8 向画布中加入一个长方形框

    为了建立有四个圆角的方框，单击Direction Selection图标，然后选择我们刚刚加的Rectangle控件，如图9所示。并设黑这个控件的属性如下：

图9 设置背景颜色为黄色

    为了在按钮中显示文本信息，我们需要在画布上加一个TextBlock控件，并设置字体为Comic Sans MS。

图10 在画布中加入一个TextBlock

    为了使按钮显示当前时间，我们需要每秒更新一次时间信息。为了完成这个任务，需要在XAML文件中加入一个Timeline。首先，单击Objects和Timeline组中的>箭头，然后按+按钮，如图11所示：

图12 加完Timeline后的XAML文件效果

    当我们现在返回到Visual Studio2008后，由于Page.xaml在外部被Expression Blend编辑过了，因此，VS2008会询问是否要重新装载Page.xaml文件。一但我们重新转载这个文件，就会得到以下的XAML内容：

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

<Canvas Width="189" Height="44" Canvas.Left="8" Canvas.Top="8">
        <Rectangle Width="189" Height="44" Fill="#FFF4FB04"
Stroke="#FF000000" StrokeThickness="3" RadiusX="8"
RadiusY="8"/>
        <TextBlock Width="168" Height="23" Canvas.Left="10"
Canvas.Top="11" Text="TextBlock" TextWrapping="Wrap"
FontFamily="Comic Sans MS"/>
    </Canvas>
</Canvas>

图13 在Expression Blend2中切换设计器和XAML视图

    在建立完UI后，我们就可以为其写一些代码使其做一引起事情，如在按钮上显示当前时间。双击Solution Explorer中的Page.xaml.vb文件,代码将在编辑器中显示。在Page_Loadec()方法中，加入以下代码：

Partial Public Class Page
Inherits Canvas
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
        InitializeComponent()
Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))
Me.Timeline1.Begin()
End Sub

    在上面的代码中，Timeline1每秒触发了一个Completed事件。Timeline对象类似于Windows开发人员熟悉的Timer控件。Begin()方法开始倒计时，在一秒之后，Completed事件被触发。

    下一步是服务Completed事件，这一点非常容易做到，只需要在代码编辑器的上部选择Timeline1对象，然后选择相应的Completed事件，如图14所示。

图14 为Completed事件建立一个事件处理方法

    Completed事件的代码如下：

Private Sub Timeline1_Completed( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Timeline1.Completed
Dim textBlk As TextBlock = Me.btnTime.Children(1)
textBlk.Text = Now.ToString
Me.Timeline1.Begin()
End Sub
End Class

我们可以对从画布上得到的TextBlock控件的Text属性设置当前的时间。这个画布有两个孩子：

Children(0): Rectangle control

Children(1): TextBlock control

    在显示完时间后，我们可以再次调用Begin()方法来进行倒记数。最后在Visual Studio 2008中按F5，我们会看到在IE中显示的Silverlight应用程序。如果我们在FireFox中转载这个例子，它将显示同样的效果，如图15所示。按钮将每秒更新一次时间。

 图15 在IE和FireFox中测试应用程序

<Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard x:Name="Timeline1"/>
      </BeginStoryboard>
        <BeginStoryboard>
            <Storyboard x:Name="Timeline2"/>
        </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>

 在Page_Loaded()子程序中，为第二个Timerline加一个新了时间间隔：

 Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
        InitializeComponent()
' 显示时间
        Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))
Me.Timeline1.Begin()
' 旋转按钮
        Me.Timeline2.Duration = New Duration(New TimeSpan(100))
Me.Timeline2.Begin()
End Sub

    从上面的代码可以看出，设置了Timeline2的间隔时间为100毫秒。也就是说，第0.1秒，Timeline2引发一次Completed事件，在这个Completed事件中，我们将调用PerformTransormation()子程序。Completed事件的代码如下：

Private Sub Timeline2_Completed( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Timeline2.Completed
PerformTransformation()
Me.Timeline2.Begin()
End Sub

这个子程序为了执行旋转动作，使用了RotateTransform对象。在这里，每旋转一次是一度。PerformTransformation方法的代码如下：

Private Sub PerformTransformation()
' 使用旋转对象
        Dim rt As New RotateTransform
' 定义旋转信息
        With rt
.Angle = degrees
.CenterX = 50
.CenterY = 50
End With
' 增加旋转的度数
        degrees += 1
' 旋转按钮
        btnTime.RenderTransform = rt
End Sub

 另外，当用户单击按钮时，按钮将重新回到它最初开始旋转的的位置：单击事件代码如下：

Private Sub btnTime_MouseLeftButtonDown()Sub btnTime_MouseLeftButtonDown( _
   ByVal sender As Object, _
   ByVal e As System.Windows.Input.MouseEventArgs) _
   Handles btnTime.MouseLeftButtonDown
        degrees = 0
        PerformTransformation()
    End Sub

图16 旋转按钮

    首先，在硬盘上建立一个目录，如C:\MyFirstSilverlightApp。建立一个叫Default.html的HTML页，并输入如下的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Silverlight Project Test Page </title>

<script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="Default.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(在Visual Studio 2008工程中)中复制，并粘贴到Detfault.html中。其中重要的内容被用粗体加亮。
    这个HTML引用了两个脚本文件：Silverlight.js和Default.html.js。象上面一样，我们也可以直接从Visual Studio 2008中复制它们的内容（在复制之后，需将TestPage.html.js复制到Default.html.js）。

    默认情况下，Default.html.js文件使用Page.xaml为我们的应用程序保存UI组件。因此，需要从Visual Studio 2008工程中复制Page.xaml到C:\MyFirstSilverlightApp文件夹。

 

    如果我们查看Page.xaml的内容，我们可以看将里面引用了我们编译的dll：OurFirstSilverlightProject.dll，代码如下：

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

因此，需要在C:\MyFirstSilverlightApp中建立一个新的文件夹ClientBin，并复制dll到这个文件夹。图17显示了C:\MyFirstSilverlightApp中的目录结构。我们可以看到，里面并没有源代码文件。

 图17 C:\MyFirstSilverlightApp文件夹中的目录结构

    我们需要将C:\MyFirstSilverlightApp设成IIS的虚拟目录。在设完虚拟目录后，我们可以使用如下的url来测试Sliverlight程序：

http://localhost/Silverlight/default.html.

    我们到现在为止已经知道如何使用Visual Studio 2008来建立Silverlight应用程序了。我们使用XAML来定义Silverlight应用程序，这个可以在Visual Studio 2008、Expression Blend 2中自动产生，或者使用手工方式建立。最后希望本文可以使读者对Silverlight应用程序更感兴趣，并继续深入研究下去。