共用方式為


試試看:使用效果設定按鈕樣式

This page applies to WPF projects only

除了使用屬性觸發程序來根據使用者互動以變更按鈕的外觀以外,在 Microsoft Expression Blend 中,您還可以對每一種狀態套用效果。

在按鈕上建立效果

  1. 在 Expression Blend 的畫板上繪製一個 SimpleButton 物件。

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

    在 [資產] 面板的 [樣式] 類別中,[簡單樣式] 下提供可用的簡單樣式控制項。從清單中選取簡單樣式控制項之後,就可以在畫板上繪製該控制項。

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

    如需有關建立複本的詳細資訊,請參閱建立資源

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

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

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

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

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

  5. 在格線中繪製 [矩形] 物件,然後在 [屬性] 面板的 [筆刷] 下將 [Fill] 屬性設為黃色。

  6. 以滑鼠右鍵按一下 [矩形] 物件,指向 [順序],然後按一下 [移到最下層],將矩形物件放在 [ContentPresenter] 物件的後一層。

  7. 使用提示 Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(ZH-TW,Expression.30).png (當滑鼠指標移至矩形左上角之外的兩個控點之一時出現),或在 [屬性] 面板的 [外觀] 下使用 [RadiusX] 和 [RadiusY] 屬性,將 [Rectangle] 物件變成圓角。

  8. 從 [資產] 面板的 [效果] 類別,將 [DropShadowEffect] 物件拖曳到 [矩形] 物件。

    陰影隨即新增至 [矩形] 物件,成為子物件。

  9. 在 [物件與時間軸] 面板中選取 [DropShadowEffect] 後,在 [屬性] 面板中調整該效果的屬性。請將 [ShadowDepth] 屬性設為 20。

  10. 在 [觸發程序] 面板中,按一下 [IsMouseOver = True] 觸發程序,以啟用觸發程序錄製功能。在 [屬性] 面板中,將 [ShadowDepth] 屬性設為 25。

    [觸發程序] 面板中的 [使用時的屬性] 下會出現新行,反映當滑鼠移至按鈕上方時會發生的屬性變更。

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

    您可能需要調整 [觸發程序] 面板的視窗,才能看到所有的觸發程序和動作。請使用滑鼠來調整視窗的大小。

  11. 在 [觸發程序] 面板中,按一下 [IsPressed = True] 觸發程序,以啟用觸發程序錄製功能。在 [屬性] 面板中,將 [ShadowDepth] 屬性設為 10。

    [觸發程序] 面板中的 [使用時的屬性] 下會出現新行,反映在執行中應用程式裡按一下按鈕時會發生的屬性變更。

  12. 在 [觸發程序] 面板中按一下 [預設],關閉觸發程序錄製功能。

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

請參閱

工作

新增或移除觸發程序

概念

SimpleButton

使用觸發程序定義 WPF 控制項的行為

套用效果