The WPF ComboBox

The other major listing control to cover is the ComboBox. It turns out that they are almost identical to ListBoxes. This simple code will add a combo box to your container (I’m using a StackPanel) and put two items into it.

      <ComboBox>

        <ComboBoxItem>Item 1</ComboBoxItem>

        <ComboBoxItem>Item 2</ComboBoxItem>

      </ComboBox>

Running will produce the predictable window with a drop down combo box and two items. If you want the user to be able to edit or enter his own text, you will need to set the IsEditable property to true and IsReadOnly to false in the <ComboBox> header.

Also like the ListBox, the ComboBox can contain complex items.

      <ComboBox>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Anna</TextBlock>

            <Image Source=D:\Presentations\100Anna.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Raven</TextBlock>

            <Image Source=D:\Presentations\100Rave.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Ammie</TextBlock>

            <Image Source=D:\Presentations\100Ammie.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

        <ComboBoxItem>

          <StackPanel Orientation=Horizontal>

            <TextBlock Width=100>Kids</TextBlock>

            <Image Source=D:\Presentations\100Kids.jpg Height=100 />

          </StackPanel>

        </ComboBoxItem>

 

      </ComboBox>

wpf040

Note from the image above, if the contents of the drop down are too big it wil drop below the bottom of your current Window. Additionally, if you use automatic sizing the combo box will adjust itself rather oddly depending on the contents. For that reason, you may wish to set a default width rather than letting the combo box do it for you.

So how do we get data back out of the ComboBox? Well, if all we have is text, we can do just like we did with the ListBox, convert the selected item to a combo box item and get it’s Content.ToString property. But what if it’s like the above example, a mixture of text and images? Well we have to dig just a little, but it’s not that difficult if you understand the tree WPF creates.

  <StackPanel>

    <ComboBox Name=myComboBox  >

      Item Data Omitted for Brevity

    </ComboBox>

    <Button Name=myButton Content=OK Click=myButton_Click />

  </StackPanel>

Note I made two changes. First I added a name to the ComboBox, that way I can address it in code. Next I added a simple button control, we’ll use it to show what is currently selected. Just for the fun of it, I used the Content tag instead of placing it between the <Button></Button> tags, you may run across that form of syntax at some point and should be aware of it.

Now we need to add a little code to the myButton_Click event.

    public void myButton_Click(object sender, RoutedEventArgs e)

    {

      ComboBoxItem cbi = myComboBox.SelectedItem as ComboBoxItem;

      if (cbi != null)

      {

        StackPanel sp = cbi.Content as StackPanel;

        TextBlock block = sp.Children[0] as TextBlock;

        MessageBox.Show(“You picked “ + block.Text);

      }

      else

      {

        MessageBox.Show(“You haven’t picked anything yet”);

      }

    }

First, I got the current ComboBox item, and stored it in the cbi variable. I then check to see if it’s null, which it will be if the user hasn’t selected anything. If it is, we can show them the traditional “hey dummy” message, as I did in the else clause.

If you recall, the contents of the ComboBoxItem are a StackPanel control, so next I get a reference to it in the sp variable.

Next, I suppose I could iterate of the Children of the StackPanel, but since I know that the TextBlock I want is the first child, I’ll simply reference it directly as element zero and return it to the block variable.

Finally we can get to the actual text for the row the user picked. We can simply reference the TextBlock’s text property in the message box. When the app is run, you should see these results:

wpf041

The same techniques I use here would also be applicable to the ListBox we’ve seen previously, simply replace ComboBoxItem with ListBoxItem.

The WPF ComboBox can be quite useful for providing a compact way for users to select complex items.

About these ads

4 Responses to “The WPF ComboBox”

  1. Ron Langham Says:

    How did you make the combo dropdown button to be a custom color, matching the background color of the textblock area?

  2. Fernando Venegas Says:

    Hi !!!

    I wonder if you could guide me on how to make a new control in WPF. Basically I need a ComboBox that not only display a list, but display a grid with information from a SQL query. This component in VB6 was called TDBCombo, and you could especify wich query columns were visible and invisible. But I have to make it in .NET and use it in my apps.

    Thanks for all !!!

  3. Vipin Chaudhary Says:

    Thank you Very Much, this has become my Best material in WPF ComboBox topic. U made this very simple.
    I have found another post related to this post over internet. Post link..

    http://mindstick.com/Blog/156/WPF%20ComboBox

    Thanks Everyone!!

    • Amit Roman Says:

      The WPF ComboBox
      i want to add the multiple item values in combo box from database and display when particular item is selected …..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 104 other followers

%d bloggers like this: