ComboBox, ListBox, Slider and DatePicker

Choosing instead of typing

Typing is slow and easy to get wrong. When the user should pick from a known set of values, a selection control is faster and safer:

In this lesson you will finish the CoinJar “add expense” form. The category becomes a ComboBox, the date a DatePicker, and added expenses appear in a ListBox. As in the earlier control lessons, everything is wired up in code-behind with x:Name. In Binding to Collections you will replace much of this code with data binding.

What ComboBox and ListBox have in common

ComboBox and ListBox both come from the same base class, called Selector. A selector is a control that shows a list of items and remembers which one is selected. So they share these members:

• Items: the collection of items in the list.
• ItemsSource: an alternative way to fill the list, from any C# collection.
• SelectedItem: the selected item, or null if nothing is selected.
• SelectedIndex: the position of the selected item, counting from 0. It is -1 when nothing is selected.
• SelectionChanged: the event that fires when the selection changes.

Learn them once on a ComboBox and they work the same on a ListBox (and later on the DataGrid).

ComboBox

A ComboBox shows the selected item and opens a drop down list when clicked.

Items written in XAML

The simplest way is to list the items in XAML:

<ComboBox x:Name="CategoryCombo" SelectedIndex="0" Width="160">
    <ComboBoxItem Content="Food" />
    <ComboBoxItem Content="Transport" />
    <ComboBoxItem Content="Bills" />
    <ComboBoxItem Content="Fun" />
    <ComboBoxItem Content="Other" />
</ComboBox>

SelectedIndex="0" selects the first item at start up, so the box is never empty.

Watch out: here SelectedItem is a ComboBoxItem, not a string. To get the text, read its Content:

var item = (ComboBoxItem)CategoryCombo.SelectedItem;
string category = (string)item.Content;

Items from code with ItemsSource

Usually the items come from your C# code. Then set ItemsSource to a collection, such as an array or a List<string>:

public MainWindow()
{
    InitializeComponent();

    CategoryCombo.ItemsSource = new[] { "Food", "Transport", "Bills", "Fun", "Other" };
    CategoryCombo.SelectedIndex = 0;
}

Now each item is a string, so SelectedItem is a string too:

string? category = CategoryCombo.SelectedItem as string;

as string gives null instead of an exception when nothing is selected. That is why the result is string?.

You can fill a list with Items.Add(...) or with ItemsSource, but not both at once. Setting ItemsSource and then calling Items.Add throws an InvalidOperationException.

Reacting to a new selection

private void CategoryCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (CategoryCombo.SelectedItem is string category)
    {
        StatusText.Text = $"Category: {category}";
    }
}

The is string category pattern checks the type and creates the variable in one step. e.AddedItems and e.RemovedItems also tell you exactly what changed.

Editable combo boxes

With IsEditable="True", the user can type a value that is not in the list, like “Gifts”. Read what they typed from the Text property:

<ComboBox x:Name="CategoryCombo" IsEditable="True" />

string category = CategoryCombo.Text.Trim();

ListBox

A ListBox shows its items in a visible list. It scrolls by itself when there are many items, as you saw in ScrollViewer and Viewbox.

<ListBox x:Name="ExpenseList" Height="160" SelectionChanged="ExpenseList_SelectionChanged" />

ExpenseList.Items.Add("Lunch, 12.50");
ExpenseList.Items.Add("Bus ticket, 2.80");

Showing your own objects

You can add any object to a list, not just strings. The list shows it by calling its ToString() method. So a class with a good ToString() override displays nicely:

public class Expense
{
    public string Title { get; set; } = "";
    public decimal Amount { get; set; }

    public override string ToString() => $"{Title}: {Amount:C}";
}

ExpenseList.Items.Add(new Expense { Title = "Lunch", Amount = 12.50m });

if (ExpenseList.SelectedItem is Expense expense)
{
    StatusText.Text = $"You picked {expense.Title}";
}

SelectedItem gives you back the real Expense object, not just its text. You will learn a much richer way to show objects, with several lines and colours per item, in Data Templates. Overriding methods like ToString is covered in Polymorphism.

Selecting several items

SelectionMode decides how many items the user can select:

• Single (default): one item at a time.
• Multiple: each click toggles an item on or off.
• Extended: like Windows Explorer. Click selects one, Ctrl+click adds or removes one, Shift+click selects a range.

With Multiple or Extended, read the SelectedItems collection:

