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

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