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

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

自訂 SimpleComboBox 中的擴充器按鈕

在 Expression Blend 的畫板上繪製一個 SimpleComboBox。

在 [資產庫]

中，您可以從 [控制項] 索引標籤的 [Simple Styles] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。

以滑鼠右鍵按一下 [物件與時間軸] 下的下拉式方塊，然後按一下 [新增 SimpleComboBoxItem]，將項目新增至下拉式方塊中。
重複上述步驟，再將一個或多個項目新增至下拉式方塊中。

以滑鼠右鍵按一下 [物件與時間軸] 下的 [ComboBox]，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。如果您不想變更 SimpleStyles.xaml 資源字典，可以按一下 [編輯複本] (不是 [編輯範本]) 以建立新範本並儲存至文件中。如需建立複本的詳細資訊，請參閱建立資源。

若要結束範本編輯模式並返回您的文件範圍，請在 [互動] 面板中的元素樹狀目錄上方按一下 [選定範圍] 按鈕

。

若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 下，以滑鼠右鍵按一下您要編輯其範本的元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。

在控制項範本的編輯範圍中，展開 [物件與時間軸] 下的所有節點。
以滑鼠右鍵按一下 [物件與時間軸] 下的 ToggleButton 元素，指向 [編輯控制項組件 (範本)]，然後執行下列其中一項動作：
- 如果您在步驟 4 中選取 [編輯範本]，現在請按一下 [編輯範本] 來編輯 SimpleStyles.xaml 中儲存的 ExpanderToggeButton 控制項範本。
- 如果您在步驟 4 中選取 [編輯複本]，現在請按一下 [編輯複本] 來建立 ExpanderToggeButton 控制項範本的複本，並將它儲存在與 ComboBox 的範本相同的位置。
Expander 按鈕的外觀是在 ExpanderToggeButton 控制項範本中設計。請注意，範本中的 [格線] 會使整個下拉式方塊的寬度變大。這項設計可以讓下拉式清單在使用者按一下下拉式方塊的任何一處時顯示。

選取 [物件與時間軸] 下的 [箭號] 元素，在畫板上識別此元素。[箭號] 元素是一種呈現 ComboBox 控制項之 Expander 按鈕的路徑。
您可以使用 [直接選取] 工具

，調整路徑上的點來修改 [箭號] 元素。或者，您也可以刪除 [箭號] 元素，然後使用 [工具箱] 上的 [畫筆] 工具

建立新的元素。

若要放大顯示畫板上的內容，您可以使用畫板底部的 [縮放] 文字方塊

，或是在按住 CTRL 鍵時使用滑鼠上的捲動按鈕。

另一種代替使用 [畫筆] 工具來繪製路徑元素的方式，就是使用從 Microsoft® Expression® Design 匯入的藝術資源，或是已經新增至您專案中的影像檔。

按一下 Expander 按鈕時的滑鼠指向效果是由屬性觸發程序所定義，該觸發程序會變更 ToggleButton 控制項範本中 [矩形] 元素的外觀。您可以在現有的觸發程序中新增屬性變更，讓 [箭號] 元素在按一下 Expander 按鈕時開始旋轉。在 [物件與時間軸] 下選取 [箭號] 元素的情況下，請在 [互動] 面板的 [觸發程序] 下按一下 [IsChecked = True]，再於 [屬性] 面板的 [轉換] 下按一下 [旋轉] 索引標籤，然後在 [角度] 文字方塊中輸入 180。
當使用者按一下擴充器按鈕來展開下拉式方塊時，[箭號] 元素會旋轉 180 度，如果再按一次，則會恢復原始旋轉角度。

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

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