WPF - DevExpress - Add clear button to ComboBox

Either the built-in ComboBox control from WPF or the one provided by DevExpress does not include an out-of-the-box clear button that could be used to clear user selection.

Fortunately, there is a nice way to do it without implementing custom control or code-behind.

This can be done directly from the template:

<dxe:ComboBoxEdit ItemsSource="{Binding ItemsCollection}"  
    DisplayMember="Name"
    NullText="Select item" 
    AllowNullInput="True"
    SelectedItem="{Binding SelectedItem}">
    <dxe:ComboBoxEdit.Buttons>
        <dxe:ButtonInfo x:Name="buttonClear">
            <dxe:ButtonInfo.Template>
                <DataTemplate>
                    <dxe:ButtonClose HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2,0" Command="{Binding Path=(dxe:ComboBoxEdit.OwnerEdit).SetNullValueCommand,
                                  RelativeSource={RelativeSource Self}}"/>
                </DataTemplate>
            </dxe:ButtonInfo.Template>
        </dxe:ButtonInfo>
    </dxe:ComboBoxEdit.Buttons>
</dxe:ComboBoxEdit>

That's it - in a nutshell, we are calling the SetNullValueCommand from the ComboBoxEdit control. What is important is to have the AllowNullInput property set to true. The same can be done with other editors - basically, with all components that inherit from BaseEdit class. For more see the following link: DevExpress documentation