BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Selection Controls - ComboBox

The seventy-second part of the Windows Presentation Foundation Fundamentals tutorial looks further at the WPF selection controls. This article examines the ComboBox control, which combines a text box with an expandable list.

ComboBox

The ComboBox control is another selection control provided by the standard classes of WPF. The control is a combination of an expandable list of options, from which the user can make a selection, and a text box, where free text may be typed. The control can be used in several ways. Often, the text box is disabled so that the control is a simple drop-down list. In other situations the list is available for selection and the user can enter text directly.

In this article we will demonstrate both styles of ComboBox. To do so we need a sample solution. Create a new WPF Application project in Visual Studio, naming it, "ComboBoxDemo". Once the project is ready, replace the XAML in the main window with the code below. Note the use of ComboBoxItem elements for the items in the list.

<Window x:Class="ComboBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ComboBox Demo"
        Height="110"
        Width="200">
    <StackPanel>
        <ComboBox Name="ProcessorBox">
            <ComboBoxItem>Intel</ComboBoxItem>
            <ComboBoxItem>AMD</ComboBoxItem>
            <ComboBoxItem>Other</ComboBoxItem>
        </ComboBox>
        <ComboBox Name="RamBox">
            <ComboBoxItem>16GB</ComboBoxItem>
            <ComboBoxItem>32GB</ComboBoxItem>
            <ComboBoxItem>64GB</ComboBoxItem>
        </ComboBox>
        <Button Height="25">OK</Button>
    </StackPanel>
</Window>

Try running the program to see the results. You will find that the two ComboBoxes in the window act as drop-down lists, expanding to show options when clicked. It isn't possible to edit the text directly. NB: Although referred to as drop-down lists, if there isn't enough room to expand the list downwards, it will appear above the control instead.

WPF ComboBox demo window

Determining the Selected Item

ComboBox inherits functionality from Selector. This means that, as with the ListBox control, you can determine the selected item using the SelectedItem, SelectedIndex or SelectedValue properties. These members have been described earlier so in this article let's just demonstrate the use of SelectedItem with a ComboBox.

To do so, modify the code for the Button to register the Click event:

<Button Height="25" Click="Button_Click">OK</Button>

Add the following code behind the window. This identifies the selected items in the two drop-down lists and displays the information in a message box.

private void Button_Click(object sender, RoutedEventArgs e)
{
    var processorItem = (ComboBoxItem)ProcessorBox.SelectedItem;
    var ramItem = (ComboBoxItem)RamBox.SelectedItem;

    var processor = processorItem == null ? "No processor" : processorItem.Content;
    var ram = ramItem == null ? "No RAM" : ramItem.Content;
    MessageBox.Show(string.Format("{0} {1}", processor, ram));
}

Run the program and try selecting items and clicking the button to see the results.

Enabling Editing

You can convert from a simple expandable list to a ComboBox with the ability to edit the text directly, using the IsEditable property. By default, the value of this Boolean property is false, indicating that the control is a drop-down list. Set the value to true to enable the text box part of the control.

When editable, the SelectedItem property is set if the user selects an item from the list and is null when no item is selected, or the text has been edited and no longer matches one of the items. However, you can always obtain the text in the text box by reading the Text property.

To demonstrate, let's make the RAM selection ComboBox editable. Update the XAML for the control as follows:

<ComboBox Name="RamBox" IsEditable="True">
    <ComboBoxItem>16GB</ComboBoxItem>
    <ComboBoxItem>32GB</ComboBoxItem>
    <ComboBoxItem>64GB</ComboBoxItem>
</ComboBox>

We'll need to modify the code behind the button. The updated method below first tries to get the selected item from the RamBox control. If this is null, the Text property for the control is included in the message box output instead.

private void Button_Click(object sender, RoutedEventArgs e)
{
    var processorItem = (ComboBoxItem)ProcessorBox.SelectedItem;
    var ramItem = (ComboBoxItem)RamBox.SelectedItem;

    var processor = processorItem == null ? "No processor" : processorItem.Content;
    var ram = ramItem == null ? RamBox.Text : ramItem.Content;
    MessageBox.Show(string.Format("{0} {1}", processor, ram));
}

Run the program to see the results. You should see that the control has a different appearance to indicate that the text can be edited. You can still click the drop-down arrow to show the list. In addition, you can click into the main area of the control and type freely.

19 June 2014