本演练分步讲述如何使用 Microsoft Silverlight 创建一个简单时钟。下图所示为您将创建的时钟。

运行此示例.

下载此示例.

组成此时钟外观的向量图形是使用可扩展应用程序标记语言 (XAML) 创建的。XAML 类似于 HTML，但比它更强大且可扩展。您可以使用 Microsoft Visual Studio 或 Microsoft 记事本手动键入 XAML，也可以使用可视设计工具，例如 Microsoft Expression Blend。Expression Blend 通过创建基础 XAML 代码来工作，因此这两种方法所创建的时钟图形相同。

若要完成本演练的第一部分，请选择下列选项之一：

在下面两步中，您将添加动画和逻辑来使时钟工作。在 Microsoft Silverlight 中，可以使用浏览器解释语言（如 JavaScript），也可以使用托管代码（如 C# 或 VB .NET）。本演练将演示如何使用 C# 或 VB 添加动画和逻辑。若要了解有关使用 JavaScript 创建基于 Silverlight 的应用程序的更多信息，请参见 Silverlight 的 JavaScript API 或 Silverlight 的 JavaScript API 参考。

  先决条件

您需要使用以下组件（可从 Silverlight 下载站点获取）才能完成此演练：

  • Microsoft Silverlight 3。
  • Visual Studio 2008。
  • Microsoft Silverlight Tools for Visual Studio 2008。
  • Microsoft Expression Blend 2.5。

  使用 Expression Blend 创建时钟图形

Microsoft Expression Blend 可以提高创建基于 Silverlight 的应用程序的效率，对于设计图形和布局更是如此。

在本演练的这一节中，将使用 Expression Blend 创建时钟图形。

该时钟由下图中所示的图形元素组成。

这些图形是通过将简单元素排列在画布上创建成的。包括时钟的表盘、外边缘、斜边和阴影在内的所有圆形图形都是通过 Ellipse 元素创建的，而时钟指针是通过 Rectangle 元素创建的。

在 Expression Blend 中创建新项目
  1. 启动 Expression Blend。（单击"开始"，指向"所有程序"，指向"Microsoft Expression"，然后单击"Microsoft Expression Blend 2.5"。）
  2. 在"文件"菜单上单击"新建项目"。随即出现下面的对话框。
  3. 在"名称"框中键入 SilverlightClock。
  4. 在"语言"列表中，单击 C# 或 Visual Basic 以将其选作您的编程语言。
  5. 选择"Silverlight 3 应用程序"，再单击"确定"。
    这时，您就有了一个空的项目。如果按下"F5"运行该应用程序，结果只会看到一个空白网页。

时钟图形由一层层叠加形状构成，这些形状创建了时钟的总体外观。若要创建时钟，您需要按照如下方式来逐步构造时钟：从最底层（即时钟的阴影）开始，每次构造一层。

下图演示示例完成时的时钟阴影外观。

创建时钟的阴影
  1. 选择椭圆工具。
  2. 在画布上拖放椭圆以创建一个宽和高约为 330 像素的圆形。
  3. 更改该圆形的属性。单击"属性"选项卡，用黑色填充该圆形，并将其不透明度设置为 30%。

该圆形此时填充了半透明黑色，用于提供阴影效果。

  1. 将此椭圆的名称更改为 shadowEllipse。

下图显示示例完成时时钟的外边缘。

创建时钟的外边缘
  1. 绘制外边缘圆形。外边缘圆形与阴影圆形的大小相同。因此，只通过复制阴影圆形即可创建外边缘圆形。为此，请选择阴影圆形，按 Ctrl+C 复制，然后按 Ctrl+V 粘贴副本。将此椭圆重命名为 outerRimEllipse。
    现在使用简单渐变填充 outerRimEllipse。在 Expression Blend 中创建渐变包括以下几个步骤。
  2. 创建简单渐变。
  3. 移动右渐变停止点以使渐变集中于左侧。注意：您可能必须更改渐变的方向，以使其从左侧渐变到右侧（请参见下面的步骤 5）。
  4. 将 outerRimEllipse 略向左上方移动，以便可以看到阴影。在右下方，您会注意到 shadowEllipse 有一个长条，这样即产生了阴影效果。
  5. 更改线性渐变的方向，使它的走向为从左上到右下（而不是在圆形上方从左到右）。

