C# Code, Tutorials and Full Visual Studio Projects

How to create a CheckedListBox in WPF

Posted by on Oct 13, 2011 in Code Snippets, Tutorials | 6 comments

How to create a CheckedListBox in WPF

WPF doesn’t have a CheckedListBox control by default but with the WPF being so flexible it’s simple to make one just by changing the ItemsTemplate of a ListBox.

Suppose we have a Customers class like so:

public class Customer
{
    public string Name { get; set; }
}

And we would like to display this with a CheckBox beside it in a list. To hold the value of the CheckBox you will need a wrapper class. Here is a generic one that works well for this:

using System.ComponentModel;

namespace Jarloo
{
    public class CheckedListItem<T> : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool isChecked;
        private T item;

        public CheckedListItem()
        {}

        public CheckedListItem(T item, bool isChecked=false)
        {
            this.item = item;
            this.isChecked = isChecked;
        }

        public T Item
        {
            get { return item; }
            set
            {
                item = value;
                if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Item"));
            }
        }


        public bool IsChecked
        {
            get { return isChecked; }
            set
            {
                isChecked = value;
                if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("IsChecked"));
            }
        }
    }
}

This class makes it easy to keep track of which items are checked and since it’s generic it doesn’t matter what object it wraps.

Here is the code behind we will need:

using System.Collections.ObjectModel;
using System.Windows;

namespace Jarloo
{
    public partial class MainWindow : Window
    {
        public ObservableCollection<CheckedListItem<Customer>> Customers { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            Customers = new ObservableCollection<CheckedListItem<Customer>>();
            
            Customers.Add(new CheckedListItem<Customer>(new Customer(){Name="Kelly Smith"}));
            Customers.Add(new CheckedListItem<Customer>(new Customer(){Name="Joe Brown"}));
            Customers.Add(new CheckedListItem<Customer>(new Customer(){Name="Herb Dean"}));
            Customers.Add(new CheckedListItem<Customer>(new Customer(){Name="John Paul"}));

            DataContext = this;
        }
    } 
}

As you can see it’s just an ObservableCollection of CheckListItems that wrap a Customer. The rest of the code is just building a few dummy records.

And the XAML is simple too:

<Window x:Class="Jarloo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox ItemsSource="{Binding Customers}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Path=Item.Name}" /> 
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>        
    </Grid>
</Window>

Notice we just set the ListBox ItemsSource property to our ObservableCollection, then we define an ItemsTemplate that will be used for
each item. The template contains our CheckBox, with the IsChecked property bound to the CheckListItem’s IsChecked property, and the
Content bound to our Customer class. Note that since Customer is in the CheckListItem’s Item property we need to reference the customer name as Item.Name.

Keep in mind you can use that CheckedListItem class to wrap any object, it’s a handy little class to keep around.

6 Comments

Join the conversation and post a comment.

  1. Joe C

    Works great – just what I was looking for – thanks for posting the code.

  2. tzarad

    Thank’s it’s clear and easy to reuse. Helps a lot.

  3. tande2

    Thanks, simple and good :)

  4. Kamesh

    Thanks a lot, this article is simple and easy to understand

  5. Tavo

    Hello, thanks for your code, I need to run the app with all the checkboxes actives, what can I do?

  6. Rajeshk

    Thanks a lot, i was looking the same.
    but in my case i want to group the checkbox item, is there any way to group it.
    want to show country and its state, user can able to select the state.
    ei.g. i want to show as below, where state will have checkbox
    count 1
    state1
    state2
    count 2
    state 1
    state 2

    Thanks,
    -R

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>