Export (0) Print
Expand All

ComboBox Overview

.NET Framework 3.0

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

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
Combo boxes in default and pressed states

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);

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

Community Additions

ADD
Show:
© 2014 Microsoft