試試看:建立滑鼠指向效果按鈕
您可以根據使用者互動來變更按鈕的外觀,在按鈕範本中建立滑鼠指向效果。除了透過觸發動畫時間軸或觸發屬性變更來產生滑鼠指向效果外,您也可以使用下列程序建立多個 [格線] 面板來呈現按鈕的每一個狀態,然後切換每一個 [格線] 面板的 Visibility 屬性。
建立按鈕的滑鼠指向效果
在 Microsoft Expression Blend 中的畫板上繪製 SimpleButton。
秘訣: 在 [資產庫] 中,您可以從 [控制項] 索引標籤的 [簡單樣式] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後,就可以在畫板上繪製該控制項。
以滑鼠右鍵按一下 [物件與時間軸] 下的按鈕,指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。若您不想變更 SimpleStyles.xaml 資源字典,可以按一下 [編輯複本] (而非 [編輯範本]) 以建立新範本,並儲存至文件中。如需有關建立複本的詳細資訊,請參閱建立資源。
秘訣: 若要結束範本編輯模式並返回您的文件範圍,請在 [互動] 面板中的元素樹狀目錄上方,按一下 [選定範圍] 按鈕 。
若要返回現有範本的範本編輯模式,請在 [物件與時間軸] 下,以滑鼠右鍵按一下要編輯範本的元素,指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。
在控制項範本的編輯範圍中,刪除 [格線] 的 [框線] 子元素。
按兩下 [格線] 元素,使其成為使用中狀態,以便新增子元素。
從 [工具箱] 中,將三個 [格線] 控制項 新增至範本的格線中若要快速新增這些控制項,請按兩下 [工具箱] 中的 [格線] 圖示,接著以滑鼠右鍵按一下 [物件與時間軸] 下的每個 Grid 控制項、指向 [自動調整大小],然後按一下 [填滿]。
以滑鼠右鍵按一下 [ContentPresenter] 元素,指向 [順序],然後按一下 [提到最上層],讓此元素置於新 [格線] 物件的上層。
在 [物件與時間軸] 下,以滑鼠右鍵按一下每個控制項,再按一下 [重新命名],分別將新的格線物件重新命名為 "Default"、"Pressed" 及 "MouseOver"。
為了設定觸發程序行為,每個觸發程序只需要顯示一個格線物件。例如,在 [互動] 面板的 [觸發程序] 下選取 [預設值] 後,按住 CTRL 鍵並按一下 [Pressed] 和 [MouseOver] 格線物件,以選取這些物件。 然後,在 [屬性] 面板的 [外觀] 下,將 [Visibility] 屬性設為 [Hidden]。
在 [互動] 面板的 [觸發程序] 下按一下 [IsMouseOver = True],選取 [Pressed] 與 [Default] 格線物件,然後在 [屬性] 面板的 [外觀] 下,將 [Visibility] 屬性設為 [Hidden]。
最後,在 [觸發程序] 下選取 [IsPressed = True] 的情況下,再選取 [MouseOver] 與 [Default] 格線物件,然後在 [屬性] 面板的 [外觀] 下,將 [Visibility] 屬性設為 [Hidden]。
現在,您能夠以所要的方式設計每個格線物件,讓這些物件在不同的情況下出現。您可以使用繪圖工具與動畫時間軸來建立按鈕的特殊行為。若要在設計其中一個格線物件時隱藏其他格線物件,可以在 [物件與時間軸] 下按一下其他格線物件旁邊的 [隱藏/顯示] 按鈕。
測試您的應用程式 (F5) 以查看效果。