ComboBox 控制項樣式提示

ComboBox 控制項代表結合不可編輯之文字方塊與 Popup 控制項的物件。Popup 控制項包含可讓使用者從清單選取項目的 ListBox 控制項。

ComboBox 控制項 (包括 Popup 控制項、ListBox 控制項，以及包含在 ComboBox 物件中的每個 ComboBoxItem 控制項) 和所有控制項一樣，可以修改成與預設外觀完全不同。ComboBox 控制項的預設外觀如下：

相關的 ComboBox 控制項屬性

您可以在 [屬性] 面板中設定 [一般屬性] 下的 [SelectedIndex] 屬性，以藉此設定在 ComboBox 控制項中選取的項目。值 -1 可顯示未選取任何項目的 ComboBox 物件。值 0 則可顯示已選定第一個項目的 ComboBox 物件。

若要新增項目至 ComboBox 控制項，您可以手動新增 ComboBoxItem 物件，或將資料集合繫結至 ComboBox 物件，使項目自動出現。

如需詳細資訊，請參閱將物件繫結至資料與建立範例資料。

ComboBox 範本的組件

ComboBox 控制項使用一個範本來定義下拉式方塊、下拉式箭號及快顯視窗的外觀：ComboBox 範本。這個範本的每個組件都會影響套用範本之 ComboBox 物件的外觀和行為。

秘訣：
若要設定 ComboBox 內含項目的樣式，您必須修改其他範本。例如，當 ComboBox 控制項已繫結資料時，控制項會使用產生的項目範本 (資料範本) 來設定內含項目的樣式。當 ComboBox 控制項未繫結資料時，控制項不會有用來套用到內含項目的範本。反之，您會修改項目本身的範本，例如 ComboBoxItem 範本。

範本中可以有其他用來裝飾 ComboBox 控制項外觀的物件，但是下表列出的是在合約中與控制項行為繫結的組件。

若要檢視範本的組件，請在修改範本時開啟 [組件] 面板。在 [物件與時間軸] 面板中，如果有任何物件扮演的角色是 [組件] 面板中的組件，該物件旁會出現 圖示。

組件名稱	物件類型	描述
ContentPresenter	ContentPresenter	此物件可在 ComboBox 控制項未展開時，顯示目前選取的項目。 此組件為強制組件。
ContentPresenterBorder	FrameworkElement	此版面配置面板包含 ComboBox 控制項的最上層組件。 此組件為強制組件。
DropDownToggle	ToggleButton	按一下此按鈕即可展開 ComboBox 控制項。根據預設，此按鈕含有代表箭號的 Path 物件，不過您可以將該物件變更為影像。
Popup	Popup	此 Popup 物件可顯示 ComboBox 控制項的內容。 此組件為強制組件。

ComboBox 控制項的狀態

根據預設，ComboBox 控制項可以處於 [CommonStates] 狀態群組中的下列三種狀態其中一種，您可以在修改 ComboBox 範本時於 [狀態] 面板中檢視狀態：

狀態名稱	描述
Normal	ComboBox 控制項沒有互動時的外觀。
MouseOver	使用者將指標移到 ComboBox 控制項上方時，控制項所顯示的外觀。
Disabled	當 [IsEnabled] 屬性設為 [False] 時，ComboBox 控制項的外觀。

ComboBox 控制項可以處於 [FocusStates] 狀態群組的下列三種狀態之一：

狀態名稱	描述
Unfocused	ComboBox 控制項沒有鍵盤焦點時的外觀。
Focused	ComboBox 控制項具有鍵盤焦點且未展開時的外觀。例如，使用者可能會按 TAB 鍵來循環顯示應用程式中的物件，直到鍵盤焦點停留在 ComboBox 控制項為止。
FocusedDropDown	ComboBox 控制項具有鍵盤焦點且已展開時的外觀。

ComboBox 控制項可以處於 [ValidationStates] 狀態群組的下列三種狀態之一：

狀態名稱	描述
Valid	ComboBox 控制項有效時的外觀。
InvalidUnfocused	ComboBox 控制項無效且沒有鍵盤焦點時的外觀。
InvalidFocused	ComboBox 控制項無效但具有鍵盤焦點時的外觀。

秘訣：
狀態群組包含屬於相同邏輯類別但無法同時顯示的視覺狀態。例如，[CommonStates] 群組包含的狀態與使用者和輸入裝置 (例如滑鼠) 的互動有關。雖然控制項一次只能顯示同一狀態群組中的一種狀態，但卻可以同時顯示來自不同狀態群組的兩種狀態。

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下畫板上的錄製按鈕 ，或在 [狀態] 面板中選取 [基本]。若要修改控制項在兩種個別狀態同時作用時的外觀，您可以鎖定其中一個狀態群組之狀態的預覽，同時修改另一個狀態群組中的狀態。

將物件轉換成 ComboBox 控制項

若要修改 ComboBox 控制項的範本，請執行下列一項動作：

• 在畫板上繪製 [ComboBox] ，然後再建立預設範本的複本。

  如需詳細資訊，請參閱建立或修改範本。

