Silverlight 2 講堂 -4：會變色的風火輪

在前一堂課裡面，我介紹了時間軸的控制技巧，各位千萬不要小看它! 許多在Silverlight 2當中的動態效果，我們都可以透過時間軸的操作來建立，例如接下來要教各位的風火輪的效果!

1. 利用Expression Blend 2.5 June 2008 Preview設計工具開啟HelloWorld解決方案，然後從HelloWorld專案中開啟Page.xaml。

2. 用滑鼠按住左邊工具列的矩形選項 ，會出現圖型的選單。選取[Ellipse](圓形圖案)，如下圖：

3. 然後在畫布上的空白區域中，按下[Shift]鍵之後，拖拉一個圓形出來，然後按下[v]鍵，選取該圓形：

4. 接下來我們要建立一個漸層的圓形，先在右邊[properties]-->[Brushes]視窗中選取漸層的筆刷，如下圖紅色框框處：

5. 然後，先選取下方較深色的顏色設定，在調色盤下方先選取左邊的筆(左邊黃色圈圈處)之後，在調色盤中選取一個紅色：

6. 在調色盤下方先選取右邊的筆(右邊黃色圈圈處)之後，在調色盤中選取一個黃色。此時圓形會變成漂亮的漸層色：

7. 選取工具列中的漸層轉換按鈕( )，此時畫面的圓形中會出現箭號，表示漸層的方向：

你可以藉由調整箭號的方向調整漸層的效果，各位可以自己玩看看! 例如我要把上方調整成淺色，就只要把箭號顛倒過來：

8. 重複步驟2、3，在圓形中加入一個較小的同心圓：

你可以善用位置標記，幫助圓形對齊!

9. 接下來要定義滑鼠移過圓形之後圖形的變化，參考上一堂課(Silverlight 2 講堂 - 3)中介紹的方式，建立一個新的時間軸叫做AfterMouseMove：

10. 然後選取外層的圓形，按照下面的時間點調整轉換的角度：

• 移動時間軸(黃線)到0秒位置，將Angle值調整為-45。
• 移動時間軸(黃線)到0.1秒位置，將Angle值調整為-90。
• 移動時間軸(黃線)到0.2秒位置，將Angle值調整為-135。
• 移動時間軸(黃線)到0.3秒位置，將Angle值調整為-180。
• 移動時間軸(黃線)到0.4秒位置，將Angle值調整為-225。
• 移動時間軸(黃線)到0.5秒位置，將Angle值調整為-270。
• 移動時間軸(黃線)到0.6秒位置，將Angle值調整為-315。
• 移動時間軸(黃線)到0.7秒位置，將Angle值調整為-360。

11. 點選設計視窗左上角的紅點，關閉時間軸錄製的功能。

12. 在[properties]視窗中，將Name屬性值設為rollEgg，完成之後先存檔。接著按下事件的按鈕，如下圖：

13. 我們希望當滑鼠移過風火輪的時候就開始滾動，因此找到MouseMove事件之後，直接在事件旁的欄位上用滑鼠雙擊。

此時Expression Blend會自動啟動VS 2008開發工具載入目前編輯中的專案，並且建立rollEgg_MouseMove事件處理常式。在事件處理常式中加入啟動AfterMouseMove時間軸的程式碼如下：

private void rollEgg_MouseMove(object sender, MouseEventArgs e) {       AfterMouseMove.Begin(); }

當然，若是你希望當使用者輸入資料完畢之後，風火輪也要跟著轉的話，你也可以在上次的btnClick_Click事件處理常式中加入啟動AfterMouseMove時間軸的程式碼。

14. 完成之後，先建置Silverlight專案(HelloWorld)，再建置網站(HelloWorldWeb)，就可以透過瀏覽器檢視測試頁(HelloWorldTestPage.aspx或HelloWorldTestPage.html)，結果如下：

其實若是會善用時間軸以及調整圖形的外觀(大小、位置、顏色)這些基本動作，你就可以透過Silverlight 2產生許多動態的效果。即便是像我美工這樣差的人，都可以輕易的做出動態按鈕與風火輪的效果。坊間許多的書都喜歡教你先認識XAML標籤，再介紹啥向量繪圖之類的原理等等。如果你對當一個設計人員有興趣，我建議你可以多鑽研，要不然的話，常見的一些簡單動態效果你只需要把這幾次的講座介紹的步驟自己做一些練習一下，熟悉步驟就可以了。