下图所示为渐变方向。

现在将创建时钟的斜边。用来生成斜边的圆形类似于 outerRimEllipse，只是尺寸略小一些。下图演示示例完成时的斜边。

创建时钟的斜边
  1. 创建 outerRimEllipse 的副本。为此，请选择 outerRimEllipse，按 Ctrl+C 复制，然后按 Ctrl+V 粘贴它。将此新椭圆命名为 bevelEllipse。
  2. 选择 bevelEllipse，然后将其大小调整到约 290 像素高和宽，以使其略小于 outerRimEllipse。
  3. 将 bevelEllipse 定位到 outerRimEllipse 的中心。

现在使用线性渐变填充 BevelEllipse。

  1. 创建基本渐变。由于 bevelEllipse 是 outerRimEllipse 的副本，因此它沿袭了 outerRimEllipse 的渐变。
  2. 将左渐变停止点的颜色更改为 #FF2F2F32，将右渐变停止点的颜色更改为 #FFE4E5F4。
  3. 将右渐变停止点重新滑动回渐变的右端。

此渐变的走向与应用于 outerRimEllipse 的渐变相同。不过，bevelEllipse 渐变沿从左上到右下走向的明暗变化是从暗到明，这与应用于 outerRimEllipse 的渐变相反。下图演示此渐变的方向。

接下来，将创建时钟的表盘。用来生成表盘的圆形类似于 bevelEllipse，只是尺寸略小一些。下图演示示例完成时的时钟表盘。

创建时钟的表盘
  1. 创建 bevelEllipse 的副本。为此，请选择 bevelEllipse，按 Ctrl+C 复制，然后按 Ctrl+V 粘贴它。将此新椭圆命名为 faceEllipse。
  2. 选择 faceEllipse，然后将其大小调整到约 270 像素高和宽，以使其略小于 bevelEllipse。
  3. 将 faceEllipse 定位到 outerRimEllipse 的中心。
  4. 将 faceEllipse 的填充色更改为黑色。

注意，添加此圆形将使斜边变为可见。

接下来，将创建时钟的中心圆。下图演示示例完成时的中心圆。

时钟的中心圆

创建时钟的中心圆
  1. 选择椭圆工具，然后在时钟表盘上拖动此新椭圆。
  2. 将此新椭圆的名称更改为 centerEllipse。
  3. 将 centerEllipse 的高度和宽度都设置为 30。
  4. 将笔画粗细设置为 8，笔画设置为绿色。
  5. 将中心圆定位到时钟表盘的中心位置。若要找到 faceEllipse 的中心，请选择 faceEllipse 并查找其中心点。然后选择 centerCircle，通过拖放或使用箭头键在 faceEllipse 的中心点上方移动 centerCircle。

接下来，将创建时钟的指针。

创建时钟的指针
  1. 选择矩形工具。
  2. 创建秒针。秒针为一条红色的细线。拖动一条线使其指向 12 点位置。将此条线命名为 secondHand，并将其笔画粗细设置为 5，高度设置为 80，填充色设置为红色。
  3. 将变换中心点移动到时钟表盘的中心：变换中心点是应用变换时所参照的点。稍后将对时钟指针进行动画处理，使其绕时钟中心旋转。因此，需要将该线的中心点移动到时钟表盘的中心。若要找到该线的中心点，请拖动该矩形的宽度边，直至在该矩形的中心可以看到一个白点。然后将此白点拖动到中心圆的中心位置。
  4. 按照秒针创建步骤 2 和 3 来创建分针。
  • 使该线的长度与 secondHand 大致相同，并将它置于 secondHand 之上，指向 12 点位置。将该线命名为 minuteHand。
  • 将 minuteHand 的笔画粗细设置为 8（比 secondHand 稍粗），将其笔画颜色设置为绿色。
  • 按照步骤 3 中的说明将 minuteHand 的中心点置于时钟表盘的中心。
  1. 按照前面秒针和分针的创建步骤来创建时针。
  • 使该线的长度约为其他时钟指针的 2/3，并将其置于其他时钟指针之上，指向 12 点位置。将该线命名为 hourHand。
  • 将 hourHand 的笔画粗细设置为 10（比其他指针稍粗），将其笔画颜色设置为绿色。
  • 将 hourHand 的中心点置于时钟表盘的中心。
  1. 稍后将添加动画，使这些指针绕时钟中心旋转。通过以下方式来实现：对应用于时钟指针的 RotateTransform 元素的 Angle 属性进行动画处理。由于动画必须正确定位 RotateTransform，因此您必须对应用于每个时钟指针的 RotateTransform 元素进行命名。为此，请在 Expression Blend 中打开 XAML 编辑视图。

