SimpleComboBox 及 SimpleComboBoxItem

下拉式方塊是一種類似下拉式清單的項目控制項。在 Microsoft Expression Blend 中，按兩下下拉式方塊並將元素 (例如 SimpleComboBoxItem) 拖曳至下拉式方塊中，就可以填入下拉式方塊的內容。此外，也可以用滑鼠右鍵按一下 [物件與時間軸] 下的下拉式方塊，然後按一下 [新增 SimpleComboBoxItem] 將個別項目新增至集合，或按一下 [將 ItemsSource 繫結至資料]，從某個資料來源產生 [ComboBoxItem] 元素的集合。若要在畫板上檢視已經展開的下拉式方塊，您可以用滑鼠右鍵按一下 [物件與時間軸] 下的下拉式方塊或下拉式方塊項目，然後按一下 [展開 ComboBox]。

新增兩個項目之後 SimpleComboBox 控制項的畫板檢視。

深入控制項範本

SimpleComboBox 控制項範本由下列項目組成：

• [格線] 面板：用來在下拉式方塊內容納多個子項目。Grid 可讓應用程式使用者介面 (UI) 設計師輕鬆地將更多元素新增至範本。

• 名為 ContentSite 的 ContentPresenter 元素：位於 Grid 內，用來顯示選取的項目。

• 名為 PART_EditableTextBox 的文字方塊：位於 Grid 內，可讓使用者編輯下拉式方塊內的文字。因為類別會使用 PART_EditableTextBox 這個名稱尋找此文字方塊，因此請勿變更此名稱。根據預設，此文字方塊會呈摺疊狀態，當套用此控制項範本的下拉式方塊上的 IsEditable 設為 True 時，才會顯示。

• 快顯切換按鈕控制項：用來建立下拉式方塊的展開部分。快顯控制項會自行決定與其他控制項的相對位置，並且呈現在所有其他內容之上。這種控制項也支援某些內建的動畫。

• 快顯控制項內包含的 Grid 控制項：裡面又包含一個可用來捲動項目清單的 ScrollViewer。ScrollViewer 中的 StackPanel 會決定每個項目的位置。StackPanel 的 IsItemsHost 屬性會設為 True，讓下拉式方塊控制項知道要將子元素置於 StackPanel 內。若要變更項目的顯示方式，您可以用滑鼠右鍵按一下 [物件與時間軸] 底下的下拉清單格線，然後將 [變更版面配置類型] 設為不同的面板 (例如 UniformGrid)，取代此版面配置面板。

SimpleComboBoxItem 控制項範本由下列項目組成：

• [格線] 面板：用來在下拉式方塊項目內容納多個子項目。同時，它還可讓設計師輕鬆地將更多的元素新增至範本。

• [框線] 元素：此元素有 BorderThickness 屬性，可以透過範本繫結至套用此範本之按鈕控制項的 BorderThickness 屬性。

• ContentPresenter 元素：位於 Grid 元素內，且會自動繫結至套用此範本之項目集合控制項的 Content 屬性。

  物件檢視：SimpleComboBox 控制項 (左) 和 SimpleComboBoxItem 控制項 (右) 的基本部分 (範本)。

  

回到頁首

使用屬性觸發程序

控制項範本中的屬性觸發程序，可讓控制項回應屬性變更。您可以在 [互動] 面板中，按一下 [觸發程序] 底下的項目，檢視觸發程序啟動時變更的屬性。例如，在下拉式方塊的範本中，當 HasItems 屬性為 False 時，DropDownBorder 元素的最小高度會設為 95，此時按一下下拉式方塊會顯示空的下拉式視窗。若最小高度設為 0，則會顯示非常小的下拉視窗。在下拉式方塊項目的範本中，當 IsHighlighted 屬性為 True 時，會變更 Border 元素的 Background 屬性，以突顯下拉式方塊中選取的項目。

回到頁首

使用筆刷

SimpleComboBox 及 SimpleComboBoxItem 範本會使用 SimpleStyles.xaml 資源字典中的下列筆刷資源：

• DropDownBorder 元素的 Background 屬性是設為使用 WindowBackgroundBrush。

• DropDownBorder 元素的 BorderBrush 屬性是設為使用 SolidBorderBrush。

• 當 IsEnabled 為 False 時，Foreground 屬性會設為 DisabledForegroundBrush。

• 若將使用 SimpleComboBoxItem 範本的項目填入 SimpleComboBox 中，則當選取項目時，項目的 Background 屬性會設為使用 SelectedBackgroundBrush，而若 IsEnabled 為 False，則 Foreground 屬性會設為使用 DisabledForegroundBrush。

回到頁首

最佳作法與設計方針

• 一般而言，如果您希望設計師在控制項上新增更多視覺元素，請使用 Grid 控制項作為範本的根。Expression Blend 會搜尋類似 Grid 控制項的版面配置面板，並且將它設為預設啟用，讓新增至畫板的新元素成為版面配置面板的子元素。

• 若要將 ComboBox 設為展開狀態，必須將 ToggleButton 的 IsChecked 屬性與快顯的 IsOpen 屬性同時繫結至套用此控制項範本之下拉式方塊的 IsDropDownOpen 屬性。要編輯 ToggleButton 或快顯，必須確定此範本繫結持續存在。

• ToggleButton 元素使用名稱為 ToggleButtonControlTemplate 的不同範本。若要修改該範本，請用滑鼠右鍵按一下 ToggleButton 元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本] 或 [編輯複本]。

• 若要編輯 SimpleComboBoxItem 範本，請按一下 [資源] 面板中 [SimpleComboBoxItem] 樣式旁的 [編輯資源] 按鈕。在樣式的編輯模式中，用滑鼠右鍵按一下 [物件與時間軸] 下的 [樣式]，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本] 或 [編輯複本]。若修改 SimpleComboBoxItem 範本，您可能會想要保留或修改 IsHighlighted 觸發程序。

回到頁首

請參閱

概念

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