Jarloo

Menu

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.

Categories:   Code

Tags:  , , , ,

Comments

Sorry, comments are closed for this item.