SimpleComboBox and SimpleComboBoxItem
The combo box is an items control in the form of a drop-down list. You can place content in a combo box in Microsoft® Expression Blend™ by double-clicking the combo box and then drawing an element (such as a SimpleComboBoxItem) within it. Alternatively, you can right-click the combo box under Objects and Timeline, and then click Add SimpleComboBoxItem to add individual items to the collection, or click Bind ItemsSource to Data to generate the collection of ComboBoxItem elements from a data source. To view the combo box on the artboard while it is expanded, you can right-click the combo box or combo box item under Objects and Timeline, and then click Expand ComboBox.
The artboard view of a SimpleComboBox control after two items are added.
Breaking down the control template
The SimpleComboBox control template consists of the following items:
- A Grid panel, which is used to hold the multiple children within the combo box. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template.
- A ContentPresenter element named ContentSite, which is contained within the Grid and which is used to show the selected item.
- A textbox named PART_EditableTextBox, which is contained within the Grid and which allows the user to edit text within the combo box. Because the name PART_EditableTextBox is used by the class to locate the text box, you should not change it. By default, the text box is collapsed and is made visible when IsEditable is set to True on the combo box to which this control template is applied.
- A pop-up toggle button control, which is used to create the expanding part of the combo box. The pop-up control knows how to position itself relative to other controls, and renders on top of any other content. This control also supports some built in animations.
- A Grid control that is contained within the pop-up control, and which contains a ScrollViewer that allows the list of items to scroll. The StackPanel in the ScrollViewer positions each item. The IsItemsHost property of the StackPanel is set to True so that the combo box control knows to position the child elements inside the StackPanel. If you want to change the way in which your items are displayed, you can replace this layout panel by right-clicking the drop-down grid under Objects and Timeline, and then selecting Change Layout Type to a different panel such as a UniformGrid.
The SimpleComboBoxItem control template consists of the following items:
- A Grid panel, which is used to hold the multiple children within the combo box item. Also, a Grid is used because it makes it easier for a designer to add more elements to the template.
- A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the button control to which this template is applied.
- A ContentPresenter element, which is contained within the Grid element and which is automatically bound to the Content property of the item control to which this template is applied.
Objects view: The basic parts (template) of a SimpleComboBox control (left) and a SimpleComboBoxItem control (right).
Property triggers used
Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the template for the combo box, when the HasItems property is False, the minimum height of the DropDownBorder element is set to 95 so that an empty drop-down window appears when the combo box is clicked. If the minimum height was set to 0, a very tiny drop-down window would appear. In the template for the combo box item, when the IsHighlighted property is True, the Background property of the Border element is changed to indicate which item in the combo box is selected.
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleComboBox and SimpleComboBoxItem templates:
- The Background property of the DropDownBorder element is set by using the WindowBackgroundBrush.
- The BorderBrush property of the DropDownBorder element is set by using the SolidBorderBrush.
- The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.
- If the SimpleComboBox is populated with items that use the SimpleComboBoxItem template, the Background property of the item is set by using the SelectedBackgroundBrush when an item is selected, and the Foreground property is set by using the DisabledForegroundBrush if IsEnabled is False.
Best practices and design guidelines
- In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.
- The expansion of the combo box is set by binding both the IsChecked property of the ToggleButton and the IsOpen property of the pop-up to the IsDropDownOpen property of the combo box to which this control template is applied. If you edit either the ToggleButton or the pop-up, you need to make sure you maintain this template binding.
- The ToggleButton element uses a separate template named ToggleButtonControlTemplate. To modify this, right-click the ToggleButton element, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy.
- To edit the SimpleComboBoxItem template, click the Edit resource button next to the SimpleComboBoxItem style in the Resources panel. In the editing mode of the style, right-click Style under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy. If you modify the SimpleComboBoxItem template, you might want to preserve or modify the IsHighlighted trigger.