时钟指针是通过 Rectangle 元素创建的。在 XAML 中找到时钟指针矩形。如果已有 RotateTransform 应用于该路径，请使用下面代码中的语法命名该路径，而暂时不考虑其余代码。将这些元素分别命名为 secondHandTransform、minuteHandTransform 和 hourHandTransform。如果此时不存在 RotateTransform，请添加一个，如下面的代码所示。

复制代码

此时您已创建了时钟图形。请跳过下一节。接下来，将添加使时钟工作所需的动画和逻辑。

  使用 XAML 创建时钟图形

如果不使用 Microsoft Expression Blend，则可以使用 XAML 这种标记语言直接创建时钟图形。本演练的这一节演示如何实现。

如果使用 Visual Studio 2008，则直接使用代码创建基于 Silverlight 的应用程序就会变得相当轻松。

在 Visual Studio 2008 中创建新的 Silverlight 项目
  • 如果还未安装 Visual Studio 2008，请先安装。
  • 如果还未安装 Microsoft Silverlight Tools for Visual Studio 2008，请先安装。该工具提供插入到 Visual Studio 中的 Silverlight 模板。
  • 打开 Visual Studio。在"文件"菜单上，单击"新建"，然后单击"项目"。
  • 若要使用 C#，请单击左侧窗格中的"Visual C#"和"Silverlight"，然后单击"模板"下的"Silverlight 项目"。若要使用 Visual Basic，请单击左侧窗格中的"Visual Basic"和"Silverlight"，然后单击"模板"下的"Silverlight 应用程序"。将项目命名为 SilverlightClock。

单击"确定"后可以看到一个对话框。选中"动态生成 HTML 测试页以承载此项目中的 Silverlight"单选按钮，然后按"确定"。这将创建一个空白 Silverlight 项目。按"F5"在调试模式下运行该项目。根据预期，将打开一个空白网页。若要结束调试模式，可单击菜单中的"调试"/"停止调试"或关闭浏览器窗口。

让我们先来大致看一下如何创建时钟的图形。该时钟由下图中所示的图形元素组成。

这些图形是通过将简单元素排列在画布上创建成的。诸如时钟表盘、外边缘、斜边和阴影的所有圆形图形都是通过 Ellipse 元素创建的，而时钟指针是通过简单的 Rectangle 元素创建的。时钟图形由一层层叠加形状构成，这些形状创建了时钟的总体外观。若要创建时钟，您需要按照如下方式来逐步构造时钟：从最底层（即时钟的阴影）开始，每次构造一层。

下图演示示例完成时的时钟阴影外观。

创建时钟的阴影
  • 将下面的代码复制到 XAML 页中。

    复制代码 下图显示了结果。

请注意，填充设置为黑色并且不透明度设置为 0.3 (30%)。这使得圆形的填充为半透明，类似阴影。宽度和高度以及边距可以是任意值。这些属性只是指定网格内圆形的大小和位置。

说明：

基于 Silverlight 的应用程序中的大多数 XAML 代码不受您使用的过程语言（例如 C#、Visual Basic 或 JavaScript）的影响。

接下来，将添加时钟的外边缘。下图显示示例完成时的外边缘。

添加外边缘
  • 将下面的代码复制到 XAML 页用于创建阴影的椭圆后边：

    复制代码 下图显示了结果。

从图中可以看到，阴影圆位于稍靠右下方位置，使得从下面只能看到该圆的一个长条。这便产生了阴影效果。此外，请注意对外边缘圆应用了线性渐变。此线性渐变的结果是创建了光线来自于该圆的左上方这种外观。下图演示了渐变方向。

