Silverlight 2 講堂 -8：透過程式處理事件

在第7堂課中，我們完成了動態切換顯示圖片的例子。但是在最後測試的時候，卻發現只有HideMyCat3時間軸的效果有出來，HideMyCat2時間軸的效果卻沒有顯示出來，這是為什麼呢?

先來看看Button_Click方法的程式碼：

private void Button_Click(object sender, RoutedEventArgs e) {         HideMyCat2.Begin();         image.Source = _pic1;         HideMyCat3.Begin(); }

看出問題了嗎? 因為HideMyCat2與HideMyCat3時間軸的動作效果中，都要改變image控制項的狀態；因此若是當HideMyCat2的動作位完成前就啟動HideMyCat3時間軸的話，HideMyCat2的動作效果就不會顯示。

要如何解決這一個問題呢?

事實上，Silverlight 2在用戶端執行時，是以物件導向的方式執行，原理與ASP.NET的Server Control相當類似。換句話說，每一個XAML當中的項目，在執行時期都是物件，所以都可以透過程式控制其效果，也因此你才可以在Page.xaml.cs的程式碼中直接透過呼叫Begin方法啟動時間軸。HideMyCat2時間軸在程式中是屬於System.Windows.Media.Animation命名空間所定義的的Storyboard型別物件，除了有Begin方法可以使用之外，也提供了Completed事件。因此我們可以透過Completed事件偵測HideMyCat2時間軸的動作是否執行完成，完成之後再替換掉Image控制項所顯示的圖片，然後啟動HideMyCat3時間軸的動作效果。我們只需要按照下面步驟修改程式就可以了：

1. 使用VS 2008開啟LayoutSample解決方案，並且開啟Page.xaml.cs程式碼。

2. 在Page類別的建構函式中，加入註冊HideMyCat2時間軸的Completed事件處理函式的程式碼。你可以直接在輸入完"HideMyCat2.Completed +=" 之後連按兩次[Tab]鍵，由VS 2008開發工具幫你完成剩下的程式碼即可。：

public Page() {         InitializeComponent();         HideMyCat2.Completed += new EventHandler(HideMyCat2_Completed); }

VS 2008會自動產生HideMyCat2_Completed方法如下：

void HideMyCat2_Completed(object sender, EventArgs e) {         throw new NotImplementedException(); }

3. 接下來在Page類別中宣告一個BitmapImage型別的成員變數，用來暫存下一張要顯示的圖片：

private BitmapImage _nextPic;

4.  修改HideMyCat2_Completed方法，當HideMyCat2時間軸動作完成之後，設定image控制項所要顯示的下一張圖片，然後在啟動HideMyCat3時間軸：

void HideMyCat2_Completed(object sender, EventArgs e) {       image.Source = _nextPic;        HideMyCat3.Begin(); }

5. 修改Button_Click、Button2_Click、Button3_Click方法內容如下：

private void Button_Click(object sender, RoutedEventArgs e) {                  HideMyCat2.Begin();         _nextPic = _pic1; } private void Button2_Click(object sender, RoutedEventArgs e) {         HideMyCat2.Begin();         _nextPic= _pic2; } private void Button3_Click(object sender, RoutedEventArgs e) {         HideMyCat2.Begin();         _nextPic = _pic3; }

如果要讓效果更好一點，你可以再針對Button控制項被選取時設計動作效果，就可以讓畫面更生動。( 各位可以自行練習看看! )

完成之後，先建置Silverlight專案，再建置網站，就可以透過瀏覽器檢視測試頁，結果如下：