ComboBox 控制項樣式提示

發行項
10/11/2017

Ee341409.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-tw,Expression.40).png

您可以使用內建的 ComboBox 控制項範本來建立自訂 ComboBox 範本。 Popup 控制項包含可讓使用者從清單選取項目的 ListBox 控制項。 ComboBox 控制項的預設外觀如下：

Ee341409.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(zh-tw,Expression.40).png

ComboBox 範本的組件

ComboBox 範本包含下列組件：

Ee341409.69fada84-8d77-4b89-a14c-18fcbd2da5a9(zh-tw,Expression.40).png

組件名稱	物件類型
ContentPresenter	ContentPresenter
ContentPresenterBorder	FrameworkElement
DropDownToggle	ToggleButton
Popup	Popup

秘訣：
若要檢視範本的組件，請在修改範本時開啟 [組件] 面板。

ComboBox 提示

下拉式方塊由包含項目清單 (4) 的快顯視窗、顯示目前所選項目的區域 (1)，以及用來開啟和關閉快顯視窗的切換按鈕 (3) 組成。

ContentPresenter 組件

ContentPresenter 組件為強制項目，用途是顯示目前的項目。如果將一些內容放入範本中的 ContentPresenter 組件，只要沒有選取項目，就會顯示此內容。

ContentPresenterBorder 組件

如果 IsHitTestVisible 為 True，則可以按一下 ContentPresenterBorder 組件來開啟和關閉快顯視窗，而且快顯視窗將位於 ContentPresenterBorder (2) 左下角。版面配置面板對 ContentPresenterBorder 組件來說是不錯的選擇。

DropDownToggle 組件

DropDownToggle 組件為選用項目，但這可當作開啟和關閉快顯視窗的另一種方式。

Popup 組件為強制項目。這是在其中顯示項目的組件。 ItemsPresenter 可用來指定顯示項目的位置。 ItemsPresenter 應置於 ScrollViewer 組件內。 Popup 的開啟位置相對於範本根物件的界限。

ComboBox 控制項的狀態

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

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

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

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

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

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

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

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下畫板上的錄製按鈕 Ee341409.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png ，或在 [狀態] 面板中選取 [Base]。若要修改控制項在兩種個別狀態同時作用時的外觀，您可以鎖定其中一個狀態群組之狀態的預覽，同時修改另一個狀態群組中的狀態。

範本繫結

您可以對 Background、BorderBrush、Foreground 或 BorderThickness 屬性進行範本繫結。如需詳細資訊，請參閱完成範本的物件屬性。

將物件轉換成 ComboBox 控制項

下圖是下拉式方塊的詳細設計圖 (comp)。

ComboBox

注意：
請特別注意，前面的圖形還不是 ComboBox 控制項，而是看似 ComboBox 控制項的圖案。

此範例使用下列程序步驟 2 中的 XAML 程式碼。

開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

複製下列程式碼，然後將它貼到新專案中，接在步驟 1 找到的程式碼後面。

<Grid Height="70" Width="120">
<Rectangle 
   x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
   Height="20" VerticalAlignment="Top" />
<Rectangle 
   Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
   Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
<Path 
   Fill="White" Stretch="Fill" Width="8" Height="5" 
   Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
   HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle 
   x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
   Margin="0,20,0,0" />
<TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
<TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
</Grid>

在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Grid]，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [ComboBox]，然後按一下 [確定]。
在 [物件與時間軸] 面板中，按下 CTRL，然後按一下兩個 TextBlock 項目。以滑鼠右鍵按一下其中一個選取的項目，然後按一下 [剪下]。按一下 [將範圍傳回] ，然後按一下 [貼上]。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 旁的 [進階選項]，然後按一下 [重設]。請針對 [Height] 重複相同的動作。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [ComboBox]，按一下 [編輯範本]，然後按一下 [編輯目前的項目]。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 contentarea ，按一下 [群組置入]，然後按一下 [Grid]。
以滑鼠右鍵按一下 [Grid]，按一下 [變成 ComboBox 的組件]，然後按一下 [ContentPresenterBorder]。
在 [組件] 面板中，按兩下 [ContentPresenter]。在 [屬性] 面板的 [版面配置] 類別中，將 [Margin] 設為下列值：
- Left 5
- Right 5
- Top 1
- Bottom 0
在 [物件與時間軸] 面板中，按一下 [Rectangle]，按下 CTRL，然後按一下 [路徑]。以滑鼠右鍵按一下選取範圍，按一下 [群組置入]，然後按一下 [Grid]。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Grid]，按一下 [變成 ComboBox 的組件]，然後按一下 [DropDownToggle]。按一下 [確定]。
以滑鼠右鍵按一下 [路徑]，然後按一下 [剪下]。按一下 [將範圍傳回] ，然後按一下 [DropDownToggle]，再按 CTRL+V 貼上。
在 [物件與時間軸] 面板中，選取 [Grid]。在 [組件] 面板中，按兩下 [Popup]。
在 [工具] 面板中，按兩下 [Grid]。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 旁的 [進階選項]，然後按一下 [重設]。請針對 [Height] 重複相同的動作。
在 [物件與時間軸] 面板中，按一下 [popupbackground]，然後將它拖曳到您剛才建立的格線上。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 旁的 [進階選項]，然後按一下 [重設]。請針對 [Height]、[HorizontalAlignment]、[VerticalAlignment] 和 [Margin] 重複相同的動作。
在 [物件與時間軸] 面板中，將 [ScrollViewer] 拖曳到新格線上。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 旁的 [進階選項]，然後按一下 [重設]。請針對 [Height]、[HorizontalAlignment]、[VerticalAlignment] 和 [Margin] 重複相同的動作。
按一下 [將範圍傳回] 。在 [屬性] 面板的 [版面配置] 類別中，將 [Height] 設為 20。
建置專案 (CTRL+SHIFT+B)，然後按 F5 來測試您的專案。

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

參照

您可以在 MSDN 上的 Silverlight Control Gallery Ee341409.xtlink_newWindow(zh-tw,Expression.40).png (Silverlight 控制項陳列庫) 找到有關 Microsoft Silverlight ComboBox 控制項之屬性與事件的詳細資訊。

另請參閱

概念

一般 Silverlight 控制項的樣式提示
 SimpleComboBox 及 SimpleComboBoxItem
設定支援範本之控制項的樣式

共用方式為

ComboBox 控制項樣式提示

ComboBox 範本的組件