接下来，将添加时钟的斜边。下图演示示例完成时的斜边。

为时钟添加斜边
  • 将下面的代码复制到 XAML 页用于创建外边缘的椭圆后边：

    复制代码 下图显示了结果。

该圆略小于用于创建外边缘的圆，且直接置于外边缘圆的上方。此外，该圆也应用了线性渐变，但此渐变沿从左上到右下走向的明暗变化是从暗到明。下图演示了此渐变的方向。

接下来，将添加时钟的表盘。下图显示示例完成时的表盘。

添加时钟表盘
  • 将下面的代码复制到 XAML 文件中您添加的最后一个椭圆后边。

    复制代码 下图显示了结果。

时钟表盘只是一个填充了黑色的圆，略小于斜边圆，且直接位于其他圆上方。此外请注意，添加此圆后斜边变为可见。

最后一步是添加中心圆和时钟指针。

添加中心圆和指针
  • 将下面的代码复制到 XAML 文件中您最后添加的代码后边。

    复制代码 下图显示了结果。此图中秒针、分针和时针重叠。

在前面的代码中，分针、时针和秒针对确定方位的属性（例如 Margin）共用相同的值。但这些指针在尺寸和/或颜色上又各不相同（例如，由于时针具有最大的 StrokeThickness 值，因此它最粗）。

请注意，所有指针都应用了 RotateTransform。通过该变换可以旋转指针的角度。在下一节中，将对此变换的角度进行动画处理，从而使时钟指针移动以显示时间。每个 RotateTransform 元素都有一个名称（例如 x:Name="hourHandTransform"）。这样是为了可以将动画与变换相关联。此外请注意，所有指针都具有 RenderTransformOrigin 值。此属性用于指定进行各个变换时所参照的画布上的点。由于将要绕时钟中心旋转各个指针，因此将各指针 RenderTransform 属性的值均指定为时钟表盘的中心。

在下一节中，将添加使时钟工作所需的动画和逻辑

  添加动画

无论是使用 Expression Blend 创建时钟图形，还是直接在 XAML 标记中实现，此时都应生成类似于下图所示的时钟。注意此图中秒针、分针和时针重叠。

在本节中，将对时钟指针的旋转变换应用动画。这些旋转动画将使时钟指针绕时钟中心旋转（与您预期的时钟指针的动作一样）。通过指定动画的时间，可以使指针在与计算机上的当前时间同步的情况下绕时钟旋转。

添加动画
  1. 打开 XAML 文件。
    如果在前面的任务中使用的是 Expression Blend，请打开该项目的 XAML 文件并单击"XAML"选项卡。

