建立可控制 Silverlight 應用程式中腳本的按鈕

在 Microsoft Silverlight 1.0 應用程式中建立按鈕時，需要繪製按鈕的組成元素；在版面配置面板中整合這些元素，使之容易複製；以及撰寫 JavaScript 程式碼，於按鈕事件發生 (如某人按一下按鈕) 時，執行特定動作。

注意事項：
如需使用多個按鈕事件的完整範例，請參閱 [ButtonGallery] 範例；若要開啟此範例，請按一下 [說明] 功能表中的 [歡迎畫面]，然後按一下 [範例] 索引標籤中的 [ButtonGallery]。

繪製按鈕的元素

您可以使用任何元素建立按鈕的外觀，包括圖形、線條、文字及影像。下列程序示範如何繪製矩形與文字區塊，但您可使用將元素新增至 Silverlight 專案的 XAML 文件中主題所列的任一項程序。

繪製按鈕的元素

1. 在 Microsoft Expression Blend 2 中於 Silverlight 1.0 開啟的情況下，於 [工具箱] 中選取 [矩形] 工具。

   

   若未顯示 [矩形] 工具，請以滑鼠右鍵按一下工具容器，從中尋找及選取 [矩形] 工具。

   

2. 拖曳指標在畫板上繪製矩形。繪製時，指標會轉變為 X 號 。

   

3. 從 [物件與時間軸] 下選取新矩形元素，以變更其外觀。例如，在 [屬性] 面板的 [筆刷] 下，按一下 [漸層筆刷] 索引標籤上的 [填滿]，然後定義漸層的終止色彩。

   

   注意事項：
   您可以依照外觀與轉換中的程序，對矩形的外觀進行更多變更。

4. 從 [工具箱] 中選取 [TextBlock] 控制項。

   

5. 在矩形的頂端繪製文字區塊元素。您可能需要從 [工具箱] 中選取 [選取] 工具 ，然後拖曳畫板元素周圍的藍色提示，調整矩形或文字區塊元素的大小，或在畫板上移動。

   

6. 在 [物件與時間軸] 下選取了新文字區塊元素後，按 F2 可進入文字編輯模式，然後鍵入 Button，以變更元素中所顯示的文字。按一下文字區塊元素的外部，以結束文字編輯模式。

   注意事項：
   如需如何修改文字區塊外觀的詳細資訊，請參閱文字和印刷格式下的主題。

7. 若還要對按鈕的外觀進行修飾，可以依照將元素新增至 Silverlight 專案的 XAML 文件中中所列的程序，在畫板上繪製更多的元素。

回到頁首

在版面配置面板中整合按鈕元素

在單一版面配置中整合按鈕元素 (Canvas 元素)，可簡化複製按鈕的程序。這是因為您可將其複製並貼上版面配置面板，而無需先選取所有按鈕的組成元素，然後再進行複製。此外，在 [畫布] 版面配置面板整合按鈕元素，亦可簡化建立按鈕事件處理常式的程序。例如，您可以建立事件處理常式對指標移過版面配置面板時的整體回應，而不是對指標移過按鈕一部分時的回應。

將元素整合版面配置面板

1. 在 [物件與時間軸] 下，按住 CTRL 鍵，然後選取所有的按鈕組成元素。

2. 以滑鼠右鍵按一下所選的元素，然後指向 [群組置入]，再按 [畫布]。

   

3. 以滑鼠右鍵按一下 [物件與時間軸] 下的新畫布元素，再按 [重新命名]，然後輸入按鈕的新名稱 (例如 MyButton)，再按下 ENTER。

   此後當您要複製按鈕時，只要複製並貼上 [MyButton] 元素即可。

回到頁首

建立動畫腳本以變更按鈕的外觀

一般來說，當使用者按一下應用程式中的按鈕時，按鈕即會顯示可察覺的變化。下列程序示範如何建立動畫腳本，讓您的按鈕元素出現放大的效果。

注意事項：
您可以動畫顯示應用程式中的任何元素，而不只是按鈕中的元素。例如，您可以將按鈕設定為在按下它時，會有小型影像圍繞在按鈕周圍。

建立動畫腳本

1. 按一下 [物件與時間軸] 下的 [新增] 按鈕 。

   

   [建立腳本] 對話方塊會隨即開啟。

   

2. 腳本的預設 [名稱] 為 [Storyboard1]。請保留該名稱 [Storyboard1]，因為下一項程序中的程式碼將會參照此名稱。

3. 預設亦會選取 [建立腳本] 核取方塊。由於您不希望動畫在應用程式載入瀏覽器視窗時立即執行，因此請勿清除此核取方塊。但您希望由程式碼完全控制 (啟動及停止) 動畫。

4. 按一下 [確定]。

   Expression Blend 會建立腳本，並進入動畫模式。

   

   注意事項：
   您可以按 F6，選擇是否要變更 [互動] 面板的位置。當 [互動] 面板出現在畫板下時，可檢視多個時間軸。