private void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    // Copy the selection first: removing items changes SelectedItems while we loop
    var toRemove = ExpenseList.SelectedItems.Cast<object>().ToList();
    foreach (object item in toRemove)
    {
        ExpenseList.Items.Remove(item);
    }
}

The copy with ToList() matters. Removing items from a collection while you loop over that same collection throws an exception. Cast<object>() is a LINQ method that turns the old style collection into one LINQ can work with.

Slider

A Slider picks a number by dragging a thumb along a track:

<Slider x:Name="PeopleSlider"
        Minimum="1" Maximum="8" Value="1"
        TickFrequency="1" TickPlacement="BottomRight" IsSnapToTickEnabled="True"
        ValueChanged="PeopleSlider_ValueChanged" />

• Minimum and Maximum: the range. The default range is 0 to 10.
• Value: the current number. It is a double.
• TickFrequency and TickPlacement: draw small marks along the track.
• IsSnapToTickEnabled="True": the thumb jumps to the nearest tick, so you get whole numbers here.
• SmallChange and LargeChange: how far the arrow keys and Page Up or Page Down move it.

private void PeopleSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    int people = (int)e.NewValue;
    PeopleText.Text = people == 1 ? "Just me" : $"Split between {people} people";
}

e.OldValue and e.NewValue give the value before and after the change. Note the generic event args type, RoutedPropertyChangedEventArgs<double>. See Generics if the angle brackets are new to you.

Without snapping, Value can be any double such as 3.4172, so round it (Math.Round) before showing it to the user.

DatePicker

A DatePicker is a text box with a calendar button. The user can type a date or pick one from the pop up calendar.

<DatePicker x:Name="ExpenseDatePicker" SelectedDateFormat="Short"
            SelectedDateChanged="ExpenseDatePicker_SelectedDateChanged" />

The selected date is in SelectedDate, which is a DateTime? (a nullable DateTime), because the box can be empty:

public MainWindow()
{
    InitializeComponent();

    ExpenseDatePicker.SelectedDate = DateTime.Today;    // start with today
    ExpenseDatePicker.DisplayDateEnd = DateTime.Today;  // no expenses in the future
}

private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (ExpenseDatePicker.SelectedDate is DateTime date)
    {
        StatusText.Text = $"Date: {date:d}";
    }
    else
    {
        StatusText.Text = "Please pick a date.";
    }
}

Useful properties:

• SelectedDateFormat: Short (for example 25/10/2026) or Long (Sunday, 25 October 2026). The exact look follows the user’s culture settings.
• DisplayDateStart and DisplayDateEnd: the first and last date the calendar allows.
• BlackoutDates: individual dates or ranges that cannot be picked.
• IsTodayHighlighted: marks today in the calendar (on by default).

If you want a calendar that is always visible instead of a pop up, use the Calendar control. It has the same SelectedDate and DisplayDateStart properties.

Picking the right control

• A handful of options that should all be visible: radio buttons, from Buttons, CheckBoxes and RadioButtons.
• Many options, but the user picks one: ComboBox.
• The user needs to see the list, or pick several: ListBox.
• A number where the exact value does not matter much (volume, zoom, number of people): Slider. For an exact value such as a price, use a TextBox.
• A date: always a DatePicker. Never ask the user to type dates into a plain text box.

Common mistakes

• Casting SelectedItem to string when the items are ComboBoxItems. It throws an InvalidCastException. Either read Content, or fill the list from code with ItemsSource.
• Forgetting that nothing may be selected. SelectedItem can be null and SelectedIndex can be -1. Use is patterns or check first.
• Mixing Items.Add and ItemsSource. Pick one.
• Removing items while looping over SelectedItems. Copy to a list first.
• ValueChanged crashing at start up. Setting Value in XAML fires ValueChanged during InitializeComponent. Guard against controls that are still null.
• Treating SelectedDate as a DateTime. It is DateTime?. Check it has a value.

Quick recap

• ComboBox and ListBox share Items, ItemsSource, SelectedItem, SelectedIndex and SelectionChanged.
• Items written as ComboBoxItem in XAML give ComboBoxItem objects. Items from ItemsSource give your own objects.
• Lists show objects with ToString(), and SelectedItem returns the real object.
• ListBox.SelectionMode can be Single, Multiple or Extended. Read SelectedItems for several.
• Slider picks a double between Minimum and Maximum. IsSnapToTickEnabled gives clean steps.
• DatePicker.SelectedDate is a DateTime?. Limit it with DisplayDateStart and DisplayDateEnd.