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

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

自訂 SimpleComboBox 中的擴充器按鈕

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

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

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

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

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

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

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

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

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

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

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

7. 選取 [物件與時間軸] 面板中的 [Arrow] 元素，在畫板上識別此元素。[箭號] 元素是一種呈現 [ComboBox] 控制項之 Expander 按鈕的路徑。

   您可以使用 [直接選取] 工具 調整路徑上的點，以修改 [箭號] 元素。或者，您也可以刪除 [Arrow] 元素，然後使用 [工具] 面板中的 [畫筆] 工具 建立新的元素。

   秘訣：
   若要放大顯示畫板上的內容，您可以使用畫板底部的 [縮放] 文字方塊 ，或是在按住 CTRL 鍵時使用滑鼠上的滾輪。

   秘訣：
   除了使用 [畫筆] 工具繪製路徑元素以外，您也可以使用從 Microsoft Expression Design 匯入的圖案資源，或是新增至專案中的影像檔案。

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

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

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

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

請參閱

概念

SimpleComboBox 及 SimpleComboBoxItem