When you wish to add items to a ListBox control, one approach is to right-click the control on your artboard and select the Add ListBoxItem menu option (a ComboBox control would show an

Add ComboBoxItem menu selection). If you take this approach, you add a new ListBoxItem

that contains simple text (which can be configured after the fact). Using this approach, add a

single ListBoxItem object to your ListBox control

Now, using your mouse, select and stretch your new ListBoxItem to take up about one-half
the height of the ListBox
Make sure that your ListBoxItem is currently selected in the Objects and Timeline panel,
and add a StackPanel to this control, much like you added a StackPanel to the “fancy button”
you created earlier. Once you have done so, select this StackPanel in the Objects and Timeline
panel, locate the Orientation property in the Properties panel (via the Search area), and set this
property to the value Horizontal. At this point, you will want to resize the new StackPanel so
that it fits within the containing ListBoxItem. Take a moment to position things to your liking.
Now for the really interesting part. Select the StackPanel in your Objects and Timeline
panel, and then add an Ellipse control and a Label control using standard Blend techniques
(the Tools panel, the Assets library, etc.). Once you are done, the Objects and Timeline panel
should look like:
Use your Properties panel and mouse to resize these new controls as you see fit. Likewise,
set the Fill property of the Ellipse to the color red, and set the Content property of the Label to
(you guessed it) the value Red!.
Now, select the ListBoxItem within the Objects and Timeline panel, right-click, and select
the Copy menu option. Next, select the ListBox itself (again within the Objects and Timeline
panel), right-click, and select Paste. Repeat these steps three times total, so that your ListBox
has a set of four ListBoxItem objects. Use the Properties panel to set the Fill property of the
new Ellipse controls to a unique set of colors and to set the Content property of the new Label
controls to a unique set of corresponding names.

Viewing the XAML

If you switch to the XAML editor, you will find that your ListBox control does indeed contain
four ListBoxItem objects. However, instead of having a simple text value, they contain
composite UI elements. For example:
<listBoxItem Height=”41.96″ Width=”180″>
<stackPanel Height=”41.96″ Width=”180″ Orientation=”Horizontal”>
<ellipse Fill=”#FF48D416″ Stroke=”Black” Width=”62″/>
<label Content=”Green!” Width=”78.993″ HorizontalAlignment=”Center”
VerticalAlignment=”Center”/>
</stackPanel>
</listBoxItem>
.

Finding the Current Selection

Regardless of what a ListBoxItem contains (a simple text value or a StackPanel of elements), you
can find which ListBox member has been selected by using the SelectedIndex property of the
ListBox, which returns a zero-based value (0 is the first item, 1 is the second item, and so on).
Select your ListBox in the Objects and Timeline panel, and then click the Events button of
the Properties panel to handle the ListBox’s SelectionChanged event.
Now, implement this handler to display the current selection on the currentSelection
Label control:
private void customListBox_SelectionChanged(object sender,
System.Windows.Controls.SelectionChangedEventArgs e)
{
this.currentSelection.Content =
string.Format("You Picked Item Number: {0}",
this.customListBox.SelectedIndex);
}
Run your program, and notice that you can select any of your custom items as expected.