ComboBox Overview

The ComboBox class represents a control that encapsulates other controls. Controls that encapsulate other controls are called composite controls. For example, the ComboBox contains a Button that enables you to show and hide the items in a Popup and a TextBox that displays the selected item. This topic introduces you to the ComboBox in Windows Presentation Foundation (WPF) and illustrates how to use it in Extensible Application Markup Language (XAML) and in C#.

This topic contains the following sections.

• ComboBox Control
• Elements Contained in a ComboBox
• Creating ComboBoxes
• ComboBox Styling
• Related Topics

ComboBox Control

The ComboBox is a user interface (UI) item that presents users with a list of options. The contents can be shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice. The user clicks a button to see the complete list of options.

The following graphic shows the appearance of a combo box in different states.

---

Collapsed and expanded DropDownList

Elements Contained in a ComboBox

The following table lists the elements that make up a combo box.

Element Name	Description
TextBox	Displays the selection. If it is editable, this is where the user enters text.
Button	Shows or hides the combo box items. This element is always visible.
Popup	Holds the items of the ComboBox element.

Creating ComboBoxes

In the following example, the ComboBox contains three ComboBoxItem elements. The control collapses, displaying only the first item or no items, until the user clicks the button on the right side of the control.

<ComboBox Text="Is not open">
    <ComboBoxItem MouseMove="OnHover" Name="cbi1">Item1</ComboBoxItem>
    <ComboBoxItem MouseMove="OnHover" Name="cbi2">Item2</ComboBoxItem>
    <ComboBoxItem MouseMove="OnHover" Name="cbi3">Item3</ComboBoxItem>
</ComboBox>

This example also demonstrates how to generate a ComboBox. The example creates a combo box (cbox), adds ComboBoxItem (cboxitem) elements, and then adds the ComboBox as a child of a Canvas element (cv2).

cbox = new ComboBox();
cbox.Background = Brushes.LightBlue;
cboxitem = new ComboBoxItem();
cboxitem.Content = "Created with C#";
cbox.Items.Add(cboxitem);
cboxitem2 = new ComboBoxItem();
cboxitem2.Content = "Item 2";
cbox.Items.Add(cboxitem2);
cboxitem3 = new ComboBoxItem();
cboxitem3.Content = "Item 3";
cbox.Items.Add(cboxitem3);

cv2.Children.Add(cbox);

Dim cbox As System.Windows.Controls.ComboBox
Dim cboxitem As System.Windows.Controls.ComboBoxItem
Dim cboxitem2 As System.Windows.Controls.ComboBoxItem
Dim cboxitem3 As System.Windows.Controls.ComboBoxItem

cbox = New ComboBox()
cbox.Background = Brushes.LightBlue
cboxitem = New ComboBoxItem()
cboxitem.Content = "Created with Visual Basic."
cbox.Items.Add(cboxitem)
cboxitem2 = New ComboBoxItem()
cboxitem2.Content = "Item 2"
cbox.Items.Add(cboxitem2)
cboxitem3 = New ComboBoxItem()
cboxitem3.Content = "Item 3"
cbox.Items.Add(cboxitem3)

cv2.Children.Add(cbox)

For the complete sample see ComboBox Sample.

ComboBox Styling

With control styling you can dramatically change the appearance and behavior of ComboBox controls and ComboBoxItem controls without having to write a custom control. In addition to setting visual properties, you can also apply styles to individual parts of a control, change the behavior of parts of the control through properties, add parts, or change the layout of a control. The following examples demonstrate several ways to add styles to ComboBox controls.

The first example defines a style called SimpleComboBoxItem that changes the Background, Foreground, and FontSize of the ComboBoxItem controls.

<Style x:Key="SimpleComboBoxItem" TargetType="{x:Type ComboBoxItem}">
<Setter Property = "FontSize" Value="14"/>
<Setter Property = "Background" Value="Pink"/>
<Setter Property = "Foreground" Value="Purple"/>
</Style>

The following example uses Trigger elements that enable you to change the appearance of a ComboBoxItem in response to an event raised on the item. When you move the mouse over a ComboBoxItem the Foreground, FontSize, and FontFamily change.

 <Style x:Key="Triggers" TargetType="{x:Type ComboBoxItem}">
 <Style.Triggers>
 <Trigger Property="ComboBoxItem.IsMouseOver" Value="true">
     <Setter Property = "Foreground" Value="Red"/>
     <Setter Property = "FontSize" Value="20"/>
     <Setter Property = "FontFamily" Value="Arial Bold"/>
 </Trigger>
 </Style.Triggers>
</Style> 

For the complete sample see ComboBox Styles Sample.

See Also

Reference

CheckBox

Concepts

ComboBox ControlTemplate Example

Other Resources

ComboBox
WPF Controls Gallery Sample