WPF Standard Control Demo App › ComboBox

ComboBox Inputs

ComboBox shows the selected item and opens a drop-down list to choose another. It can also be made editable, so the user can type.

What Text, SelectedValue, and SelectedItem show

The demo app fills every ComboBox with the days of the week, an enum shown by name and bound by value: items that have a Name and a Value, with DisplayMemberPath="Name" and SelectedValuePath="Value". With such items, Text and SelectedValue both read Monday for the second day, but SelectedItem is the item object itself. Its text is the full type name, because the item class does not override ToString: ScreenshotCapture.Scenes.ComboBoxDemoScene+EnumItem for the measured items, and WPFStandardControlDemoApp.Common.MarkupExtensions.EnumBindingSourceExtension+EnumItem for the demo app’s items, which is what its SelectedItem display shows. Bind SelectedValue with SelectedValuePath rather than showing SelectedItem, unless the item class overrides ToString.

Typing into an editable ComboBox

IsEditable defaults to False. When it is True, typing completes a matching item: “tue” became Tuesday, and SelectedValue became Tuesday. Text that matches no item stays as typed: “xyz” left SelectedIndex -1 and SelectedValue null. An editable ComboBox can complete known values and still accept others, so check SelectedIndex as well as Text.

ShouldPreserveUserEnteredPrefix decides whether autocomplete keeps the letters as typed; the default is False. After typing “tue”, the text was Tuesday with False and tuesday with True. SelectedValue was Tuesday either way.

With both IsEditable and IsReadOnly set to True, typing “tue” left the text empty, but the Down key still selected an item (Sunday).

StaysOpenOnEdit decides whether the list stays open when the user clicks into the edit box; the default is False. With a real mouse click into the edit box of an open, editable ComboBox, the list closed with False and stayed open with True.

Opening the list, and how tall it gets

IsDropDownOpen binds two-way by default. The demo app binds it to a check box without a Mode. After the check box opened the list, Down, Down, and Enter selected Monday, closed the list, and cleared the check box.

MaxDropDownHeight is the largest height of the list. The default was 480, a third of the screen height on the measuring machine; the seven days took 141.72. With the demo app’s 100, the list was 100 high, less than the seven days need. Set it for long lists.

ComboBoxes that move together

IsSynchronizedWithCurrentItem makes the selection follow the current item of the list’s view. Two ComboBoxes on one list with True both started at index 0, because the view’s current item was the first item, and moved together: setting the first to 3 set the second to 3. If the view’s current item were another item, that item would be selected instead. Unset, both started at -1 and were independent. Set it only when lists should move together; with a new view it also selects the first item at the start.

case measured
defaults: IsEditable, IsReadOnly, StaysOpenOnEdit False, False, False
ShouldPreserveUserEnteredPrefix, IsTextSearchEnabled False, True
MaxDropDownHeight (screen height / 3) / IsDropDownOpen two-way 480 (480) / True
bound CheckBox opens it; Down, Down, Enter: selected / open / CheckBox True; Monday / False / False
Text / SelectedValue / SelectedItem.ToString() Monday / Monday / ScreenshotCapture.Scenes.ComboBoxDemoScene+EnumItem
editable, "tue" typed, preserve prefix False: Text / SelectedValue Tuesday / Tuesday
then "xyz" typed over it: Text / index / SelectedValue xyz / -1 / null
editable, "tue" typed, preserve prefix True: Text / SelectedValue tuesday / Tuesday
editable + IsReadOnly: "tue" typed: Text / index; then Down (empty) / -1; Sunday / 0
MaxDropDownHeight default: drop-down height 141.72
MaxDropDownHeight 100 (demo start): drop-down height 100
open, real click in edit box, StaysOpenOnEdit=False: still open False
open, real click in edit box, StaysOpenOnEdit=True: still open True
shared list, IsSynchronizedWithCurrentItem=True: start; first set to 3 0, 0; 3, 3
shared list, IsSynchronizedWithCurrentItem=null: start; first set to 3 -1, -1; 3, -1

Selection, editing, the drop-down, and synchronization. Measured on .NET 10 / Windows 11.

Trying it in the demo app

The ComboBox page of the demo app, with the control list on the left and the first section, IsDropDownOpen

The ComboBox page of the demo app has sections for IsDropDownOpen, IsEditable, IsReadOnly, MaxDropDownHeight, Text, StaysOpenOnEdit, ShouldPreserveUserEnteredPrefix, the selection properties, and IsSynchronizedWithCurrentItem. The Text section shows the text next to SelectedValue, and the IsSynchronizedWithCurrentItem section starts its three ComboBoxes at True, so they all start on Sunday. The “Show Code” link under each section displays its XAML. How to bind ItemsSource and read the selection is covered in the article linked below. The following XAML is the ShouldPreserveUserEnteredPrefix section (ComboBoxUsageControl.xaml), with the styles and the surrounding GroupBoxes left out and the namespace declarations added. markupextensions is the prefix for the demo app’s own markup extensions:

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:sys="clr-namespace:System;assembly=mscorlib"
            xmlns:markupextensions="clr-namespace:WPFStandardControlDemoApp.Common.MarkupExtensions">
  <CheckBox x:Name="ShouldPreserveUserEnteredPrefix" Content="ShouldPreserveUserEnteredPrefix" />

  <ComboBox x:Name="ShouldPreserveUserEnteredPrefixComboBox"
            DisplayMemberPath="Name"
            IsEditable="True"
            ItemsSource="{markupextensions:EnumBindingSource EnumType=sys:DayOfWeek}"
            SelectedValuePath="Value"
            ShouldPreserveUserEnteredPrefix="{Binding IsChecked, ElementName=ShouldPreserveUserEnteredPrefix}" />

  <TextBlock Text="{Binding Text, ElementName=ShouldPreserveUserEnteredPrefixComboBox}" />
  <TextBlock Text="{Binding SelectedValue, ElementName=ShouldPreserveUserEnteredPrefixComboBox}" />
</StackPanel>

Source code and how it was measured

Every behavior on this page was measured by running it on .NET 10 / Windows 11, using ComboBoxDemoScene in this site’s screenshot tool, with items like the demo app’s (Name and Value of each day, no ToString). Typing was sent one character at a time to the edit box, the keys through WPF’s input manager, and the click into the edit box was made with the real mouse. Heights are the values on the measuring machine.

View ComboBox source code on GitHub →