雖然Silverlight 2可能會在10月才正式發表，但我想透過這一系列講座幫助大家可以在Silverlight 2上市之前，就可以完全了解如何在ASP.NET網頁當中使用Silverlight 2的技術 -- 希望可以幫助大家減少摸索、與買書來看的時間。接下來的講座，我將繼續為各位介紹一下動態漸層顯示與版面配置的一些基本技巧，再來就要正式進入到程式開發的部分。

Silverlight 2 講堂 -3：讓畫面動起來

在Silverlight應用程式中，你可以透過下面兩種方式建立動態的效果：

1. 透過事件處理常式
2. 透過Storyboard設計動作流程

在前一堂課中，我們介紹的就是透過事件處理常式，動態更新使用者操作介面內容的簡單範例。但若是你要讓事件發生時，表單中的控制項可以有更豐富的動態效果的話，那就必須透過Expression Blend開發工具先設計控制項的動作流程之後，然後在指定的事件發生時，再去啟動Storyboard的動作流程執行。在這一堂課我們先學簡單的動態效果 --> 移動控制項位置。

1. 首先，先利用Expression Blend 2.5 June 2008 Preview設計工具開啟HelloWorld解決方案，然後從HelloWorld專案中開啟Page.xaml。接著，按下[Objects and Timeline]視窗中的加號按鈕，建立新的Storyboard：

2. 在這一堂課當中，我們希望當畫面中的按鈕在使用者按下去之後，可以有搖動一下的動態效果。因此建立的Storyboard就取名AfterButtonClick：

3. 接下來在設計介面上就會出現紅色的框線，表示開始錄製動作。此時的[Objects and Timeline]視窗如下圖：

4. 展開[Objects and Timeline]視窗下的[StackPanel]節點，選取btnClick 元素。然後將滑鼠移到Button元素的左上角，當初旋轉控點 時，就可以旋轉按鈕位置。先將Button逆時針往下轉一點，此時在時間軸會建立一個主要畫面格，記錄Button外觀：

5. 移動時間軸(黃線)到0.1秒位置，重複上面步驟將按鈕調整為水平。

6. 移動時間軸(黃線)到0.2秒位置，重複上面步驟順時針調整按鈕。若是要更精準的調整旋轉的角度的話，也可以使用Transform視窗調整，正數表示順時針旋轉角度：

你可以將Angle值調整為10。

7. 移動時間軸(黃線)到0.3秒位置，將Angle值調整為0(水平)。

8. 移動時間軸(黃線)到0.4秒位置，將Angle值調整為-10。

9. 移動時間軸(黃線)到0.5秒位置，將Angle值調整為0(水平)。

10. 移動時間軸(黃線)到0.6秒位置，將Angle值調整為5。

11. 移動時間軸(黃線)到0.7秒位置，將Angle值調整為0(水平)。

12. 移動時間軸(黃線)到0.8秒位置，將Angle值調整為-5。

13. 移動時間軸(黃線)到0.9秒位置，將Angle值調整為0(水平)。

14. 點選設計視窗左上角的紅點，關閉時間軸錄製的功能。

15. 完成之後存檔，回到VS 2008開發工具，開啟HelloWorld專案中的Page.xaml.cs程式檔，在btnClick_Click方法中加入啟動Storyboard的程式碼：

private void btnClick_Click(object sender, RoutedEventArgs e) {        AfterButtonClick.Begin();        txtInfo.Text = txtData.Text + "你好，現在時間是"               + DateTime.Now.ToLongTimeString(); }

16. 完成之後，先建置Silverlight專案(HelloWorld)，再建置網站(HelloWorldWeb)，就可以透過瀏覽器檢視測試頁(HelloWorldTestPage.aspx或HelloWorldTestPage.html)，結果如下：

利用這一次教的時間軸操作技巧，再加上一些簡單的設計，就可以產生有趣的動態效果。這次先完成這些，下次再來做一個會動的風火輪。