使用 Expression Blend 或 Visual Studio 創(chuàng)建 Silverlight 時(shí)鐘.docx

窗體頂端演練：使用 Expression Blend 或 Visual Studio 創(chuàng)建 Silverlight 時(shí)鐘在 Silverlight 中，您可以使用可擴(kuò)展標(biāo)記語言創(chuàng)建用戶界面 (UI) 元素。若要編寫 XAML，您可以使用可視化設(shè)計(jì)工具（如 Expression Blend），也可以使用 Visual Studio。本演練向您說明如何通過使用 Expression Blend 和 Visual Studio 在 Silverlight 中創(chuàng)建簡單的時(shí)鐘。下圖所示為您將創(chuàng)建的時(shí)鐘。如果您使用 Expression Blend，則可以在設(shè)計(jì)器中直觀地創(chuàng)建圖形。如果您使用 Visual Studio，則可以通過在 XAML 中鍵入內(nèi)容來創(chuàng)建圖形。在創(chuàng)建了組成時(shí)鐘外觀的圖形之后，您就可以添加使時(shí)鐘工作所需的動(dòng)畫和邏輯。使用 Expression Blend 創(chuàng)建時(shí)鐘 Expression Blend 可以提高創(chuàng)建 Silverlight 應(yīng)用程序的效率，對(duì)于設(shè)計(jì)圖形和布局更是如此。在本節(jié)中，您將通過使用 Expression Blend 來創(chuàng)建時(shí)鐘。該時(shí)鐘由下圖中所示的圖形元素組成。這些圖形是通過將簡單元素排列在 Grid 上創(chuàng)建成的。包括時(shí)鐘的表盤、外邊緣、斜邊和陰影在內(nèi)的所有圓形圖形都是通過 Ellipse 元素創(chuàng)建的，而時(shí)鐘指針是通過 Rectangle 元素創(chuàng)建的。在 Expression Blend 中創(chuàng)建新的 Silverlight 應(yīng)用程序項(xiàng)目1. 啟動(dòng) Expression Blend。如果顯示啟動(dòng)窗體，則單擊“關(guān)閉”。2. 在“文件”菜單上，單擊“新建項(xiàng)目”。將顯示“新建項(xiàng)目”對(duì)話框。3. 在“項(xiàng)目類型”窗格中，選擇“Silverlight”。4. 在項(xiàng)目列表中，選擇“Silverlight 應(yīng)用程序”。5. 在名稱框中鍵入 SilverlightClock。6. 在“語言”列表中，選擇“Visual Basic”或“Visual C#”。7. 在“版本”列表中，選擇“4.0”。8. 單擊“確定”創(chuàng)建項(xiàng)目。接下來，將設(shè)置圖形板的大小。9. 在“對(duì)象和時(shí)間線”面板中，選擇“UserControl”。10. 在“屬性”面板中的“布局”之下，將“寬度”和“高度”設(shè)置為 400。更改圖形板的大小。這時(shí)，您就有了一個(gè)空的項(xiàng)目。如果按下F5運(yùn)行該應(yīng)用程序，結(jié)果只會(huì)看到一個(gè)空白網(wǎng)頁。時(shí)鐘圖形由一層層疊加形狀構(gòu)成，這些形狀創(chuàng)建了時(shí)鐘的總體外觀。若要?jiǎng)?chuàng)建時(shí)鐘，您需要按照如下方式來逐步構(gòu)造時(shí)鐘：從最底層（即時(shí)鐘的陰影）開始，每次構(gòu)造一層。創(chuàng)建時(shí)鐘的陰影1. 在“工具”面板中，右鍵單擊“矩形”工具并單擊“橢圓”。2. 在圖形板上，繪制一個(gè)寬和高約為 330 像素的橢圓。當(dāng)您繪圖時(shí)，請(qǐng)按 Shift 鍵以保持寬度和高度相等。3. 如果您需要重新確定橢圓的位置，則在“工具”面板中，單擊“選擇”工具并重新確定橢圓位置。接下來，您將更改橢圓屬性。4. 在“屬性”面板的“名稱”框中，將橢圓的名稱設(shè)置為 shadowEllipse。5. 在“屬性”面板的“畫筆”下，單擊“填充”，然后單擊“純色畫筆”。6. 在顏色“編輯器”中，將顏色設(shè)置為黑色。7. 在“外觀”之下將“不透明度”設(shè)置為 30%。該橢圓此時(shí)填充了半透明黑色，用于提供陰影效果。8. 在文件菜單上單擊全部保存。接下來，將創(chuàng)建時(shí)鐘的外邊緣。因?yàn)橥膺吘壟c陰影橢圓的大小相同，所以您只需通過復(fù)制陰影橢圓就可以創(chuàng)建外邊緣。創(chuàng)建時(shí)鐘的外邊緣1. 在“工具”面板中，單擊“選擇”工具。2. 在圖形板上，單擊陰影橢圓以確保選中此橢圓。3. 在“編輯”菜單上，選擇“復(fù)制”或按 Ctrl+C。4. 在“編輯”菜單上，選擇“粘貼”或按 Ctrl+V。一個(gè)名為 shadowEllipse_Copy 的新橢圓將恰好顯示在陰影橢圓的頂部。5. 在“屬性”面板中，將名稱設(shè)置為 outerRimEllipse。接下來，使用簡單漸變填充 outerRimEllipse。在 Expression Blend 中創(chuàng)建漸變包括以下幾個(gè)步驟。6. 在“對(duì)象和時(shí)間線”面板中，確保選中 outerRimEllipse。7. 在“屬性”面板中的“外觀”之下，將“不透明度”設(shè)置為 100%。8. 在“屬性”面板的“畫筆”下，單擊“填充”，然后單擊“漸變畫筆”。9. 在顏色“編輯器”的漸變條上，單擊左漸變停止點(diǎn)并將其顏色設(shè)置為 #FFE4E5F4。10. 單擊右漸變停止點(diǎn)，并將其顏色設(shè)置為 #FFC0C0C0。接下來，您將更改線性漸變的方向，使它的走向?yàn)閺淖笊系接蚁拢ǘ皇窃跈E圓上方從左到右）。11. 在“工具”面板中，單擊“漸變工具”。將在 outerRimEllipse 上顯示一個(gè)垂直箭頭。12. 將鼠標(biāo)指針移近箭頭頭部或箭頭尾部，直至指針變?yōu)樾D(zhuǎn)圖標(biāo)。13. 旋轉(zhuǎn)箭頭，以便將線性漸變的方向從左上設(shè)置為右下。14. 在“屬性”面板的“畫筆”之下，向左拖動(dòng)右漸變停止點(diǎn)以便將漸變集中在左側(cè)。下圖所示為漸變方向。15. 在“工具”面板中，單擊“選擇”工具。16. 將 outerRimEllipse 略向左上方拖動(dòng)，以便可以看到陰影。在右下方，您會(huì)注意到 shadowEllipse 有一個(gè)長條，這樣即產(chǎn)生了陰影效果。接下來，將創(chuàng)建時(shí)鐘的斜邊。用來生成斜邊的橢圓類似于 outerRimEllipse，只是尺寸略小一些。創(chuàng)建時(shí)鐘的斜邊1. 選擇 outerRimEllipse。2. 創(chuàng)建 outerRimEllipse 的副本并粘貼它。3. 在“屬性”面板中，將 outerRimEllipse 副本的名稱設(shè)置為 bevelEllipse。4. 在“屬性”面板中的“布局”之下，將“寬度”和“高度”設(shè)置為 290。接下來，使用線性漸變填充 bevelEllipse。由于 bevelEllipse 是 outerRimEllipse 的副本，因此它沿襲了 outerRimEllipse 的漸變。5. 在“屬性”面板的“畫筆”之下，單擊左漸變停止點(diǎn)，并將其顏色設(shè)置為 #FF2F2F32。6. 單擊右漸變停止點(diǎn)，并將其顏色設(shè)置為 #FFE4E5F4。7. 將右漸變停止點(diǎn)拖到右側(cè)，直至變?yōu)?100%。此漸變的走向與應(yīng)用于 outerRimEllipse 的漸變相同。不過，bevelEllipse 漸變沿從左上到右下走向的明暗變化是從暗到明，這與應(yīng)用于 outerRimEllipse 的漸變相反。下圖演示了此漸變。接下來，將創(chuàng)建時(shí)鐘的表盤。用來生成表盤的橢圓類似于 bevelEllipse，只是尺寸略小一些。創(chuàng)建時(shí)鐘的表盤1. 選擇 bevelEllipse。2. 創(chuàng)建 bevelEllipse 的副本并粘貼它。3. 在“屬性”面板中，將 bevelEllipse 副本的名稱設(shè)置為 faceEllipse。4. 在“屬性”面板中的“布局”之下，將“寬度”和“高度”設(shè)置為 270。5. 在“屬性”面板的“畫筆”下，單擊“填充”，單擊“純色畫筆”，然后將顏色設(shè)置為黑色。注意，添加此橢圓將使斜邊變?yōu)榭梢?。接下來，將?chuàng)建時(shí)鐘的中心橢圓。創(chuàng)建時(shí)鐘的中心橢圓1. 在“工具”面板中，單擊“橢圓”工具。2. 在時(shí)鐘表盤的中心部位繪制一個(gè)小橢圓。不必著急試圖完全確定其位置。3. 在“屬性”面板中，將名稱設(shè)置為 centerEllipse。4. 在“屬性”面板的“畫筆”下，選擇“筆畫”，選擇“純色畫筆”，然后將顏色設(shè)置為綠色。5. 在“屬性”面板中的“外觀”之下，將“筆畫粗細(xì)”設(shè)置為 8。6. 在“屬性”面板中的“布局”之下，將“寬度”和“高度”設(shè)置為 30。接下來，將中心橢圓定位到時(shí)鐘表盤的中心位置。7. 在“對(duì)象和時(shí)間線”面板中，選擇 centerEllipse。8. 當(dāng)按下 Ctrl 鍵時(shí)，選擇 faceEllipse 以同時(shí)選中 centerEllipse 和 faceEllipse。9. 在“對(duì)象”菜單上，單擊“對(duì)齊”，再單擊“水平中心”。centerEllipse 將水平對(duì)齊。10. 在“對(duì)象”菜單上，單擊“對(duì)齊”，再單擊“垂直中心”。centerEllipse 將垂直對(duì)齊。接下來，將創(chuàng)建時(shí)鐘的指針。創(chuàng)建時(shí)鐘的指針1. 在“工具”面板中，右鍵單擊“橢圓”工具并單擊“矩形”工具。2. 在時(shí)鐘表盤上，繪制一個(gè)高細(xì)矩形以表示 12 點(diǎn)時(shí)鐘位置。3. 在“屬性”面板中，將名稱設(shè)置為 secondHand。4. 在“屬性”面板的“畫筆”下，單擊“填充”，單擊“純色畫筆”，然后將顏色設(shè)置為紅色。5. 在“屬性”面板中的“布局”之下，將“寬度”設(shè)置為 5，并將“高度”設(shè)置為 80。6. 在“對(duì)象和時(shí)間線”面板中，選擇 secondHand，按 Ctrl 鍵，然后選擇 faceEllipse。7. 在“對(duì)象”菜單上，單擊“對(duì)齊”，再單擊“水平中心”。8. 在“工具”面板中，單擊“選擇”工具。9. 在“對(duì)象和時(shí)間線”面板中，單擊“secondHand”，以恰好選擇 secondHand。10. 在圖形板的左下角，單擊“縮放”箭頭以對(duì) secondHand 進(jìn)行放大。在下一步中，您將矩形的中心點(diǎn)更改為時(shí)鐘表盤的中心點(diǎn)。稍后將對(duì)時(shí)鐘指針進(jìn)行動(dòng)畫處理，使其繞時(shí)鐘中心旋轉(zhuǎn)。11. 將 secondHand 矩形的中心點(diǎn)拖到時(shí)鐘表盤的中心。如果需要，您可以在“屬性”面板中更改中心點(diǎn)。展開“變換”，單擊“中心點(diǎn)”選項(xiàng)卡，然后更改 X 和 Y 值。12. 創(chuàng)建第二個(gè)矩形，它使用以下屬性來表示分針。o 名稱 = minuteHando 填充、純色畫筆、綠色o 寬度 = 9，高度 = 80o 對(duì)齊水平中心o 設(shè)置為時(shí)鐘表盤中心的中心點(diǎn)13. 創(chuàng)建第三個(gè)矩形，它使用以下屬性來表示時(shí)針。o 名稱 = hourHando 填充、純色畫筆、綠色o 寬度 = 11，高度 = 60o 對(duì)齊水平中心o 設(shè)置為時(shí)鐘表盤中心的中心點(diǎn)完成后，時(shí)鐘指針將相互重疊。在下一節(jié)中，您將添加動(dòng)畫，使這些指針繞時(shí)鐘中心旋轉(zhuǎn)。通過以下方式來實(shí)現(xiàn)：對(duì)應(yīng)用于時(shí)鐘指針的 RotateTransform 元素的 Angle 屬性進(jìn)行動(dòng)畫處理。由于動(dòng)畫必須正確定位 RotateTransform，因此您必須對(duì)應(yīng)用于每個(gè)時(shí)鐘指針的 RotateTransform 元素進(jìn)行命名。無法在 Expression Blend UI 中更改 RotateTransform 元素的名稱，因此，您必須在 XAML 中執(zhí)行此操作。14. 在圖形板的右上角，單擊“XAML”或“拆分”視圖選項(xiàng)卡。您現(xiàn)在可以查看您已在設(shè)計(jì)器中創(chuàng)建的所有對(duì)象的 XAML 標(biāo)記。時(shí)鐘指針是通過 Rectangle 元素創(chuàng)建的。15. 在 XAML 中找到 secondhand 矩形。16. 通過添加 Rectangle.RenderTransform 元素和名為 secondHandTransform 的 RotateTransform 修改 secondHand 矩形，如下面的 XAML 中所示。 17. 修改 minuteHand 矩形并命名 RotateTransform minuteHandTransform。 18. 修改 hourHand 矩形并命名 RotateTransform hourHandTransform。 19. 在右上角，單擊“設(shè)計(jì)”視圖選項(xiàng)卡以顯示設(shè)計(jì)視圖。20. 保存項(xiàng)目。此時(shí)您已創(chuàng)建了所有時(shí)鐘圖形。接下來，將對(duì)時(shí)鐘指針的旋轉(zhuǎn)變換應(yīng)用動(dòng)畫。這些旋轉(zhuǎn)動(dòng)畫將使時(shí)鐘指針繞時(shí)鐘中心旋轉(zhuǎn)（與您預(yù)期的時(shí)鐘指針的動(dòng)作一樣）。通過指定動(dòng)畫的時(shí)間，可以使指針在與計(jì)算機(jī)上的當(dāng)前時(shí)間同步的情況下繞時(shí)鐘旋轉(zhuǎn)。添加時(shí)鐘指針動(dòng)畫1. 顯示“項(xiàng)目”面板。2. 確保選擇 MainPage.xaml。3. 單擊“XAML”或“拆分”視圖選項(xiàng)卡以顯示 XAML。4. 在 UserControl 啟動(dòng)元素之后，添加以下標(biāo)記以添加時(shí)鐘指針動(dòng)畫。 此標(biāo)記定義一個(gè)包含時(shí)鐘指針動(dòng)畫的 Storyboard。所有這些動(dòng)畫都針對(duì)相應(yīng)時(shí)鐘指針變換的 Angle 屬性。每個(gè)動(dòng)畫的 Duration 屬性都根據(jù)該動(dòng)畫的期望速度進(jìn)行設(shè)置。例如，對(duì)于時(shí)針變換，動(dòng)畫的持續(xù)時(shí)間設(shè)置為 12 小時(shí)，這是時(shí)針繞時(shí)鐘整一周所用的時(shí)間。所有這些動(dòng)畫的 RepeatBehavior 都設(shè)置為 Forever。因此，在動(dòng)畫完成時(shí)（時(shí)針環(huán)繞時(shí)針一周），它將從頭再次開始并且無限期地重復(fù)。若要啟動(dòng) Storyboard，則將使用 Loaded 事件對(duì) Storyboard 調(diào)用 Begin 方法。5. 查找 Grid 元素并添加以下 Loaded 屬性。這指定在加載應(yīng)用程序時(shí)調(diào)用 SetAndStartClock 事件處理程序。接下來，將添加事件處理程序。6. 在“項(xiàng)目”面板中，展開 MainPage.xaml 節(jié)點(diǎn)并雙擊代碼隱藏文件 MainPage.xaml.vb 或 MainPage.xaml.cs。代碼隱藏文件將在代碼編輯器中打開。7. 在 MainPage 類中，添加以下 SetAndStartClock 方法，此方法啟動(dòng) Storyboard。private void SetAndStartClock(object sender, EventArgs e) / Start the storyboard. clockStoryboard.Begin();8. 保存項(xiàng)目。9. 單擊“項(xiàng)目”菜單，然后單擊“運(yùn)行項(xiàng)目”以生成和運(yùn)行應(yīng)用程序。（還可按 F5 運(yùn)行該應(yīng)用程序。）您的 Web 瀏覽器將打開，時(shí)鐘將開始運(yùn)行。請(qǐng)注意，秒針開始繞時(shí)鐘移動(dòng)。其他兩個(gè)指針也移動(dòng)，但它們移動(dòng)得太慢，因此察覺不到。盡管時(shí)鐘指針的移動(dòng)速率似乎符合要求，但時(shí)鐘未設(shè)置為與當(dāng)前時(shí)間同步。若要設(shè)置時(shí)鐘，您將需要添加一些邏輯。將時(shí)鐘設(shè)置為當(dāng)前時(shí)間1. 打開瀏覽器并打開 MainPage.xaml.vb 或 MainPage.xaml.cs。2. 用下面的代碼替換 SetAndStartClock 過程。此代碼將時(shí)鐘指針設(shè)為當(dāng)前時(shí)間。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. 運(yùn)行該應(yīng)用程序。此時(shí)鐘指針現(xiàn)應(yīng)設(shè)置為當(dāng)前時(shí)間。使用 Visual Studio 創(chuàng)建時(shí)鐘 如果不使用 Expression Blend，則可以使用 XAML 直接創(chuàng)建時(shí)鐘圖形。在演練的這一節(jié)中，將說明如何使用 Visual Studio 創(chuàng)建相同的時(shí)鐘。該時(shí)鐘由下圖中所示的圖形元素組成。這些圖形是通過將簡單元素排列在 Grid 上創(chuàng)建成的。包括時(shí)鐘的表盤、外邊緣、斜邊和陰影在內(nèi)的所有圓形圖形都是通過 Ellipse 元素創(chuàng)建的，而時(shí)鐘指針是通過 Rectangle 元素創(chuàng)建的。在 Visual Studio 中創(chuàng)建新的 Silverlight 應(yīng)用程序項(xiàng)目1. 啟動(dòng) Visual Studio。2. 使用 Visual Basic 或 Visual C# 新建一個(gè)名為 SilverlightClock 的 Silverlight 應(yīng)用程序項(xiàng)目。3. 在“新建 Silverlight 應(yīng)用程序”對(duì)話框中，取消選中“在新網(wǎng)站中承載 Silverlight 應(yīng)用程序”復(fù)選框，并在“Silverlight 版本”列表中選擇“Silverlight 4”。有關(guān)更多信息，請(qǐng)參見如何創(chuàng)建新 Silverlight 項(xiàng)目。時(shí)鐘的圖形由一層層疊加形狀構(gòu)成，這些形狀創(chuàng)建了時(shí)鐘的總體外觀。若要?jiǎng)?chuàng)建時(shí)鐘，您需要按照如下方式來逐步構(gòu)造時(shí)鐘：從最底層（即時(shí)鐘的陰影）開始，每次構(gòu)造一層。創(chuàng)建時(shí)鐘的陰影1. 打開 MainPage.xaml。2. 用下面的 XAML 替換現(xiàn)有 XAML 以創(chuàng)建時(shí)鐘的陰影。 下圖顯示了結(jié)果。請(qǐng)注意，填充設(shè)置為黑色并且不透明度設(shè)置為 0.3 (30%)。這使得橢圓的填充為半透明，類似陰影。寬度、高度以及邊距可以是任意值。這些屬性只是指定 Grid 內(nèi)圓形的大小和位置。說明：Silverlight 應(yīng)用程序中的大多數(shù) XAML 標(biāo)記不受您使用的過程語言（例如 C#、Visual Basic、C# 或 JavaScript）的影響。接下來，將創(chuàng)建時(shí)鐘的外邊緣。創(chuàng)建時(shí)鐘的外邊緣 在 MainPage.xaml 中，在陰影橢圓之后，添加以下 XAML 以創(chuàng)建時(shí)鐘的外邊緣。 下圖顯示了結(jié)果。陰影橢圓位于稍靠右下方位置，使得從下面只能看到該橢圓的一個(gè)長條。這便產(chǎn)生了陰影效果。此外，請(qǐng)注意對(duì)外邊緣橢圓應(yīng)用了線性漸變。此線性漸變的結(jié)果是創(chuàng)建了光線來自于該橢圓的左上方這種外觀。接下來，將添加時(shí)鐘的斜邊。創(chuàng)建時(shí)鐘的斜邊 在 MainPage.xaml 中，在外邊緣橢圓之后，添加以下 XAML 以創(chuàng)建時(shí)鐘的斜邊。 下圖顯示了結(jié)果。該橢圓略小于用于創(chuàng)建外邊緣的橢圓，且直接置于外邊緣橢圓的上方。此外，該橢圓也應(yīng)用了線性漸變，但此漸變沿從左上到右下走向的明暗變化是從暗到明。接下來，將創(chuàng)建時(shí)鐘的表盤。創(chuàng)建時(shí)鐘的表盤 在 MainPage.xaml 中，在斜邊橢圓之后，添加以下 XAML 以創(chuàng)建時(shí)鐘的表盤。時(shí)鐘表盤只是一個(gè)填充了黑色的橢圓，略小于斜邊橢圓，且直接位于其他橢圓上方。此外請(qǐng)注意，添加此橢圓后斜邊變?yōu)榭梢姟＝酉聛?，將?chuàng)建時(shí)鐘的中心橢圓和指針。創(chuàng)建時(shí)鐘的中心橢圓和指針 在 MainPage.xaml 中，在表盤橢圓之后，添加以下 XAML 以創(chuàng)建時(shí)鐘的中心橢圓和指針。 下圖顯示了結(jié)果。此圖中秒針、分針和時(shí)針重疊。在前面的代碼中，分針、時(shí)針和秒針對(duì)確定方位的屬性（例如，Margin）共用相同的值。但這些指針在尺寸和/或顏色上又各不相同（例如，由于時(shí)針具有最大的 StrokeThickness 值，因此它最粗）。請(qǐng)注意，所有指針都應(yīng)用了 RotateTransform。通過該變換可以旋轉(zhuǎn)指針的角度。在下一節(jié)中，將對(duì)此變換的角度進(jìn)行動(dòng)畫處理，從而使時(shí)鐘指針移動(dòng)以顯示時(shí)間。每個(gè) RotateTransform 元素都有一個(gè)名稱（例如 x:Name=hourHandTransform）。這樣是為了可以將動(dòng)畫與變換相關(guān)聯(lián)。此外請(qǐng)注意，所有指針都具有 RenderTransformOrigin 值。此屬性用于指定進(jìn)行各個(gè)變換時(shí)所參照的畫布上的點(diǎn)。由于將要繞時(shí)鐘中心旋轉(zhuǎn)各個(gè)指針，因此將各指針 RenderTransform 屬性的值均指定為時(shí)鐘表盤的中心。此時(shí)您已創(chuàng)建了所有時(shí)鐘圖形。接下來，將對(duì)時(shí)鐘指針的旋轉(zhuǎn)變換應(yīng)用動(dòng)畫。這些旋轉(zhuǎn)動(dòng)畫將使時(shí)鐘指針繞時(shí)鐘中心旋轉(zhuǎn)（與您預(yù)期的時(shí)鐘指針的動(dòng)作一樣）。通過指定動(dòng)畫的時(shí)間，可以使指針在與計(jì)算機(jī)上的當(dāng)前時(shí)間同步的情況下繞時(shí)鐘旋轉(zhuǎn)。添加時(shí)鐘指針動(dòng)畫1. 在 MainPage.xaml 中，在 UserControl 啟動(dòng)元素之后，添加以下標(biāo)記以添加時(shí)鐘指針動(dòng)畫。 此標(biāo)記定義一個(gè)包含時(shí)鐘指針動(dòng)畫的 Storyboard。Storyboard 中的所有這些動(dòng)畫都針對(duì)相應(yīng)時(shí)鐘指針變換的 Angle 屬性。每個(gè)動(dòng)畫的 Duration 屬性都根據(jù)該動(dòng)畫的期望速度進(jìn)行設(shè)置。例如，對(duì)于時(shí)針變換，動(dòng)畫的持續(xù)時(shí)間設(shè)置為 12 小時(shí)，這是時(shí)針繞時(shí)鐘整一周所用的時(shí)間。所有這些動(dòng)畫的 RepeatBehavior 都設(shè)置為 Forever。因此，在動(dòng)畫完成時(shí)（時(shí)針環(huán)繞時(shí)針一周），它將從頭再次開始并且無限期地重復(fù)。若要啟動(dòng) Storyboard，請(qǐng)使用 Loaded 事件對(duì) Storyboard 調(diào)用 Begin 方法。2. 在 Grid 元素中，添加以下 Loaded 屬性。這指定在加載應(yīng)用程序時(shí)調(diào)用 SetAndStartClock 事件處理程序。接下來，將添加事件處理程序。3. 在解決方案資源管理器中，展開 MainPage.xaml 并打開代碼隱藏文件 MainPage.xaml.vb 或 MainPage.xaml.cs。4. 在 MainPage 類中，添加以下 SetAndStartClock 方法，此方法啟動(dòng) Storyboard。private void SetAndStartClock(object sender, EventArgs e) / Start the storyboard. clockStoryboard.Begin();5. 保存項(xiàng)目。6. 在“調(diào)試”菜單中，單擊“啟動(dòng)調(diào)試”或按 F5 以運(yùn)行此應(yīng)用程序。您的 Web 瀏覽器將打開，時(shí)鐘將開始運(yùn)行。請(qǐng)注意，秒針開始繞時(shí)鐘移動(dòng)。其他兩個(gè)指針也移動(dòng)，但它們移動(dòng)得太慢，因此察覺不到。盡管時(shí)鐘指針的移動(dòng)速率似乎符合要求，但時(shí)鐘未設(shè)置為與當(dāng)前時(shí)間同步。若要設(shè)置時(shí)鐘，您將需要添加一些邏輯。將時(shí)鐘設(shè)置為當(dāng)前時(shí)間1. 打開瀏覽器并打開 MainPage.xaml.vb 或 MainPage.xaml.cs。2. 用下面的代碼替換 SetAndStartClock 過程。此代碼將時(shí)鐘指針設(shè)為當(dāng)前時(shí)間。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