• 藉由繪製物件或匯入圖案來設計 ComboBox 控制項的外觀，然後再使用 [變成控制項] 命令。

如果使用 [變成控制項] 命令，請依照下列步驟，確保您會建立 ComboBox 範本需要的所有物件：

1. 將所有要用來定義 ComboBox 控制項外觀的物件聚集為 Grid 控制項。

2. 選取新的 Grid 控制項，然後在 [工具] 功能表上，按一下 [變成控制項]。

3. 在出現的對話方塊中，選取 [ComboBox]、為範本命名，然後選取範本的儲存位置。

   如需有關位置的詳細資訊，請參閱建立資源。

4. 在您按一下 [確定] 之後，Microsoft Expression Blend 便會進入範本編輯模式，並顯示組成 ComboBox 控制項的物件。您可以在這個模式中繼續修改範本。例如，新增或修改物件，或是選取 [狀態] 面板中的狀態，以修改範本在該狀態時的外觀。

5. 如果原始物件的群組中含有 TextBlock 物件 ，該物件會在 ComboBox 控制項範本中轉換為 ContentPresenter 物件 。這可讓您的 ComboBox 物件顯示文字。如果您的原始物件不包括 TextBlock 物件，則 ContentPresenter 物件會自動新增至範本中。

   如果程式未將範本中正確的組件指派為 ContentPresenter 物件，請以滑鼠右鍵按一下 ContentPresenter 物件，指向 [變成 ComboBox 的組件]，然後再按一下 [ContentPresenter]。

   如果您想要讓其他物件出現在 ComboBox 控制項中 (即使在目前未選取任何項目的情況下)，可以選擇將這些物件新增或移動到 ContentPresenter 物件內。

6. 如果您有想當作 ComboBox 控制項之下拉箭號的物件或作品，請執行下列動作：

   1. 將這些項目群組成版面配置面板。

   2. 以滑鼠右鍵按一下版面配置面板。

   3. 指向 [變成 ComboBox 的組件]。

   4. 按一下 [DropDownToggle]。

      這會以 ToggleButton 物件取代您的物件，並使用您的物件來建立要套用在 ToggleButton 物件的樣式與範本。

   5. 在 [變成組件] 對話方塊中，輸入即將建立之 ToggleButton 樣式的名稱。

   6. 選取儲存樣式的位置，然後按一下 [確定]。

      在進入新 ToggleButton 物件的範本編輯模式時，您可以繼續進行修改，例如，刪除 [ContentPresenter] 物件 (如果您不想要在 ToggleButton 物件中顯示文字)，或選取 [狀態] 面板中的狀態來修改 ToggleButton 物件處於這些狀態時的外觀。

   7. 若要返回 ComboBox 的範本編輯模式，請在 [物件與時間軸] 面板中按一下 [將範圍傳回] ，或在畫板頂端的階層連結列中按一下 [DropDownToggle]。

   注意事項：
   [DropDownToggle] 是選用組件，因為按一下 [ContentPresenterBorder] 也可以開啟 ComboBox 控制項項目的清單，而且它可以提供較大的點選區域。

7. [Popup] 組件可顯示 ComboBox 控制項的項目。一般來說，ItemsPresenter 物件可用來顯示項目的清單，且 ItemsPresenter 物件通常顯示在 ScrollViewer 控制項的內部以提供捲動功能。若要建立 [Popup] 組件，請執行下列動作：

   1. 在 [物件與時間軸] 面板中，選取根版面配置面板。

   2. 在 [組件] 面板中按兩下 [Popup] 組件，以在範本的根建立 Popup 物件。

   3. 在新 Popup 物件的內部繪製新的 ItemsPresenter 控制項。

   4. 使用 [選取] 工具 修改快顯的大小與位置。

8. 若要建立 [ContentPresenterBorder] 組件，請只選取 [ContentPresenter] 與選用的 [ToggleButton]，接著指向 [物件] 功能表上的 [群組置入]，然後再選取版面配置面板。以滑鼠右鍵按一下新的版面配置面板物件，指向 [變成 ComboBox 的組件]，然後按一下 [ContentPresenterBorder]。

9. 請考慮將範本中物件的部分筆刷屬性繫結到最終將使用該範本之 ComboBox 物件的下列屬性：

   • Background

   • BorderBrush

   • Foreground

   • BorderThickness

   如需詳細資訊，請參閱完成範本的物件屬性。

10. 若要結束範本編輯模式，請按一下畫板頂端階層連結列中的 [ComboBox]，或按一下 [物件與時間軸] 面板中的 [將範圍傳回] 。

    如需將新 ComboBox 範本套用至其他 ComboBox 物件的詳細資訊，請參閱套用或移除資源。

參照

您可以在 MSDN 的 Silverlight Control Gallery (Silverlight 控制項陳列庫) 中找到有關 Microsoft Silverlight ComboBox 控制項之屬性與事件的詳細資訊。

請參閱

概念

一般 Silverlight 控制項的樣式提示

SimpleComboBox 及 SimpleComboBoxItem

設定支援範本之控制項的樣式