How to: Create a Checked ComboBox

  • 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:

<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.

<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>