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 Blend for Visual Studio 2012 by double-clicking the combo box and then drawing an object (such as a SimpleComboBoxItem) within it. Alternatively, you can right-click the combo box in the Objects and Timeline panel, and then click Add SimpleComboBoxItem to add individual items to the collection, or click Bind ItemsSource to Data to generate the collection of ComboBoxItem objects 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 in the Objects and Timeline panel, 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 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 objects to the template.

• A ContentPresenter element named ContentSite, which is contained within the Grid and which is used to show the selected item.

• A text box 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 can 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 can position the child objects 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 in the Objects and Timeline panel, and then selecting Change Layout Type, and selecting a different panel, such as a UniformGrid.

The SimpleComboBoxItem control template consists of the following items:

• A Grid panel, which is used to hold multiple children within the combo box item. Also, a Grid is used because it makes it easier for a designer to add more objects 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 object and which is automatically bound to the Content property of the item control to which this template is applied.

Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the items in the Triggers 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 object 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 object 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 object is set by using the WindowBackgroundBrush.

• The BorderBrush property of the DropDownBorder object 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. Blend looks for a layout panel like the Grid control and makes it active by default so that new objects that are added to the artboard end up as child objects 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 that you maintain this template binding.

• The ToggleButton object uses a separate template named ToggleButtonControlTemplate. To modify this, right-click the ToggleButton object, point to Edit Template, and then click Edit Current.

• 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 in the Objects and Timeline panel, point to Edit Template, and then click Edit Current. If you modify the SimpleComboBoxItem template, you might want to preserve or modify the IsHighlighted trigger.

Voir aussi

Tâches

Try it: Customize the appearance of the check mark in a SimpleCheckBox