WPF ListBox Selection


This entry is part 2 of 6 in the series WPF ListBox

ListBox SelectionChanged Event

This post follows along using the example from the previous post. The series links can be found just above this text in a box. Users select items in a ListBox, usually with a mouse. Whenever the selected item in the ListBox changes, the ListBox’s SelectionChanged event is raised. If you create an event handler in the code-behind, you can assign the name of the event handler to the event, and when the event is raised, the event handler is called. Your C# code runs. Here is an example of a ListBox with some items. When the item selected changes because a user has clicked on one of them, the Label above shows what they clicked on. Here is an example of a project I made called ListBoxSimple.

Here is what the program looks like after the user has made a selection. Notice that the Label at the top will reflect whatever the user selects in the list. The source of the data is the ListBox and the target is the Label. The name of the program is ListBoxSimple, which in the code below is the Title. You can change that to whatever you like. Also, you will notice that the list is “hardcoded” in the XAML shown below. What if you needed to populate the list with data from a database?

<Window x:Class="ListBoxSimple.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListBoxSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Topmost="False"
        Title="ListBoxSimple" Height="220" Width="400">
    <StackPanel>
        <Label Name="lbl">Make a selection below</Label>
        <!--
        https://stackoverflow.com/questions/1267608/scrollbar-in-listbox-not-working
        -->
        <ListBox Height="160" Name="lstBox" 
                 ScrollViewer.CanContentScroll="True"
                 ScrollViewer.VerticalScrollBarVisibility="Auto"
                 SelectionChanged="LstBox_SelectionChanged">
            <ListBoxItem>
                <TextBlock>ListBox Item #1</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #2</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #3</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #4</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #5</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #6</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #7</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #8</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #9</TextBlock>
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock>ListBox Item #10</TextBlock>
            </ListBoxItem>
        </ListBox>
    </StackPanel>
</Window>

Here below is the C# code-behind.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ListBoxSimple
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void lstBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // show the user's selcted item in the Label above the ListBox
            ListBox lb = sender as ListBox;
            ListBoxItem lbi = lb.SelectedItem as ListBoxItem;
            TextBlock tb = (TextBlock)lbi.Content;
            lbl.Content = tb.Text;

            // can actually do this in one line...
            //lbl.Content = ((TextBlock)((sender as ListBox).SelectedItem as ListBoxItem).Content).Text;
            // Conversions: object -> ListBox -> ListBoxItem -> TextBlock -> Text
        }
    }
}

Multiple Selections

By default, only a single item in a ListBox can be selected at any time. But there are several options allowing you to enable selection of multiple items from the ListBox. You set the selection mode with the SelectionMode property. The following are the possible values:

Single: The user can select only a single item from the list. This is the default.

Extended: The user can select multiple items from the list, but must hold down a special key to select items after the first one. − To select additional items after the first, the user must hold down the Ctrl key while selecting items. − To select a range of items, the user can select the first (or last) item and then, while holding down the Shift key, select the last (first) item. This selects all the items in between as well as the first and last items.

Multiple: The user can select multiple items from the list by just clicking them, without having to press any special keys to allow the multiple selection.

private void button_Click(object sender, RoutedEventArgs e)
{
    foreach (ListBoxItem item in lstbxCats.Items)
    {
        //Check to see whether it’s selected.
        if (item.IsSelected)
            // display a message box 
            MessageBox.Show((string)item.Content, "Is Selected");
    }
}

The only difference in the XAML is the SelectionMode property being set as shown below.

<ListBox Name="lstbxCats" SelectionMode="Multiple" HorizontalAlignment="Left" Width="100" >...
Series Navigation<< C# WPF XAML ListBoxWPF ListBox Binding Object >>

Leave a Reply