如果在前面的任务中使用的是 Visual Studio 或其他编辑程序，请从该程序打开 XAML 页。

  1. 将下面的代码添加到根 UserControl 元素后，以添加时钟指针动画。

    复制代码 此代码定义一个包含时钟指针动画的 Storyboard。若要启动 Storyboard，请使用 Loaded 事件对演示图板调用 Begin 方法。为此，请先将 Loaded 事件附加到包含时钟图形的网格，

    复制代码 然后创建一个用来启动 Storyboard 的事件处理程序。为了添加以下处理程序，必须打开代码隐藏文件。
    Visual Basic

    复制代码 Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs) ' Start the storyboard. clockStoryboard.Begin()End Sub C#

    复制代码 private void SetAndStartClock(object sender, EventArgs e){ // Start the storyboard. clockStoryboard.Begin();} Storyboard 中的所有这些动画都针对相应时钟指针变换的 Angle 属性。每个动画的 Duration 属性都根据该动画的期望速度进行设置。例如，对于时针变换，动画的持续时间设置为 12 小时，这是时针绕时钟整一周所用的时间。所有这些动画的 RepeatBehavior 都设置为 "Forever"。因此，在动画完成时（时针环绕时针一周），它将从头再次开始并且无限期地重复。

现在运行该应用程序。请注意，秒针开始绕时钟移动。其他两个指针也移动，但它们移动得太慢，因此察觉不到。

  使时钟开始工作

尽管时钟指针的移动速率似乎符合要求，但时钟未设置为与当前时间同步。若要设置时钟，需要使用诸如 C# 或 Visual Basic 之类的过程代码添加某些逻辑。

使时钟开始工作
  1. 打开代码隐藏文件：
  • 如果使用了 Expression Blend 来设计图形，则请从"项目"面板打开 C# 文件。
  • 如果对应用程序使用了 Visual Studio 或其他编辑程序，请从该程序打开 C# 或 VB 页。
  1. 将下面的代码复制到代码隐藏文件，以添加用于设置时钟的逻辑。 Visual Basic 复制代码 
Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs)    ' The current date and time.    Dim currentDate As Date = DateTime.Now    ' Find the appropriate angle (in degrees) for the hour hand    ' based on the current time.    Dim hourangle As Double = (((CType(currentDate.Hour, Single) / 12) * 360) + (currentDate.Minute / 2))    ' The same as for the minute angle.
    Dim minangle As Double = ((CType(currentDate.Minute, Single) / 60) * 360)

    ' The same for the second angle.
    Dim secangle As Double = ((CType(currentDate.Second, Single) / 60) * 360)

    ' Set the beginning of the animation (From property) to the angle 
    ' corresponging to the current time.
    hourAnimation.From = hourangle

    ' Set the end of the animation (To property)to the angle 
    ' corresponding to the current time PLUS 360 degrees. Thus, the
    ' animation will end after the clock hand moves around the clock 
    ' once. Note: The RepeatBehavior property of the animation is set
    ' to "Forever" so the animation will begin again as soon as it completes.
    hourAnimation.To = (hourangle + 360)

    ' Same as with the hour animation.
    minuteAnimation.From = minangle
    minuteAnimation.To = (minangle + 360)

    ' Same as with the hour animation.
    secondAnimation.From = secangle
    secondAnimation.To = (secangle + 360)

    ' Start the storyboard.
    clockStoryboard.Begin()

End Sub C# 

复制代码 
private void SetAndStartClock(object sender, EventArgs e){    // The current date and time.    System.DateTime currentDate = DateTime.Now;    // Find the appropriate angle (in degrees) for the hour hand    // based on the current time.    double hourangle = (((float)currentDate.Hour) / 12) * 360 + currentDate.Minute / 2;


    // The same as for the minute angle.
    double minangle = (((float)currentDate.Minute) / 60) * 360;

    // The same for the second angle.
    double secangle = (((float)currentDate.Second) / 60) * 360;

    // Set the beginning of the animation (From property) to the angle 
    // corresponging to the current time.
    hourAnimation.From = hourangle;

    // Set the end of the animation (To property)to the angle 
    // corresponding to the current time PLUS 360 degrees. Thus, the
    // animation will end after the clock hand moves around the clock 
    // once. Note: The RepeatBehavior property of the animation is set
    // to "Forever" so the animation will begin again as soon as it completes.
    hourAnimation.To = hourangle + 360;

    // Same as with the hour animation.
    minuteAnimation.From = minangle;
    minuteAnimation.To = minangle + 360;

    // Same as with the hour animation.
    secondAnimation.From = secangle;
    secondAnimation.To = secangle + 360;

    // Start the storyboard.
    clockStoryboard.Begin();
} 
复制代码

现在时钟已经完成！按"F5"键盘键运行该应用程序。

  在 Visual Studio 2008 中调试 Silverlight 应用程序

可以使用 Visual Studio 创建断点并单步执行本演练中所示的 C# 或 VB 代码。若要创建断点，请单击要在其中设置断点的代码行的左侧空白处。运行应用程序时，若到达指定的断点处，Visual Studio 将使应用程序暂停。之后可以通过按"F11"键或单击顶部菜单中的"调试"/"单步执行"来单步执行每行代码。

  结束语

在本演练中，您学习了如何在 Silverlight 中完成以下任务：

  • 设计用于创建实际时钟外观的重叠向量图形。
  • 使用渐变创建阴影和深度效果。
  • 使用动画为时钟添加功能。
  • 使用代码将时钟设置为正确的时间。
  • 学习如何使用 XAML 和 Microsoft Expression Blend。


阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6