Getting Started with WPF CheckedListBox (CheckListBox)

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet package that needs to be added as reference to use the control in any application.

You can find more details about installing the NuGet package in a WPF application in the following link:

How to install nuget packages

Creating simple application with CheckListBox

You can create a WPF application with CheckListBox control using the following steps:

1. Create a project.
2. Add control via designer.
3. Add control manually in XAML.
4. Add control manually in C#.
5. Add items using CheckListBoxItem.
6. Bind to data.

Creating a project

Create a new WPF project in Visual Studio to display the CheckListBox with functionalities.

Adding control via designer

The CheckListBox control can be added to an application by dragging it from the toolbox to a designer view. The required assembly references will be added automatically.

Adding control manually in XAML

To add control manually in XAML, follow the given steps:

1. Add the following required assembly references to the project:
   • Syncfusion.Tools.WPF
   • Syncfusion.Shared.WPF
2. Import Syncfusion WPF schema http://schemas.syncfusion.com/wpf in XAML page.
3. Declare the CheckListBox control in XAML page.

xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        x:Class="CheckListBoxSample.MainWindow"
        Title="CheckListBox Sample" Height="350" Width="525">
    <Grid>
        <!--Adding CheckListBox control -->
        <syncfusion:CheckListBox x:Name="checkListBox" Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Window>

Adding control manually in C#

To add control manually in C#, follow the given steps:

1. Add the following required assembly references to the project:
   • Syncfusion.Tools.WPF
   • Syncfusion.Shared.WPF
2. Import the CheckListBox namespace using Syncfusion.Windows.Tools.Controls;.
3. Create a CheckListBox instance, and add it to the window.

c#

using Syncfusion.Windows.Tools.Controls;
namespace CheckListBoxSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
			InitializeComponent();
			//Creating an instance of CheckListBox control
			CheckListBox checkListBox = new CheckListBox();
			//Adding CheckListBox as window content
			this.Content = checkListBox;
        }
    } 
}

Adding items using CheckListBoxItem

You can add the items inside the CheckListBox control using CheckListBoxItem.

xaml

<!-- Adding CheckListBox -->
<syncfusion:CheckListBox Name="checkListBox">
<!-- Adding CheckListBox items -->
<syncfusion:CheckListBoxItem Content="Mexico"/> 
<syncfusion:CheckListBoxItem Content="Canada" /> 
<syncfusion:CheckListBoxItem Content="Bermuda" />
<syncfusion:CheckListBoxItem Content="Belize" />
<syncfusion:CheckListBoxItem Content="Panama" />
</syncfusion:CheckListBox>

c#

// Creating an instance of CheckListBox
CheckListBox checkListBox = new CheckListBox();

// Creating an instance of CheckListBoxItem
CheckListBoxItem checkListBoxItem1 = new CheckListBoxItem();
CheckListBoxItem checkListBoxItem2 = new CheckListBoxItem();

// Adding content to CheckListBoxItem
checkListBoxItem1.Content = "Mexico";
checkListBoxItem1.Content = "Bermuda";

// Adding CheckListBoxItem to CheckListBox
checkListBox.Items.Add(checkListBoxItem1); 
checkListBox.Items.Add(checkListBoxItem2);

Adding items using ItemSource

You can populate the CheckListBox control using the ItemsSource property. The DisplayMemberPath property is used to the name or path of the property displayed for each data item in the control.

• Model.cs

c#

public class CountryListModel
{
	public string Name { get; set; }
	public string Description { get; set; }
}

• ViewModel.cs

c#

public class ViewModel
{
	private ObservableCollection<CountryListModel> checkList;
	public ObservableCollection<CountryListModel> CheckListItems
	{
		get
		{
			return checkList;
		}
		set
		{
			checkList = value;
			RaisePropertyChanged("CheckListItems");
		}
	}
	public ViewModel()
	{
		CheckListItems = new ObservableCollection<CountryListModel>();
		populateItem();
	}
	private void populateItem()
	{
		CheckListItems.Add(new CountryListModel() { Name = "Mexico", Description = "Mexico" });
		CheckListItems.Add(new CountryListModel() { Name = "Canada", Description = "Canada " });
		CheckListItems.Add(new CountryListModel() { Name = "Bermuda", Description = "Bermuda" });
		CheckListItems.Add(new CountryListModel() { Name = "Beize", Description = "Beize" });
		CheckListItems.Add(new CountryListModel() { Name = "Panama", Description = "Panama" });
	}
}

• MainWindow.Xaml

xaml

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>

<!--Adding CheckListBox control -->
<syncfusion:CheckListBox x:Name="checkListBox" Width="120" Height="150" DisplayMemberPath="Name" ItemsSource="{Binding CheckListItems}" />

Check or Uncheck items

The CheckListBox items can be checked or unchecked in a single click either by clicking the checkbox or clicking the content of the item. Also, the checked state of an item can be handled using the Space key or Enter key.

Checked event notification

When the checked state of an item is changed, it will be notified using the [ItemChecked] event.A CheckListBoxItem can be checked either by using any one of the following ways:

a. Using keyboard
b. Using mouse
c. Programmatically

Get list of checked items

The CheckListBox control gets all the selected items using theSelectedItems property and gets single item by using theSelectedItem property.