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>
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:
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.
