使用 Expression Blend 或 Visual Studio 创建 Silverlight 时钟.docx

窗体顶端演练：使用 Expression Blend 或 Visual Studio 创建 Silverlight 时钟在 Silverlight 中，您可以使用可扩展标记语言创建用户界面 (UI) 元素。若要编写 XAML，您可以使用可视化设计工具（如 Expression Blend），也可以使用 Visual Studio。本演练向您说明如何通过使用 Expression Blend 和 Visual Studio 在 Silverlight 中创建简单的时钟。下图所示为您将创建的时钟。如果您使用 Expression Blend，则可以在设计器中直观地创建图形。如果您使用 Visual Studio，则可以通过在 XAML 中键入内容来创建图形。在创建了组成时钟外观的图形之后，您就可以添加使时钟工作所需的动画和逻辑。使用 Expression Blend 创建时钟 Expression Blend 可以提高创建 Silverlight 应用程序的效率，对于设计图形和布局更是如此。在本节中，您将通过使用 Expression Blend 来创建时钟。该时钟由下图中所示的图形元素组成。这些图形是通过将简单元素排列在 Grid 上创建成的。包括时钟的表盘、外边缘、斜边和阴影在内的所有圆形图形都是通过 Ellipse 元素创建的，而时钟指针是通过 Rectangle 元素创建的。在 Expression Blend 中创建新的 Silverlight 应用程序项目1. 启动 Expression Blend。如果显示启动窗体，则单击“关闭”。2. 在“文件”菜单上，单击“新建项目”。将显示“新建项目”对话框。3. 在“项目类型”窗格中，选择“Silverlight”。4. 在项目列表中，选择“Silverlight 应用程序”。5. 在名称框中键入 SilverlightClock。6. 在“语言”列表中，选择“Visual Basic”或“Visual C#”。7. 在“版本”列表中，选择“4.0”。8. 单击“确定”创建项目。接下来，将设置图形板的大小。9. 在“对象和时间线”面板中，选择“UserControl”。10. 在“属性”面板中的“布局”之下，将“宽度”和“高度”设置为 400。更改图形板的大小。这时，您就有了一个空的项目。如果按下F5运行该应用程序，结果只会看到一个空白网页。时钟图形由一层层叠加形状构成，这些形状创建了时钟的总体外观。若要创建时钟，您需要按照如下方式来逐步构造时钟：从最底层（即时钟的阴影）开始，每次构造一层。创建时钟的阴影1. 在“工具”面板中，右键单击“矩形”工具并单击“椭圆”。2. 在图形板上，绘制一个宽和高约为 330 像素的椭圆。当您绘图时，请按 Shift 键以保持宽度和高度相等。3. 如果您需要重新确定椭圆的位置，则在“工具”面板中，单击“选择”工具并重新确定椭圆位置。接下来，您将更改椭圆属性。4. 在“属性”面板的“名称”框中，将椭圆的名称设置为 shadowEllipse。5. 在“属性”面板的“画笔”下，单击“填充”，然后单击“纯色画笔”。6. 在颜色“编辑器”中，将颜色设置为黑色。7. 在“外观”之下将“不透明度”设置为 30%。该椭圆此时填充了半透明黑色，用于提供阴影效果。8. 在文件菜单上单击全部保存。接下来，将创建时钟的外边缘。因为外边缘与阴影椭圆的大小相同，所以您只需通过复制阴影椭圆就可以创建外边缘。创建时钟的外边缘1. 在“工具”面板中，单击“选择”工具。2. 在图形板上，单击阴影椭圆以确保选中此椭圆。3. 在“编辑”菜单上，选择“复制”或按 Ctrl+C。4. 在“编辑”菜单上，选择“粘贴”或按 Ctrl+V。一个名为 shadowEllipse_Copy 的新椭圆将恰好显示在阴影椭圆的顶部。5. 在“属性”面板中，将名称设置为 outerRimEllipse。接下来，使用简单渐变填充 outerRimEllipse。在 Expression Blend 中创建渐变包括以下几个步骤。6. 在“对象和时间线”面板中，确保选中 outerRimEllipse。7. 在“属性”面板中的“外观”之下，将“不透明度”设置为 100%。8. 在“属性”面板的“画笔”下，单击“填充”，然后单击“渐变画笔”。9. 在颜色“编辑器”的渐变条上，单击左渐变停止点并将其颜色设置为 #FFE4E5F4。10. 单击右渐变停止点，并将其颜色设置为 #FFC0C0C0。接下来，您将更改线性渐变的方向，使它的走向为从左上到右下（而不是在椭圆上方从左到右）。11. 在“工具”面板中，单击“渐变工具”。将在 outerRimEllipse 上显示一个垂直箭头。12. 将鼠标指针移近箭头头部或箭头尾部，直至指针变为旋转图标。13. 旋转箭头，以便将线性渐变的方向从左上设置为右下。14. 在“属性”面板的“画笔”之下，向左拖动右渐变停止点以便将渐变集中在左侧。下图所示为渐变方向。15. 在“工具”面板中，单击“选择”工具。16. 将 outerRimEllipse 略向左上方拖动，以便可以看到阴影。在右下方，您会注意到 shadowEllipse 有一个长条，这样即产生了阴影效果。接下来，将创建时钟的斜边。用来生成斜边的椭圆类似于 outerRimEllipse，只是尺寸略小一些。创建时钟的斜边1. 选择 outerRimEllipse。2. 创建 outerRimEllipse 的副本并粘贴它。3. 在“属性”面板中，将 outerRimEllipse 副本的名称设置为 bevelEllipse。4. 在“属性”面板中的“布局”之下，将“宽度”和“高度”设置为 290。接下来，使用线性渐变填充 bevelEllipse。由于 bevelEllipse 是 outerRimEllipse 的副本，因此它沿袭了 outerRimEllipse 的渐变。5. 在“属性”面板的“画笔”之下，单击左渐变停止点，并将其颜色设置为 #FF2F2F32。6. 单击右渐变停止点，并将其颜色设置为 #FFE4E5F4。7. 将右渐变停止点拖到右侧，直至变为 100%。此渐变的走向与应用于 outerRimEllipse 的渐变相同。不过，bevelEllipse 渐变沿从左上到右下走向的明暗变化是从暗到明，这与应用于 outerRimEllipse 的渐变相反。下图演示了此渐变。接下来，将创建时钟的表盘。用来生成表盘的椭圆类似于 bevelEllipse，只是尺寸略小一些。创建时钟的表盘1. 选择 bevelEllipse。2. 创建 bevelEllipse 的副本并粘贴它。3. 在“属性”面板中，将 bevelEllipse 副本的名称设置为 faceEllipse。4. 在“属性”面板中的“布局”之下，将“宽度”和“高度”设置为 270。5. 在“属性”面板的“画笔”下，单击“填充”，单击“纯色画笔”，然后将颜色设置为黑色。注意，添加此椭圆将使斜边变为可见。接下来，将创建时钟的中心椭圆。创建时钟的中心椭圆1. 在“工具”面板中，单击“椭圆”工具。2. 在时钟表盘的中心部位绘制一个小椭圆。不必着急试图完全确定其位置。3. 在“属性”面板中，将名称设置为 centerEllipse。4. 在“属性”面板的“画笔”下，选择“笔画”，选择“纯色画笔”，然后将颜色设置为绿色。5. 在“属性”面板中的“外观”之下，将“笔画粗细”设置为 8。6. 在“属性”面板中的“布局”之下，将“宽度”和“高度”设置为 30。接下来，将中心椭圆定位到时钟表盘的中心位置。7. 在“对象和时间线”面板中，选择 centerEllipse。8. 当按下 Ctrl 键时，选择 faceEllipse 以同时选中 centerEllipse 和 faceEllipse。9. 在“对象”菜单上，单击“对齐”，再单击“水平中心”。centerEllipse 将水平对齐。10. 在“对象”菜单上，单击“对齐”，再单击“垂直中心”。centerEllipse 将垂直对齐。接下来，将创建时钟的指针。创建时钟的指针1. 在“工具”面板中，右键单击“椭圆”工具并单击“矩形”工具。2. 在时钟表盘上，绘制一个高细矩形以表示 12 点时钟位置。3. 在“属性”面板中，将名称设置为 secondHand。4. 在“属性”面板的“画笔”下，单击“填充”，单击“纯色画笔”，然后将颜色设置为红色。5. 在“属性”面板中的“布局”之下，将“宽度”设置为 5，并将“高度”设置为 80。6. 在“对象和时间线”面板中，选择 secondHand，按 Ctrl 键，然后选择 faceEllipse。7. 在“对象”菜单上，单击“对齐”，再单击“水平中心”。8. 在“工具”面板中，单击“选择”工具。9. 在“对象和时间线”面板中，单击“secondHand”，以恰好选择 secondHand。10. 在图形板的左下角，单击“缩放”箭头以对 secondHand 进行放大。在下一步中，您将矩形的中心点更改为时钟表盘的中心点。稍后将对时钟指针进行动画处理，使其绕时钟中心旋转。11. 将 secondHand 矩形的中心点拖到时钟表盘的中心。如果需要，您可以在“属性”面板中更改中心点。展开“变换”，单击“中心点”选项卡，然后更改 X 和 Y 值。12. 创建第二个矩形，它使用以下属性来表示分针。o 名称 = minuteHando 填充、纯色画笔、绿色o 宽度 = 9，高度 = 80o 对齐水平中心o 设置为时钟表盘中心的中心点13. 创建第三个矩形，它使用以下属性来表示时针。o 名称 = hourHando 填充、纯色画笔、绿色o 宽度 = 11，高度 = 60o 对齐水平中心o 设置为时钟表盘中心的中心点完成后，时钟指针将相互重叠。在下一节中，您将添加动画，使这些指针绕时钟中心旋转。通过以下方式来实现：对应用于时钟指针的 RotateTransform 元素的 Angle 属性进行动画处理。由于动画必须正确定位 RotateTransform，因此您必须对应用于每个时钟指针的 RotateTransform 元素进行命名。无法在 Expression Blend UI 中更改 RotateTransform 元素的名称，因此，您必须在 XAML 中执行此操作。14. 在图形板的右上角，单击“XAML”或“拆分”视图选项卡。您现在可以查看您已在设计器中创建的所有对象的 XAML 标记。时钟指针是通过 Rectangle 元素创建的。15. 在 XAML 中找到 secondhand 矩形。16. 通过添加 Rectangle.RenderTransform 元素和名为 secondHandTransform 的 RotateTransform 修改 secondHand 矩形，如下面的 XAML 中所示。 17. 修改 minuteHand 矩形并命名 RotateTransform minuteHandTransform。 18. 修改 hourHand 矩形并命名 RotateTransform hourHandTransform。 19. 在右上角，单击“设计”视图选项卡以显示设计视图。20. 保存项目。此时您已创建了所有时钟图形。接下来，将对时钟指针的旋转变换应用动画。这些旋转动画将使时钟指针绕时钟中心旋转（与您预期的时钟指针的动作一样）。通过指定动画的时间，可以使指针在与计算机上的当前时间同步的情况下绕时钟旋转。添加时钟指针动画1. 显示“项目”面板。2. 确保选择 MainPage.xaml。3. 单击“XAML”或“拆分”视图选项卡以显示 XAML。4. 在 UserControl 启动元素之后，添加以下标记以添加时钟指针动画。 此标记定义一个包含时钟指针动画的 Storyboard。所有这些动画都针对相应时钟指针变换的 Angle 属性。每个动画的 Duration 属性都根据该动画的期望速度进行设置。例如，对于时针变换，动画的持续时间设置为 12 小时，这是时针绕时钟整一周所用的时间。所有这些动画的 RepeatBehavior 都设置为 Forever。因此，在动画完成时（时针环绕时针一周），它将从头再次开始并且无限期地重复。若要启动 Storyboard，则将使用 Loaded 事件对 Storyboard 调用 Begin 方法。5. 查找 Grid 元素并添加以下 Loaded 属性。这指定在加载应用程序时调用 SetAndStartClock 事件处理程序。接下来，将添加事件处理程序。6. 在“项目”面板中，展开 MainPage.xaml 节点并双击代码隐藏文件 MainPage.xaml.vb 或 MainPage.xaml.cs。代码隐藏文件将在代码编辑器中打开。7. 在 MainPage 类中，添加以下 SetAndStartClock 方法，此方法启动 Storyboard。private void SetAndStartClock(object sender, EventArgs e) / Start the storyboard. clockStoryboard.Begin();8. 保存项目。9. 单击“项目”菜单，然后单击“运行项目”以生成和运行应用程序。（还可按 F5 运行该应用程序。）您的 Web 浏览器将打开，时钟将开始运行。请注意，秒针开始绕时钟移动。其他两个指针也移动，但它们移动得太慢，因此察觉不到。尽管时钟指针的移动速率似乎符合要求，但时钟未设置为与当前时间同步。若要设置时钟，您将需要添加一些逻辑。将时钟设置为当前时间1. 打开浏览器并打开 MainPage.xaml.vb 或 MainPage.xaml.cs。2. 用下面的代码替换 SetAndStartClock 过程。此代码将时钟指针设为当前时间。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();3. 运行该应用程序。此时钟指针现应设置为当前时间。使用 Visual Studio 创建时钟 如果不使用 Expression Blend，则可以使用 XAML 直接创建时钟图形。在演练的这一节中，将说明如何使用 Visual Studio 创建相同的时钟。该时钟由下图中所示的图形元素组成。这些图形是通过将简单元素排列在 Grid 上创建成的。包括时钟的表盘、外边缘、斜边和阴影在内的所有圆形图形都是通过 Ellipse 元素创建的，而时钟指针是通过 Rectangle 元素创建的。在 Visual Studio 中创建新的 Silverlight 应用程序项目1. 启动 Visual Studio。2. 使用 Visual Basic 或 Visual C# 新建一个名为 SilverlightClock 的 Silverlight 应用程序项目。3. 在“新建 Silverlight 应用程序”对话框中，取消选中“在新网站中承载 Silverlight 应用程序”复选框，并在“Silverlight 版本”列表中选择“Silverlight 4”。有关更多信息，请参见如何创建新 Silverlight 项目。时钟的图形由一层层叠加形状构成，这些形状创建了时钟的总体外观。若要创建时钟，您需要按照如下方式来逐步构造时钟：从最底层（即时钟的阴影）开始，每次构造一层。创建时钟的阴影1. 打开 MainPage.xaml。2. 用下面的 XAML 替换现有 XAML 以创建时钟的阴影。 下图显示了结果。请注意，填充设置为黑色并且不透明度设置为 0.3 (30%)。这使得椭圆的填充为半透明，类似阴影。宽度、高度以及边距可以是任意值。这些属性只是指定 Grid 内圆形的大小和位置。说明：Silverlight 应用程序中的大多数 XAML 标记不受您使用的过程语言（例如 C#、Visual Basic、C# 或 JavaScript）的影响。接下来，将创建时钟的外边缘。创建时钟的外边缘 在 MainPage.xaml 中，在阴影椭圆之后，添加以下 XAML 以创建时钟的外边缘。 下图显示了结果。阴影椭圆位于稍靠右下方位置，使得从下面只能看到该椭圆的一个长条。这便产生了阴影效果。此外，请注意对外边缘椭圆应用了线性渐变。此线性渐变的结果是创建了光线来自于该椭圆的左上方这种外观。接下来，将添加时钟的斜边。创建时钟的斜边 在 MainPage.xaml 中，在外边缘椭圆之后，添加以下 XAML 以创建时钟的斜边。 下图显示了结果。该椭圆略小于用于创建外边缘的椭圆，且直接置于外边缘椭圆的上方。此外，该椭圆也应用了线性渐变，但此渐变沿从左上到右下走向的明暗变化是从暗到明。接下来，将创建时钟的表盘。创建时钟的表盘 在 MainPage.xaml 中，在斜边椭圆之后，添加以下 XAML 以创建时钟的表盘。时钟表盘只是一个填充了黑色的椭圆，略小于斜边椭圆，且直接位于其他椭圆上方。此外请注意，添加此椭圆后斜边变为可见。接下来，将创建时钟的中心椭圆和指针。创建时钟的中心椭圆和指针 在 MainPage.xaml 中，在表盘椭圆之后，添加以下 XAML 以创建时钟的中心椭圆和指针。 下图显示了结果。此图中秒针、分针和时针重叠。在前面的代码中，分针、时针和秒针对确定方位的属性（例如，Margin）共用相同的值。但这些指针在尺寸和/或颜色上又各不相同（例如，由于时针具有最大的 StrokeThickness 值，因此它最粗）。请注意，所有指针都应用了 RotateTransform。通过该变换可以旋转指针的角度。在下一节中，将对此变换的角度进行动画处理，从而使时钟指针移动以显示时间。每个 RotateTransform 元素都有一个名称（例如 x:Name=hourHandTransform）。这样是为了可以将动画与变换相关联。此外请注意，所有指针都具有 RenderTransformOrigin 值。此属性用于指定进行各个变换时所参照的画布上的点。由于将要绕时钟中心旋转各个指针，因此将各指针 RenderTransform 属性的值均指定为时钟表盘的中心。此时您已创建了所有时钟图形。接下来，将对时钟指针的旋转变换应用动画。这些旋转动画将使时钟指针绕时钟中心旋转（与您预期的时钟指针的动作一样）。通过指定动画的时间，可以使指针在与计算机上的当前时间同步的情况下绕时钟旋转。添加时钟指针动画1. 在 MainPage.xaml 中，在 UserControl 启动元素之后，添加以下标记以添加时钟指针动画。 此标记定义一个包含时钟指针动画的 Storyboard。Storyboard 中的所有这些动画都针对相应时钟指针变换的 Angle 属性。每个动画的 Duration 属性都根据该动画的期望速度进行设置。例如，对于时针变换，动画的持续时间设置为 12 小时，这是时针绕时钟整一周所用的时间。所有这些动画的 RepeatBehavior 都设置为 Forever。因此，在动画完成时（时针环绕时针一周），它将从头再次开始并且无限期地重复。若要启动 Storyboard，请使用 Loaded 事件对 Storyboard 调用 Begin 方法。2. 在 Grid 元素中，添加以下 Loaded 属性。这指定在加载应用程序时调用 SetAndStartClock 事件处理程序。接下来，将添加事件处理程序。3. 在解决方案资源管理器中，展开 MainPage.xaml 并打开代码隐藏文件 MainPage.xaml.vb 或 MainPage.xaml.cs。4. 在 MainPage 类中，添加以下 SetAndStartClock 方法，此方法启动 Storyboard。private void SetAndStartClock(object sender, EventArgs e) / Start the storyboard. clockStoryboard.Begin();5. 保存项目。6. 在“调试”菜单中，单击“启动调试”或按 F5 以运行此应用程序。您的 Web 浏览器将打开，时钟将开始运行。请注意，秒针开始绕时钟移动。其他两个指针也移动，但它们移动得太慢，因此察觉不到。尽管时钟指针的移动速率似乎符合要求，但时钟未设置为与当前时间同步。若要设置时钟，您将需要添加一些逻辑。将时钟设置为当前时间1. 打开浏览器并打开 MainPage.xaml.vb 或 MainPage.xaml.cs。2. 用下面的代码替换 SetAndStartClock 过程。此代码将时钟指针设为当前时间。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; / Th