5. 選取 [物件與時間軸] 下的 [MyButton] 控制項。

6. 按一下時間軸上方的 [記錄主要畫面格] 按鈕 。

   新的主要畫面格會設定為記錄按鈕元素目前的外觀。

7. 將時間軸播放點 移至半秒標記 (動畫的結束時間)，然後再按一次 [記錄主要畫面格] 按鈕 。

   新的主要畫面格會設定為記錄按鈕元素目前的外觀。此按鈕會在動畫結束時，與此記錄的外觀類似。

   

8. 將時間軸播放點 移至 1/4 秒標記。您可以在此變更按鈕的外觀。

   注意事項：
   若無法將時間軸精確地移至 1/4 秒標記 (0:00.250)，表示貼齊解析度過低。若要增加貼齊解析度，請按一下 [貼齊選項] 按鈕 ，再將 [每秒貼齊解析度] 設定為 20，然後按一下 [確定]。

9. 將時間軸播放點設於 1/4 秒標記，然後選取 [MyButton] 元素，即可在畫板上變更按鈕的大小。若要執行此作業，您可於按住 ALT 鍵時拖曳右下角的調整大小控點以保持中心點。

   

   新的主要畫面格會自動加入位於 1/4 秒標記的時間軸，記錄按鈕的新大小與位置。請注意，[物件與時間軸] 下已新增了 [RenderTransform] 元素，讓您可以指定按鈕的新大小 ([縮放]) 與新位置 ([平移])；此外還新增了這些元素的主要畫面格 (即 [MyButton] 上先前所設定的主要畫面格)。Expression Blend 假設動畫要從頭到尾播放 [MyButton] 所設定的主要畫面格。因此會設定 [RenderTransform] 元素之起始與結尾的主要畫面格。

10. 按一下 [播放]  按鈕測試您的動畫。

11. 若要結束動畫模式，請按一下 [關閉腳本] 按鈕 。如此可確保您所變更的元素，不屬於動畫腳本的一部分。

12. 儲存所有檔案。

回到頁首

建立事件處理常式，於您按一下按鈕時觸發動畫腳本。

註冊事件處理常式與撰寫事件處理常式的程式碼工作，可以在程式碼後置檔案中進行。如此可讓程式設計人員與設計人員各自獨立工作，並於完成時輕鬆地將應用程式與程式碼之呈現加以組合。此外，程式設計人員可以透過在事件處理常式中加入新的程式碼，以在按下按鈕時引發其他的動作，例如瀏覽網頁。如需範例，請參閱在 Silverlight 應用程式中建立超連結。

建立事件處理常式

1. 在 [專案] 索引標籤中，按兩下程式碼後置檔案 Page.xaml.js 以將其開啟並進行編輯。

   Page.xaml.js 檔案已包含下列 JavaScript 程式碼：

   • [Page] 物件的定義。

   • 註冊 MouseLeftButtonDown 事件。

   • MouseLeftButtonDown 事件之事件處理常式的定義。

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   注意事項：
   如需有關 JavaScript 在 Microsoft Silverlight 與物件結構的詳細資訊，請參閱指令碼與滑鼠事件 (英文)。

2. 按下滑鼠左鍵時呼叫腳本的程式碼已顯示，但已使用兩道正斜線 (//) 將其標示為註解。

                   // this.control.content.findName("Storyboard1").Begin();
   

   移除雙斜線，取消程式碼的註解。

   this.control.content.findName("Storyboard1").Begin();
   

3. 儲存所有檔案。

4. 按一下 [專案] 功能表中的 [測試專案]，或按 F5，以測試您的專案。

   測試建置若已成功，即會使用 Microsoft Expression Studio 隨附的本機開發伺服器，在預設的網頁瀏覽器中自動開啟該專案。如需有關如何測試 Silverlight 專案的詳細資訊，請參閱從 Expression Blend 測試 Silverlight 專案。

   按一下按鈕，確認是否已觸發腳本。請注意，按一下瀏覽器內的任意處亦會觸發腳本。這是因為事件處理常式註冊於根元素 (Page) 範圍內。

5. 在程式碼行前加上兩道正斜線，將註冊事件處理常式的程式碼行標示為註解，如下所示：

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. 於註解行後新增下行程式碼：

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   請注意，這兩行程式碼之間唯一的差異，在於事件處理常式註冊所在的元素。在標為註解的行中，事件處理常式會註冊於 rootElement 中。在貼上的行中，事件處理常式已使用 findName 方法找出元素，註冊於 MyButton 上。

7. 再次儲存所有檔案。

8. 按一下 [專案] 功能表中的 [測試專案]，或按 F5，以測試您的專案。

   按一下按鈕，然後按一下按鈕以外的位置，確認動畫腳本只會於按一下按鈕時觸發。

回到頁首

請參閱

概念

從 Expression Blend 測試 Silverlight 專案