Working with ListBoxes and ComboBoxes

Selectable items can be defined using a ListBox, which derives from the ItemsControl abstract base class.Most
importantly, this parent class defines a property named Items, which returns a strongly typed ItemCollection
object that holds onto the sub items. To populate the ItemCollection, use a set of <ListBoxItem> objects.  For
example:


<!-- Simple list box. -->
<ListBox Name = "lstVideoGameConsoles">
 <ListBoxItem Content="Microsoft XBox 360"/>
 <ListBoxItem Content="Sony Playstation 3"/>
 <ListBoxItem Content="Nintendo Wii"/>
 <ListBoxItem Content="Sony PSP"/>
 <ListBoxItem Content="Nintendo DS"/>
</ListBox>


If you need to dynamically fill a list, simply use the Items collection. This is identical to what you would do for an
ASP.NET or Windows Forms application.


// C# code (VB code would be similar).
private void FillListBox()
{
  // Add items to the listbox.
  lstVideoGameConsoles.Items.Add("Microsoft XBox 360");
 lstVideoGameConsoles.Items.Add("Sony Playstation 3");
 lstVideoGameConsoles.Items.Add("Nintendo Wii");
 lstVideoGameConsoles.Items.Add("Sony PSP");
 lstVideoGameConsoles.Items.Add("Nintendo DS");
}


To obtain the values in a list, use the SelectedIndex, SelectedItem, and SelectedValue properties. Assume the
following button Click event handler, which extracts data from the list of video games.


// C# code (VB code would be similar).
protected void btnGetGameSystem_Click(object sender, RoutedEventArgs args)
{
 string data = string.Empty;
 data += string.Format("SelectedIndex = {0}\n",
   lstVideoGameConsoles.SelectedIndex);
 data += string.Format("SelectedItem = {0}\n",
   lstVideoGameConsoles.SelectedItem);
 data += string.Format("SelectedValue = {0}\n",
   lstVideoGameConsoles.SelectedValue);
 MessageBox.Show(data, "Your Game Info");
}


As it turns out, the ItemCollection type has been constructed to operate on System.Object types, and, therefore, it
can contain anything whatsoever. Consider this example. Notice how each (implicit) ListBoxItem is a StackPanel.
Each StackPanel contains an Ellipse and TextBox.


<StackPanel>
  <!-- A ListBox with content. -->
  <ListBox Name = "lstColors">
    <StackPanel Orientation = "Horizontal">
      <Ellipse Fill = "Yellow" Height = "50" Width = "50"/>
     <TextBox FontSize = "20" HorizontalAlignment = "Center"
              VerticalAlignment = "Center" Text = "Yellow"/>
    </StackPanel>
   <StackPanel Orientation ="Horizontal">
      <Ellipse Fill = "Blue" Height = "50" Width = "50"/>
     <TextBox FontSize = "20" HorizontalAlignment = "Center"
              VerticalAlignment = "Center" Text = "Blue"/>
    </StackPanel>
   <StackPanel Orientation = "Horizontal">
      <Ellipse Fill = "Green" Height = "50" Width = "50"/>
     <TextBox FontSize = "20" HorizontalAlignment = "Center"
              VerticalAlignment = "Center" Text = "Green"/>
    </StackPanel>                
 </ListBox>
</StackPanel>













The ComboBox control is configured in a very similar manner. If you were to replace each occurrence of ‘ListBox’
with ‘ComboBox’, the previous markup would render as so.

<StackPanel>
   <!-- A ComboBox with content. -->
    <ComboBox Name = "lstColors">
...
    </ComboBox>
</StackPanel>
ListBoxes and ComboBoxes
Table of Contents
Copyright (c) 2008.  Intertech, Inc. All Rights Reserved.  This information is to be used exclusively as an
online learning aid.  Any attempts to copy, reproduce, or use for training is strictly prohibited.
Courseware
Training Resources
Tutorials
Services