How to: Create a Checked ComboBox

• Jun 07, 2019
• 4 minutes to read

The following example demonstrates how to create a checked combo box.

To enable the CheckedComboBox operation mode, set the editor’s StyleSettings property to CheckedComboBoxStyleSettings:

Xaml

<dxe:ComboBoxEdit.StyleSettings>
   <dxe:CheckedComboBoxStyleSettings />
</dxe:ComboBoxEdit.StyleSettings>

Tip

The ComboBoxEdit supports several operation modes which are available through the BaseEdit.StyleSettings property.

For example, use RadioComboBoxStyleSettings to create a radio button list as demonstrated in the How to Apply Style Settings to the ComboBoxEdit example.

See the ComboBoxEdit Operation Modes help topic to see the complete list.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-checked-combobox-e1971.

Window1.xaml (C#)

<Window x:Class="ComboBoxEdit_CreatingCheckedComboBox.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:local="clr-namespace:ComboBoxEdit_CreatingCheckedComboBox"
        xmlns:localVM="clr-namespace:ComboBoxEdit_CreatingCheckedComboBox.ViewModels"
        Title="Checked ComboBox"
        Height="200"
        Width="350">
    <Window.DataContext>
        <localVM:MyViewModel />
    </Window.DataContext>
    <DockPanel>
        <dxe:ComboBoxEdit DockPanel.Dock="Top"
                          Margin="10,0,10,0"
                          SeparatorString="; "
                          DisplayMember="Name"
                          EditValue="{Binding SelectedCustomers, Converter={local:SelectedItemsConverter}, UpdateSourceTrigger=PropertyChanged}"
                          ItemsSource="{Binding Customers}">
            <dxe:ComboBoxEdit.StyleSettings>
                <dxe:CheckedComboBoxStyleSettings />
            </dxe:ComboBoxEdit.StyleSettings>
        </dxe:ComboBoxEdit>
        <dxe:ListBoxEdit Margin="10,10,10,10"
                         DisplayMember="Name"
                         ItemsSource="{Binding SelectedCustomers}" />
    </DockPanel>
</Window>

SelectedItemsConverter.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization;
using System.Linq;
using System.Windows.Data;
using System.Windows.Markup;

namespace ComboBoxEdit_CreatingCheckedComboBox
{
    public class SelectedItemsConverter : MarkupExtension, IValueConverter
    {
        public override object ProvideValue(IServiceProvider serviceProvider) {
            return this;
        }
        object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo culture) {
            if (value != null)
                return new List<object>((IEnumerable<object>)value);
            return null;
        }
        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
            ObservableCollection<Customer> result = new ObservableCollection<Customer>();
            var enumerable = (List<object>)value;
            if (enumerable != null)
                foreach (object item in enumerable)
                    result.Add((Customer)item);
            return result;
        }
    }
}

MyViewModel.cs

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;

namespace ComboBoxEdit_CreatingCheckedComboBox.ViewModels
{
    public class MyViewModel : INotifyPropertyChanged
    {
        ObservableCollection<Customer> selectedCustomers;
        public MyViewModel() {
            Customers = Customer.GetList();
            SelectedCustomers = new ObservableCollection<Customer>() { Customers[1], Customers[2] };
        }
        public ObservableCollection<Customer> Customers { get; set; }
        public ObservableCollection<Customer> SelectedCustomers {
            get { return selectedCustomers; }
            set {
                if (selectedCustomers == value) {
                    return;
                }
                selectedCustomers = value;
                RaisePropertyChanged("SelectedCustomers");
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        void RaisePropertyChanged(string propertyName) {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Customer.cs

using System;
using System.Collections.ObjectModel;
using System.Linq;

namespace ComboBoxEdit_CreatingCheckedComboBox
{
    public class Customer
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public static ObservableCollection<Customer> GetList() {
            ObservableCollection<Customer> customers = new ObservableCollection<Customer>();
            customers.Add(new Customer() { ID = 0, Name = "David Miles" });
            customers.Add(new Customer() { ID = 1, Name = "John Spor" });
            customers.Add(new Customer() { ID = 2, Name = "Nick Jackson" });
            customers.Add(new Customer() { ID = 3, Name = "Linda Parsons" });
            return customers;
        }
    }
}

Window1.xaml.cs

using System.Windows;

namespace ComboBoxEdit_CreatingCheckedComboBox {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}

MyViewModel.vb

Imports System
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Imports System.Linq

Namespace ComboBoxEdit_CreatingCheckedComboBox.ViewModels
    Public Class MyViewModel
        Implements INotifyPropertyChanged

        Private _selectedCustomers As ObservableCollection(Of Customer)
        Public Sub New()
            Customers = Customer.GetList()
            SelectedCustomers = New ObservableCollection(Of Customer)() From {Customers(1), Customers(2)}
        End Sub
        Public Property Customers() As ObservableCollection(Of Customer)
        Public Property SelectedCustomers() As ObservableCollection(Of Customer)
            Get
                Return _selectedCustomers
            End Get
            Set(ByVal value As ObservableCollection(Of Customer))
                If _selectedCustomers Is value Then
                    Return
                End If
                _selectedCustomers = value
                RaisePropertyChanged("SelectedCustomers")
            End Set
        End Property
        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        Private Sub RaisePropertyChanged(ByVal propertyName As String)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End Sub
    End Class
End Namespace

Customer.vb

Imports System
Imports System.Collections.ObjectModel
Imports System.Linq

Namespace ComboBoxEdit_CreatingCheckedComboBox
    Public Class Customer
        Public Property ID() As Integer
        Public Property Name() As String
        Public Shared Function GetList() As ObservableCollection(Of Customer)
            Dim customers As New ObservableCollection(Of Customer)()
            customers.Add(New Customer() With {
                .ID = 0,
                .Name = "David Miles"
            })
            customers.Add(New Customer() With {
                .ID = 1,
                .Name = "John Spor"
            })
            customers.Add(New Customer() With {
                .ID = 2,
                .Name = "Nick Jackson"
            })
            customers.Add(New Customer() With {
                .ID = 3,
                .Name = "Linda Parsons"
            })
            Return customers
        End Function
    End Class
End Namespace

Window1.xaml.vb

Imports System.Windows

Namespace ComboBoxEdit_CreatingCheckedComboBox
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

SelectedItemsConverter.vb

Imports System
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Globalization
Imports System.Linq
Imports System.Windows.Data
Imports System.Windows.Markup

Namespace ComboBoxEdit_CreatingCheckedComboBox
    Public Class SelectedItemsConverter
        Inherits MarkupExtension
        Implements IValueConverter

        Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
            Return Me
        End Function
        Private Function IValueConverter_Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
            If value IsNot Nothing Then
                Return New List(Of Object)(DirectCast(value, IEnumerable(Of Object)))
            End If
            Return Nothing
        End Function
        Private Function IValueConverter_ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
            Dim result As New ObservableCollection(Of Customer)()
            Dim enumerable = DirectCast(value, List(Of Object))
            If enumerable IsNot Nothing Then
                For Each item As Object In enumerable
                    result.Add(DirectCast(item, Customer))
                Next item
            End If
            Return result
        End Function
    End Class
End Namespace