How to use an EventToCommand with an editable Combobox to bind TextBoxBase.TextChanged with a command?

Question

I have an editable ComboBox.

<ComboBox IsEditable="True">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <cmd:EventToCommand Command="{Binding CritereChangedCommand, Mode=OneWay}"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="TextBoxBase.TextChanged">
            <cmd:EventToCommand Command="{Binding CritereChangedCommand, Mode=OneWay}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ComboBox>

I use GalaSoft.MvvmLight.Command.EventToCommand to bind the SelectionChanged event.
I also would like to bind the TextChanged event, but it is a little bit tricky: This event is only accessible by the ComboBox TextBoxBase property, and I can't find the proper way to bind this event.
You can see one of my unsuccessful attempt: SelectionChanged binding works fine, but TextChanged binding does not.

I also tried this syntax:

<ComboBox IsEditable="True">
    <TextBoxBase>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="TextChanged">
                <cmd:EventToCommand Command="{Binding CritereChangedCommand, Mode=OneWay}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBoxBase>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <cmd:EventToCommand Command="{Binding CritereChangedCommand, Mode=OneWay}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ComboBox>

But this won't even compile. I get an error "Type that can be instantiated expected" on the TextBoxBase tag.

Any idea ?

Answer 1

I know, very late response... but I hope it will help someone.

The problem here is that the EventTrigger class in Microsoft.Expression.Interactivity.dll uses reflection to find the event by the value of the EventName property and this won't work for attached events like TextBoxBase.TextChanged.

One option, which I use, is to implement your own custom EventTrigger class as described here and use this one instead of EventTrigger (the link there to CommandAction implementation is broken, but I managed to get it using internet archive).

Another option, which I don't like because it's not classic MVVM Command use, is to bind the Text property of the ComboBox to a property in the ViewModel and invoke the command from the ViewModel code on the setter, like this:

<ComboBox IsEditable="True"
          Text="{Binding Text, Mode=TwoWay}" />

And in the ViewModel:

private string text;
public string Text
{
    get { return text; }
    set
    {
       text = value;
       OnPropertyChanged("Text");
       if(CritereChangedCommand.CanExecute())
          CritereChangedCommand.Execute();//call your command here
    }
}

Answer 2

I have found a way to work around the problem:
I create an invisible TextBox, bound to the ComboBox, and I bind the command on the TextChanged event of the TextBox. It's not pretty, but it works...

<ComboBox Name="CbRubrique" IsEditable="True">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <cmd:EventToCommand Command="{Binding CritereChangedCommand, Mode=OneWay}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ComboBox>
<TextBox Text="{Binding ElementName=CbRubrique, Path=Text, UpdateSourceTrigger=PropertyChanged}" Visibility="Collapsed">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="TextChanged">
            <cmd:EventToCommand Command="{Binding CritereChangedCommand, Mode=OneWay}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</TextBox>