ComboBox control styling tips
.png "Ee341409.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The ComboBox control represents an object that combines a non-editable text box and a Popup control. The Popup control contains a ListBox control that enables users to select an item from a list.
As with all controls, the ComboBox control (including the Popup control, the ListBox control, and each ComboBoxItem control contained in the ComboBox object) can be modified to look very different from the default appearance. By default, the ComboBox control looks like the following:
.png "Ee341409.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(en-us,Expression.30).png")
ComboBox control properties of interest
You can set the item that is selected in the ComboBox control by setting the SelectedIndex property under Common Properties in the Properties panel. A value of -1 displays the ComboBox object without any selection made. A value of 0 displays the ComboBox object with the first item selected.
To add items to a ComboBox control, you can manually add ComboBoxItem objects, or you can bind a collection of data to the ComboBox object to make items appear automatically.
For more information, see Bind an object to data and Creating sample data.
Parts of the ComboBox template
The ComboBox control uses one template to define the appearance of the drop-down box, the drop-down arrow, and the popup window: the ComboBox Template. Each part of the template plays a role in the appearance and behavior of the ComboBox object to which the template is applied.
Tip
To style the items that a ComboBox control contains, you have to modify other templates. For example, when a ComboBox control is data bound, the template that it uses to style the items it contains is a generated items template (a data template). When a ComboBox control is not data bound, it does not have a template that it applies to the items it contains. Instead, you modify the template of the items themselves, such as the ComboBoxItem template.
Other objects can exist in the template to dress up the appearance of the ComboBox control, but the parts listed in the following table are tied to its behavior in a contract.
To view the parts of the template, open the Parts panel while modifying the template. In the Objects and Timeline panel, an icon .png "Ee341409.6cf58c39-edba-4a0e-acbc-1da272f9a387(en-us,Expression.30).png")
appears next to any object that is playing the role of a part in the Parts panel.
.png "Ee341409.5fdb8c23-16c9-48df-a89b-12652543402e(en-us,Expression.30).png")
.png "Ee341409.69fada84-8d77-4b89-a14c-18fcbd2da5a9(en-us,Expression.30).png")
Part name |
Object type |
Description |
|---|---|---|
|
ContentPresenter |
An object that displays the currently-selected item when the ComboBox control is not expanded. This part is mandatory. |
|
FrameworkElement |
A layout panel that contains the top piece of the ComboBox control. This part is mandatory. |
|
ToggleButton |
A button that expands the ComboBox control when the button is clicked. By default, the button contains a Path object that represents an arrow, but you could change that to an image. |
|
Popup |
A Popup object that will display the contents of the ComboBox control. This part is mandatory. |
.png "Ee341409.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png")
ContentPresenter.png "Ee341409.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png")
ContentPresenterBorder.png "Ee341409.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,Expression.30).png")
DropDownToggle.png "Ee341409.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,Expression.30).png")
PopupStates 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 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 .png "Ee341409.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).png")
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.
To convert objects into a ComboBox control
To modify the template of a ComboBox control, do one of the following:
Draw a ComboBox
.png "Ee341409.b174a511-dd12-4a45-a986-034de7693de9(en-us,Expression.30).png")
on the artboard, and then create a copy of the default template.For more information, see Create or modify a template.
Design the look of your ComboBox control by drawing objects or importing art, and then use the Make Into Control command.
If you use the Make Into Control command, follow these steps to make sure that you create all the objects that the ComboBox template requires:
Group all the objects that you want to define the appearance of your ComboBox control into a Grid control.
Select the new Grid control, and then, on the Tools menu, click Make Into Control.
In the dialog box that appears, select ComboBox, name your template, and select the location where the template will be stored.
For information about locations, see Create a resource.
After you click OK, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your ComboBox control. You can continue to modify your template in this mode. For example, add or modify objects, or select a state in the States panel to modify the appearance of your template in that state.
If the group of original objects included a TextBlock object
.png "Ee341409.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.30).png")
, the TextBlock object is converted to a ContentPresenter object .png "Ee341409.51a0c06c-d801-4133-8caf-cf1856a8dfc4(en-us,Expression.30).png")
in the ComboBox control template. This enables your ComboBox object to display text. If your original objects did not include a TextBlock object, a ContentPresenter object is automatically added to the template.If the ContentPresenter object is not already assigned the correct part in the template, right-click the ContentPresenter object, point to Make Into Part of ComboBox, and then click ContentPresenter.
You can optionally add or move other objects inside the ContentPresenter object if you want those objects to appear in the ComboBox control even when there is no item currently selected.
If you have objects or artwork that you want to use as the drop-down arrow of your ComboBox control, do the following:
Group them into a layout panel.
Right-click the layout panel.
Point to Make Into Part of ComboBox.
Click DropDownToggle.
This will replace your objects with a ToggleButton object and use your objects to create the style and template that will be applied to the ToggleButton object.
In the Make into Part dialog box, type a name for the ToggleButton style that will be created.
Select a location where the style will be stored, and then click OK.
While in template-editing mode for the new ToggleButton object, you can continue to make modifications, such as deleting the ContentPresenter object (if you do not want to display text in the ToggleButton object), or selecting states in the States panel to modify the appearance of the ToggleButton object in those states.
To go back to template-editing mode for the ComboBox, click Return scope to
.png "Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel, or click DropDownToggle in the breadcrumb bar at the top of the artboard.
Note
The DropDownToggle part is optional because the ContentPresenterBorder can also be clicked to open the list of ComboBox control items, and it provides a larger click surface.
The Popup part displays the items of the ComboBox control. Typically, an ItemsPresenter object is used to display a list of items, and the ItemsPresenter object is typically displayed inside a ScrollViewer control to provide scrolling functionality. To create the Popup part, do the following:
In the Objects and Timeline panel, select the root layout panel.
In the Parts panel, double-click the Popup part to create a Popup object in the root of your template.
Inside the new Popup object, draw a new ItemsPresenter control.
Use the Selection tool
.png "Ee341409.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png")
to modify the size and location of the popup.
To create the ContentPresenterBorder part, select only your ContentPresenter and the optional ToggleButton, point to Group Into on the Object menu, and then select a layout panel. Right-click the new layout panel object, point to Make Into Part of ComboBox, and then click ContentPresenterBorder.
Consider binding some of the brush properties of objects in your template to the following properties of the ComboBox object that will eventually use your template:
Background
BorderBrush
Foreground
BorderThickness
For more information, see Carry object properties through to the template.
To exit template-editing mode, click [ComboBox] in the breadcrumb bar at the top of the artboard, or click Return scope to
in the Objects and Timeline panel.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