[演练]使用Expression Blend或代码创建Silverlight时钟

概述  本演练分步讲述如何使用 Microsoft Silverlight 创建一个简单时钟。下图所示为您将创建的时钟。 运行此示例. 下载此示例. 组成此时钟外观的向量图形是使用可扩展应用程序标记语言 (XAML) 创建的。XAML 类似于 HTML，但比它更强大且可扩展。您可以使用 Microsoft Visual Studio 或 Microsoft 记事本手动键入 XAML，也可以使用可视设计

 

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

运行此示例.

下载此示例.

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

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

使用 Microsoft 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 @R_301_3725@ Blend 2.5。

  使用 @R_301_3725@ Blend 创建时钟图形

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

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

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

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

在 @R_301_3725@ Blend 中创建新项目

启动 @R_301_3725@ Blend。（单击"开始"，指向"所有程序"，指向"Microsoft @R_301_3725@"，然后单击"Microsoft @R_301_3725@ Blend 2.5"。）

在"文件"菜单上单击"新建项目"。随即出现下面的对话框。

在"名称"框中键入 SilverlightClock。

在"语言"列表中，单击 C# 或 Visual Basic 以将其选作您的编程语言。

选择"Silverlight 3 应用程序"，再单击"确定"。

这时，您就有了一个空的项目。如果按下"F5"运行该应用程序，结果只会看到一个空白网页。

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

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

创建时钟的阴影

选择椭圆工具。

在画布上拖放椭圆以创建一个宽和高约为 330 像素的圆形。

更改该圆形的属性。单击"属性"选项卡，用黑色填充该圆形，并将其不透明度设置为 30%。

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

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

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

创建时钟的外边缘

绘制外边缘圆形。外边缘圆形与阴影圆形的大小相同。因此，只通过复制阴影圆形即可创建外边缘圆形。为此，请选择阴影圆形，按 Ctrl+C 复制，然后按 Ctrl+V 粘贴副本。将此椭圆重命名为 outerRimEllipse。

现在使用简单渐变填充 outerRimEllipse。在 @R_301_3725@ Blend 中创建渐变包括以下几个步骤。

创建简单渐变。

移动右渐变停止点以使渐变集中于左侧。注意：您可能必须更改渐变的方向，以使其从左侧渐变到右侧（请参见下面的步骤 5）。

将 outerRimEllipse 略向左上方移动，以便可以看到阴影。在右下方，您会注意到 shadowEllipse 有一个长条，这样即产生了阴影效果。

更改线性渐变的方向，使它的走向为从左上到右下（而不是在圆形上方从左到右）。

下图所示为渐变方向。

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

创建时钟的斜边

创建 outerRimEllipse 的副本。为此，请选择 outerRimEllipse，按 Ctrl+C 复制，然后按 Ctrl+V 粘贴它。将此新椭圆命名为 bevelEllipse。

选择 bevelEllipse，然后将其大小调整到约 290 像素高和宽，以使其略小于 outerRimEllipse。

将 bevelEllipse 定位到 outerRimEllipse 的中心。

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

创建基本渐变。由于 bevelEllipse 是 outerRimEllipse 的副本，因此它沿袭了 outerRimEllipse 的渐变。

将左渐变停止点的颜色更改为 #FF2F2F32，将右渐变停止点的颜色更改为 #FFE4E5F4。

将右渐变停止点重新滑动回渐变的右端。

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

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

创建时钟的表盘

创建 bevelEllipse 的副本。为此，请选择 bevelEllipse，按 Ctrl+C 复制，然后按 Ctrl+V 粘贴它。将此新椭圆命名为 faceEllipse。

选择 faceEllipse，然后将其大小调整到约 270 像素高和宽，以使其略小于 bevelEllipse。

将 faceEllipse 定位到 outerRimEllipse 的中心。

将 faceEllipse 的填充色更改为黑色。

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

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

时钟的中心圆

创建时钟的中心圆

选择椭圆工具，然后在时钟表盘上拖动此新椭圆。

将此新椭圆的名称更改为 centerEllipse。

将 centerEllipse 的高度和宽度都设置为 30。

将笔画粗细设置为 8，笔画设置为绿色。

将中心圆定位到时钟表盘的中心位置。若要找到 faceEllipse 的中心，请选择 faceEllipse 并查找其中心点。然后选择 centerCircle，通过拖放或使用箭头键在 faceEllipse 的中心点上方移动 centerCircle。

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

创建时钟的指针

选择矩形工具。

创建秒针。秒针为一条红色的细线。拖动一条线使其指向 12 点位置。将此条线命名为 secondHand，并将其笔画粗细设置为 5，高度设置为 80，填充色设置为红色。

将变换中心点移动到时钟表盘的中心：变换中心点是应用变换时所参照的点。稍后将对时钟指针进行动画处理，使其绕时钟中心旋转。因此，需要将该线的中心点移动到时钟表盘的中心。若要找到该线的中心点，请拖动该矩形的宽度边，直至在该矩形的中心可以看到一个白点。然后将此白点拖动到中心圆的中心位置。

按照秒针创建步骤 2 和 3 来创建分针。

使该线的长度与 secondHand 大致相同，并将它置于 secondHand 之上，指向 12 点位置。将该线命名为 minuteHand。

将 minuteHand 的笔画粗细设置为 8（比 secondHand 稍粗），将其笔画颜色设置为绿色。

按照步骤 3 中的说明将 minuteHand 的中心点置于时钟表盘的中心。

按照前面秒针和分针的创建步骤来创建时针。

使该线的长度约为其他时钟指针的 2/3，并将其置于其他时钟指针之上，指向 12 点位置。将该线命名为 hourHand。

将 hourHand 的笔画粗细设置为 10（比其他指针稍粗），将其笔画颜色设置为绿色。

将 hourHand 的中心点置于时钟表盘的中心。

稍后将添加动画，使这些指针绕时钟中心旋转。通过以下方式来实现：对应用于时钟指针的 RotateTransform 元素的 Angle 属性进行动画处理。由于动画必须正确定位 RotateTransform，因此您必须对应用于每个时钟指针的 RotateTransform 元素进行命名。为此，请在 @R_301_3725@ Blend 中打开 XAML 编辑视图。

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

复制代码

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

  使用 XAML 创建时钟图形

如果不使用 Microsoft @R_301_3725@ 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 属性的值均指定为时钟表盘的中心。

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

  添加动画

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

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

添加动画

打开 XAML 文件。

如果在前面的任务中使用的是 @R_301_3725@ Blend，请打开该项目的 XAML 文件并单击"XAML"选项卡。

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

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

复制代码

      @H_419_802@

此代码定义一个包含时钟指针动画的 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 之类的过程代码添加某些逻辑。

使时钟开始工作

打开代码隐藏文件：

如果使用了 @R_301_3725@ Blend 来设计图形，则请从"项目"面板打开 C# 文件。

如果对应用程序使用了 Visual Studio 或其他编辑程序，请从该程序打开 C# 或 VB 页。

将下面的代码复制到代码隐藏文件，以添加用于设置时钟的逻辑。

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 @R_301_3725@ Blend。

  请参见

其他资源

演练：创建您的第一个 Silverlight 应用程序

总结

以上是内存溢出为你收集整理的[演练]使用Expression Blend或代码创建Silverlight时钟全部内容，希望文章能够帮你解决[演练]使用Expression Blend或代码创建Silverlight时钟所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。