.NET 4.0+

WPF Selection Controls - ListBox

by Richard Carr, published at http://www.blackwasp.co.uk/WPFListBox.aspx

The seventieth part of the Windows Presentation Foundation Fundamentals tutorial looks at another of the WPF selection controls. This article examines the ListBox, which allows users to select from a large number of options.

ListBox

The ListBox control provides another way for the user to select from a set of items. It is generally used when there are more options than would be sensible to show using either CheckBox or RadioButton controls. You can use list boxes to allow a user to select a single item from a large list, or multiple items where appropriate.

ListBox inherits functionality from Selector and ItemsControl, two base classes that we've seen earlier in the tutorial. Using these classes means that a ListBox can contain a series of items of any type. Actually, ListBoxes contain a set of ListBoxItems, from which selections can be made. However, each ListBoxItem can contain an object or a control. For simplicity, in this article we'll use strings for the item contents.

To demonstrate the control we need a sample solution. Create a new WPF Application project in Visual Studio named, "ListBoxDemo". Once the solution is ready, replace the XAML in the main window with the following:

<Window x:Class="ListBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListBox Demo"
        Height="200"
        Width="200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <ListBox Name="MyList">
            <ListBoxItem>Red</ListBoxItem>
            <ListBoxItem>Orange</ListBoxItem>
            <ListBoxItem>Yellow</ListBoxItem>
            <ListBoxItem>Green</ListBoxItem>
            <ListBoxItem>Blue</ListBoxItem>
            <ListBoxItem>Indigo</ListBoxItem>
            <ListBoxItem>Violet</ListBoxItem>
        </ListBox>
        <Button Grid.Row="1">OK</Button>
    </Grid>
</Window>

The code above creates a window containing a ListBox and a Button. The ListBox holds seven items. Try running the program to see the results. The window should appear similar to the image below:

Obtaining the Selection

As mentioned, ListBox inherits from Selector, which provides the functionality required to determine or change a single selected item. You can use the SelectedItem property to obtain the ListBoxItem that is selected, before examining its content. You can also use SelectedIndex to obtain the index of the selection, or SelectedValue and SelectedValuePath to obtain a value from the selected item. As I've explained the use of these members in a previous article, we'll just use SelectedItem here.

Modify the code for the Button as shown below. This attaches a Click event. We'll show the selected string when the button is clicked.

<Button Grid.Row="1" Click="Button_Click">OK</Button>

Let's add code behind the window for the event. The following obtains the selected item as a ListBoxItem, then shows its content using the ListBoxItem's Content property.

private void Button_Click(object sender, RoutedEventArgs e)
{
    var selected = (ListBoxItem)MyList.SelectedItem;
    string value = selected == null ? "No selection" : selected.Content.ToString();
    MessageBox.Show(value);
}

Run the program, make a selection and click the button to see the result. You should find that the text from the selected item is shown when you use the button.