共用方式為

試試看：自訂 SimpleComboBox 中擴充器按鈕的外觀

  • 發行項

本頁僅適用 WPF 專案

您可以在 Microsoft Expression Blend 中，使用 SimpleComboBox 的 ToggleButton 控制項範本，輕鬆自訂下拉式方塊中的 Expander 按鈕的外觀。

自訂 SimpleComboBox 中的 Expander 按鈕

  1. 在 Expression Blend 中的畫板上繪製 SimpleComboBox 。

    tip note秘訣：

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

  2. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的下拉式方塊，然後按一下 [新增 SimpleComboBoxItem]，將項目新增至下拉式方塊中。

  3. 重複上述步驟，再將一個或多個項目新增至下拉式方塊中。

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

    tip note秘訣：

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

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

  5. 在控制項範本的編輯範圍中，展開 [物件與時間軸] 面板中的所有節點。

  6. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的 ToggleButton 物件，指向 [編輯範本]，然後執行下列一項動作：

    • 若您在步驟 4 中選取 [編輯目前的項目]，現在請按一下 [編輯目前的項目]，以編輯 SimpleStyles.xaml 中儲存的 ExpanderToggleButton 控制項範本。

    • 若您在步驟 4 中選取 [編輯複本]，現在請按一下 [編輯複本] 以建立 ExpanderToggleButton 控制項範本的複本，並將它儲存在與 ComboBox 的範本相同的位置。

    Expander 按鈕的外觀是在 ExpanderToggleButton 控制項範本中設計。請注意，範本中的 Grid 會使整個下拉式方塊的寬度變大。這項設計可以讓下拉式清單在使用者按一下下拉式方塊的任何一處時顯示。

  7. 選取 [物件與時間軸] 面板中的 Arrow 物件，在畫板上識別此物件。 Arrow 物件是用來呈現 ComboBox 控制項之 Expander 按鈕的 Path 。

    您可以使用 [直接選取] 工具 Cc294708.6dd6571f-c116-451d-8dd2-1f88b8406362(zh-tw,Expression.40).png 調整路徑上的點，以修改 Arrow 物件。或者，您也可以刪除 Arrow 物件，然後使用 [工具] 面板中的 [畫筆] 工具 Cc294708.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-tw,Expression.40).png 建立新的物件。

    tip note秘訣：

    若要放大顯示畫板上的內容，您可以使用畫板底部的 [縮放] 文字方塊 Cc294708.12524287-c48b-4cfc-b614-01951207239d(zh-tw,Expression.40).png，或是在按住 CTRL 鍵時使用滑鼠上的滾輪。
    tip note秘訣：

    除了使用 [畫筆] 工具繪製路徑物件以外，您也可以使用從 Microsoft Expression Design 匯入的藝術資源，或是已新增至您專案中的影像檔案。

  8. 按一下 Expander 按鈕時的滑鼠指向效果是由屬性觸發程序所定義，該觸發程序會變更 ToggleButton 控制項範本中 Rectangle 物件的外觀。您可以在現有的觸發程序中新增屬性變更，讓 Arrow 物件在按一下 Expander 按鈕時開始旋轉。在 [物件與時間軸] 面板中選取 Arrow 物件的情況下，在 [觸發程序] 面板中按一下 IsChecked = True ，再於 [屬性] 面板的 [轉換] 下按一下 [旋轉] 索引標籤，然後在 [角度] 文字方塊中輸入 180 。

    當使用者按一下擴充器按鈕來展開下拉式方塊時， Arrow 物件會旋轉 180 度，如果再按一次，則會恢復原始旋轉角度。

    tip note秘訣：

    當 [觸發程序] 面板中已選取某個屬性觸發程序時，您在 Expression Blend 中任何位置所做的編輯動作，都會在該觸發程序條件上設定一個需要變更的值。在進行任何變更之前，請確定已選取正確的觸發程序。若要讓變更影響控制項範本的預設狀態，請按一下 [觸發程序] 面板中的 [預設]。

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

另請參閱

概念

SimpleComboBox 及 SimpleComboBoxItem

Copyright © 2011 by Microsoft Corporation. All rights reserved.