ComboBox control styling tips

You can use the built-in ComboBox control template to create a custom ComboBox template. The Popup control contains a ListBox control that enables users to select an item from a list. By default, the ComboBox control looks like the following:

Parts of the ComboBox template

The ComboBox template includes the following parts:

Part name	Object type
ContentPresenter	ContentPresenter
ContentPresenterBorder	FrameworkElement
DropDownToggle	ToggleButton
Popup	Popup

Tip

To view the parts of the template, open the Parts panel while modifying the template.

ComboBox tips

A combo box consists of a pop-up window containing a list of items (4), an area in which the currently selected item is displayed (1), and a toggle button used for opening and closing the pop-up window (3).

ContentPresenter part

The ContentPresenter part is mandatory, and its purpose is to display the current item. If you put some content inside the ContentPresenter part in the template, that content will be displayed whenever there is no item selected.

ContentPresenterBorder part

If IsHitTestVisible is true, the ContentPresenterBorder part can be clicked to open and close the pop-up window, and the pop-up window will be located at the lower-left corner of ContentPresenterBorder (2). A layout panel is a good choice for the ContentPresenterBorder part.

DropDownToggle part

The DropDownToggle part is optional, but you can use it as another way to open and close the pop-up window.

Popup part

The Popup part is mandatory. This is the part in which the items are displayed. An ItemsPresenter is used to indicate where the items should be displayed. The ItemsPresenter should be put inside the ScrollViewer part. The Popup is opened relative to the bounds of the root object of the template.

States of the ComboBox control

By default, the ComboBox control can be in one of the following three states in the CommonStates state group, which you can view in the States panel when modifying a ComboBox template:

State name	Description
Normal	The appearance of the ComboBox control when there is no interaction with the control.
MouseOver	The appearance of the ComboBox control when the user moves the pointer over it.
Disabled	The appearance of the ComboBox control when the IsEnabled property is set to False.

The ComboBox control can be in one of the following three states of the FocusStates state group:

State name	Description
Unfocused	The appearance of the ComboBox control when it does not have keyboard focus.
Focused	The appearance of the ComboBox control when it has keyboard focus and the ComboBox control is not expanded. For example, a user might press the Tab key to cycle through the objects in your application until keyboard focus is on the ComboBox control.
FocusedDropDown	The appearance of the ComboBox control when it has keyboard focus and the ComboBox control is expanded.

The ComboBox control can be in one of the following three states of the ValidationStates state group:

State name	Description
Valid	The appearance of the ComboBox control when it is valid.
InvalidUnfocused	The appearance of the ComboBox control when it is invalid and does not have keyboard focus.
InvalidFocused	The appearance of the ComboBox control when it is invalid and has keyboard focus.

Tip

A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button  on the artboard, or select Base in the States panel. To modify the appearance of your control when two separate states are active, you can pin a preview of a state in one state group while you modify a state in a different state group.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, or BorderThickness properties. For more information, see Carry object properties through to the template.

To convert objects into a ComboBox control

The following graphic is a design comprehensive (comp) of a combo box.

Note

It is important to note that the preceding graphic is not yet a ComboBox control, but artwork that resembles a ComboBox control.

This example uses the XAML code in step 2 of the following procedure.

1. Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copy and then paste the following code into your new project, after the code that you located in step 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>
   

3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

4. In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click ComboBox, and then click OK.

5. In the Objects and Timeline panel, press Ctrl, and then click both TextBlock items. Right-click either selected item, and then click Cut. Click **Return scope to **, and then click Paste. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height.

6. In the Objects and Timeline panel, right-click ComboBox, click Edit Template, and then click Edit Current.

7. In the Objects and Timeline panel, right-click contentarea, click Group Into, and then click Grid.

8. Right-click Grid, click Make Into Part of ComboBox, and then click ContentPresenterBorder.

9. In the Parts panel, double-click ContentPresenter. In the Properties panel, in the Layout category, set Margin to the following:

   • Left   5

   • Right   5

   • Top   1

   • Bottom   0

10. In the Objects and Timeline panel, click Rectangle, press Ctrl, and then click Path. Right-click the selection, click Group Into, and then click Grid.

11. In the Objects and Timeline panel, right-click Grid, click Make Into Part of ComboBox, and then click DropDownToggle. Click OK.

12. Right-click Path, and then click Cut. Click **Return scope to **, click DropDownToggle, and then press Ctrl+V to paste.

13. In the Objects and Timeline panel, select Grid. In the Parts panel, double-click Popup.

14. In the Tools panel, double-click Grid. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height.

15. In the Objects and Timeline panel, click popupbackground, and then drag it onto the grid that you just created. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height, HorizontalAlignment, VerticalAlignment, and Margin.

16. In the Objects and Timeline panel, drag ScrollViewer onto the new grid. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height, HorizontalAlignment, VerticalAlignment, and Margin.

17. Click **Return scope to **. In the Properties panel, in the Layout category, set Height to 20.

18. Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

For information about applying your new ComboBox template to other ComboBox objects, see Apply or remove a resource.

References

You can find detailed information about the properties and events of the Microsoft Silverlight ComboBox control at the Silverlight Control Gallery on MSDN.

See Also

Concepts

Styling tips for common Silverlight controls

SimpleComboBox and SimpleComboBoxItem

Styling a control that supports templates