試試看：建立滑鼠指向效果按鈕

您可以根據使用者互動來變更按鈕的外觀，在按鈕範本中建立滑鼠指向效果。除了透過觸發動畫時間軸或觸發屬性變更來產生滑鼠指向效果外，您也可以使用下列程序建立多個 Grid 面板來呈現按鈕的每一個狀態，然後切換每一個 Grid 面板的 Visibility 屬性。

建立按鈕的滑鼠指向效果

1. 在畫板上繪製一個 SimpleButton 。

   秘訣：
   您可以在 [資產] 面板的 [樣式] 類別中，[簡單樣式] 下提供可用的簡單樣式控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。

2. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的 Button 物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。若不想變更 SimpleStyles.xaml 資源字典，您可以按一下 [編輯複本] 代替 [編輯目前的項目] 來建立新範本並儲存至文件中。

   如需有關建立複本的詳細資訊，請參閱建立或修改範本。

   秘訣：
   若要結束範本編輯模式並返回您的文件範圍：在 [物件與時間軸] 面板中的物件樹狀目錄上方，按一下 [將範圍傳回] 。 若要返回現有範本的範本編輯模式：在 [物件與時間軸] 面板中，以滑鼠右鍵按一下要編輯範本的物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。

3. 在控制項範本的編輯範圍中，刪除 Grid 的 Border 子物件。

4. 按一下 Grid 物件，使其成為使用中狀態，以便新增子物件。

5. 從 [工具列] 中，將三個 Grid 控制項 新增至範本的根 Grid 物件。若要使新的 Grid 物件填滿父項 Grid 物件，請在選取新的 Grid 物件後指向 [物件] 功能表上的 [自動調整大小]，然後再按一下 [ Fill ]。

6. 以滑鼠右鍵按一下 ContentPresenter 物件，指向 [順序]，然後按一下 [提到最上層]，將 ContentPresenter 物件置於新 Grid 物件的上層。

7. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下每個物件，再按一下 [重新命名]，分別將新的格線物件重新命名為 "Default"、"Pressed" 及 "MouseOver"。

8. 為了設定觸發程序行為，每個觸發程序必須只能顯示一個格線物件。例如，在 [觸發程序] 面板中選取 [Default] 後，按住 CTRL 鍵並按一下 Pressed 和 MouseOver 格線物件，以選取這些物件。然後，在 [屬性] 面板中的 [外觀] 下，將 Visibility 屬性設為 Hidden 。

9. 按一下 [觸發程序] 面板中的 IsMouseOver = True ，選取 Pressed 和 Default 格線物件，然後在 [屬性] 面板的 [外觀] 下，將 Visibility 屬性設為 Hidden 。選取 MouseOver 格線物件，然後將 Visibility 屬性設為 Visible 。

10. 最後，在 [觸發程序] 下選取 IsPressed = True 後，選取 MouseOver 和 Default 格線物件，然後在 [屬性] 面板的 [外觀] 下，將 Visibility 屬性設為 Hidden 。選取 Pressed 格線物件，然後將 Visibility 屬性設為 Visible 。

11. 現在您可以根據在 [觸發程序] 面板中選取的不同情況，依想要的方式設計每個格線物件在這些情況下的外觀。

    您可以使用繪圖工具與動畫時間軸來建立按鈕的特殊行為。

    如需詳細資訊，請參閱繪製物件與將物件製作成動畫。

    若要在設計其中一個格線物件時隱藏其他格線物件，可以在 [物件與時間軸] 面板中按一下其他格線物件旁邊的 [隱藏/顯示] 。

12. 測試您的應用程式 (F5) 以查看效果。

另請參閱

概念

SimpleButton

Copyright © 2011 by Microsoft Corporation. All rights reserved.