ComboBox

Dropdown selection control with popup item list.

Overview

ComboBox extends Selector and provides a compact dropdown selection control. When closed, it displays the currently selected item alongside a dropdown arrow indicator. Pressing Enter, Space, or clicking the control opens a popup list of available items. The popup respects MaxDropDownHeight and scrolls when the item count exceeds the visible area. Selecting an item closes the dropdown and updates SelectedItem and SelectedIndex.

Basic Example

<StackPanel Orientation="Vertical">
  <TextBlock Text="Select a fruit:" />
  <ComboBox SelectedIndex="0">
    <ComboBoxItem Content="Apple" />
    <ComboBoxItem Content="Banana" />
    <ComboBoxItem Content="Cherry" />
    <ComboBoxItem Content="Date" />
  </ComboBox>
</StackPanel>

Properties

Property	Type	Default	Description
IsDropDownOpen	bool	false	Whether the dropdown popup is currently open.
MaxDropDownHeight	int	8	Maximum number of visible rows in the dropdown before scrolling.
FocusColor	Color	Cyan	Border color when the control has focus.
HoverColor	Color	Yellow	Border color when the mouse hovers over the control.
SelectedBackground	Color	Blue	Background color of the highlighted item in the dropdown.
SelectedForeground	Color	White	Foreground color of the highlighted item in the dropdown.
SelectedIndex	int	-1	Zero-based index of the currently selected item. Inherited from Selector.
SelectedItem	object	null	The currently selected item object. Inherited from Selector.
ItemsSource	IEnumerable	null	Data source for generating items. Inherited from ItemsControl.
ItemTemplate	DataTemplate	null	Template for rendering each item. Inherited from ItemsControl.

Creating Items

Inline ComboBoxItem Elements

<ComboBox SelectedIndex="0">
  <ComboBoxItem Content="Option A" />
  <ComboBoxItem Content="Option B" />
  <ComboBoxItem Content="Option C" />
</ComboBox>

String ItemsSource Binding

<ComboBox ItemsSource="{Binding AvailableColors}"
          SelectedItem="{Binding SelectedColor, Mode=TwoWay}" />

ItemTemplate for Custom Display

<ComboBox ItemsSource="{Binding Users}" SelectedIndex="0">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding DisplayName}" />
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

Examples

ComboBox with Pre-Selected Item

<ComboBox SelectedIndex="2">
  <ComboBoxItem Content="Low" />
  <ComboBoxItem Content="Medium" />
  <ComboBoxItem Content="High" />
  <ComboBoxItem Content="Critical" />
</ComboBox>

Custom Dropdown Height

<ComboBox MaxDropDownHeight="4" SelectedIndex="0">
  <ComboBoxItem Content="January" />
  <ComboBoxItem Content="February" />
  <ComboBoxItem Content="March" />
  <ComboBoxItem Content="April" />
  <ComboBoxItem Content="May" />
  <ComboBoxItem Content="June" />
  <ComboBoxItem Content="July" />
  <ComboBoxItem Content="August" />
</ComboBox>

Styled ComboBox

<ComboBox SelectedIndex="0"
          FocusColor="Magenta"
          SelectedBackground="DarkCyan"
          SelectedForeground="White">
  <ComboBoxItem Content="Debug" />
  <ComboBoxItem Content="Info" />
  <ComboBoxItem Content="Warning" />
  <ComboBoxItem Content="Error" />
</ComboBox>

Keyboard Shortcuts

Key	Action
Enter	Open the dropdown (when closed) or select the highlighted item and close (when open).
Space	Open the dropdown (when closed) or select the highlighted item and close (when open).
Escape	Close the dropdown without changing selection.
Up Arrow	When closed: cycle to previous item. When open: move highlight up.
Down Arrow	When closed: cycle to next item. When open: move highlight down.
Home	Move highlight to the first item (when open).
End	Move highlight to the last item (when open).

Key Concepts

ComboBox extends Selector, inheriting SelectedIndex, SelectedItem, and SelectionChanged event.
When closed, the control renders the selected item text with a dropdown arrow indicator.
The dropdown popup is rendered using the Popup primitive and positioned below the control.
MaxDropDownHeight limits the visible rows; excess items scroll within the popup.
Items can be defined inline with <ComboBoxItem> elements or generated from ItemsSource with an optional ItemTemplate.
Use SelectedItem="{Binding ...}" with Mode=TwoWay for two-way data binding of the selection.