Export (0) Print
Expand All

ComboBox control styling tips

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:

Ee341409.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(en-us,Expression.30).png

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.

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.

Ee341409.alert_tip(en-us,Expression.30).gifTip:

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 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.

Ee341409.5fdb8c23-16c9-48df-a89b-12652543402e(en-us,Expression.30).pngEe341409.69fada84-8d77-4b89-a14c-18fcbd2da5a9(en-us,Expression.30).png

Part name

Object type

Description

Ee341409.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png ContentPresenter

ContentPresenter

An object that displays the currently-selected item when the ComboBox control is not expanded.

This part is mandatory.

Ee341409.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png ContentPresenterBorder

FrameworkElement

A layout panel that contains the top piece of the ComboBox control.

This part is mandatory.

Ee341409.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,Expression.30).png DropDownToggle

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.

Ee341409.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,Expression.30).png Popup

Popup

A Popup object that will display the contents of the ComboBox control.

This part is mandatory.

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.

Ee341409.alert_tip(en-us,Expression.30).gifTip:

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 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 modify the template of a ComboBox control, do one of the following:

  • Draw a ComboBox 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:

  1. Group all the objects that you want to define the appearance of your ComboBox control into a Grid control.

  2. Select the new Grid control, and then, on the Tools menu, click Make Into Control.

  3. 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.

  4. 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.

  5. If the group of original objects included a TextBlock object Ee341409.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.30).png, the TextBlock object is converted to a ContentPresenter object 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.

  6. If you have objects or artwork that you want to use as the drop-down arrow of your ComboBox control, do the following:

    1. Group them into a layout panel.

    2. Right-click the layout panel.

    3. Point to Make Into Part of ComboBox.

    4. 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.

    5. In the Make into Part dialog box, type a name for the ToggleButton style that will be created.

    6. 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.

    7. To go back to template-editing mode for the ComboBox, click Return scope to 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.

    Ee341409.alert_note(en-us,Expression.30).gifNote:

    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.

  7. 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:

    1. In the Objects and Timeline panel, select the root layout panel.

    2. In the Parts panel, double-click the Popup part to create a Popup object in the root of your template.

    3. Inside the new Popup object, draw a new ItemsPresenter control.

    4. Use the Selection tool Ee341409.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png to modify the size and location of the popup.

  8. 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.

  9. 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.

  10. To exit template-editing mode, click [ComboBox] in the breadcrumb bar at the top of the artboard, or click Return scope to Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png in the Objects and Timeline panel.

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

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

Community Additions

ADD
Show:
© 2014 Microsoft