共用方式為


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

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(ZH-TW,Expression.30).png

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

建立按鈕的滑鼠指向效果

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

    Cc294737.alert_tip(ZH-TW,Expression.30).gif秘訣:

    您可以在 [資產] 面板的 Cc294737.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-TW,Expression.30).png [樣式] 類別中,[簡單樣式] 下提供可用的簡單樣式控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後,就可以在畫板上繪製該控制項。

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

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

    Cc294737.alert_tip(ZH-TW,Expression.30).gif秘訣:

    若要結束範本編輯模式並返回您的文件範圍,請在 [物件與時間軸] 面板中的物件樹狀目錄上方,按一下 [將範圍傳回] Cc294737.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ZH-TW,Expression.30).png

    若要返回現有範本的範本編輯模式:在 [物件與時間軸] 面板中,以滑鼠右鍵按一下要編輯範本的物件,指向 [編輯範本],然後按一下 [編輯目前的項目]。

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

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

  5. 從 [工具列] 中,將三個 [Grid] 控制項 Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ZH-TW,Expression.30).png 新增至範本的根 Grid 物件。若要使新的 Grid 物件填滿父項 Grid 物件,請在選取新的 Grid 物件後指向 [物件] 功能表上的 [自動調整大小],然後再按一下 [填滿]。

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

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

  8. 為了設定觸發程序行為,每個觸發程序必須只能顯示一個格線物件。例如,在 [觸發程序] 面板中選取 [預設] 後,按住 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. 現在您可以根據在 [觸發程序] 面板中選取的不同情況,依想要的方式設計每個格線物件在這些情況下的外觀。

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

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

    若要在設計其中一個格線物件時隱藏其他格線物件,可以在 [物件與時間軸] 面板中按一下其他格線物件旁邊的 [隱藏/顯示] Cc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(ZH-TW,Expression.30).png

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

請參閱

概念

SimpleButton