Search code examples
c#xamlmvvmicommanduwp

UWP EventTriggerBehaviour command not called


I am currently developing a UWP app.

I have an AutoSuggestBox control, and I want to handle some of it's events using commands (since I'm following MVVM pattern). To do so, I'm referencing Microsoft.Xaml.Interactivity (from Blend).

The code I'm using is as such:

        <AutoSuggestBox x:Name="autoSuggestBox"
                            Width="256"
                            HorizontalAlignment="Right"
                            ItemsSource="{Binding SearchResults}"
                            MaxSuggestionListHeight="256"
                            QueryIcon="Find">
                <i:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="SuggestionChosen">
                        <core:InvokeCommandAction Command="{Binding SuggestionChosenCommand}" CommandParameter="{Binding ElementName=autoSuggestBox}" />
                    </core:EventTriggerBehavior>
                    <core:EventTriggerBehavior EventName="TextChanged">
                        <core:InvokeCommandAction Command="{Binding ChangeSearchResultsCommand}" CommandParameter="{Binding Text, ElementName=autoSuggestBox}" />
                    </core:EventTriggerBehavior>
                </i:Interaction.Behaviors>
                <AutoSuggestBox.ItemTemplate>
                    ...
                </AutoSuggestBox.ItemTemplate>
            </AutoSuggestBox>

And in the ViewModel behind I'm defining my commands as such:

    Command<string> _changeSearchResultsCommand = default(Command<string>);
    public Command<string> ChangeSearchResultsCommand { get { return _changeSearchResultsCommand ?? (_changeSearchResultsCommand = new Command<string>(async (param) => { await ExecuteChangeSearchResultsCommand(param); }, CanExecuteChangeSearchResultsCommand)); } }
    private bool CanExecuteChangeSearchResultsCommand(string p) {  return !IsSearchBusy; }
    private async Task ExecuteChangeSearchResultsCommand(string text)
    {
        ...
    }

    Command<ShowModel> _suggestionChosenCommand = default(Command<ShowModel>);
    public Command<ShowModel> SuggestionChosenCommand { get { return _suggestionChosenCommand ?? (_suggestionChosenCommand = new Command<ShowModel>(async (param) => { await ExecuteSuggestionChosenCommand(param); }, CanExecuteSuggestionChosenCommand)); } }
    private bool CanExecuteSuggestionChosenCommand(ShowModel p) { return true; }
    public async Task ExecuteSuggestionChosenCommand(ShowModel show)
    {
        ...
    }

And SearchResults is defined like this:

    private ObservableCollection<ShowModel> _searchResults = default(ObservableCollection<ShowModel>);
    public ObservableCollection<ShowModel> SearchResults { get { return _searchResults; } set { Set(ref _searchResults, value); } }

My problem is that the 'TextChanged' event works fine. The command is called whenever the event fires. However, the SuggestionChosen event never fires the command. If I were to attach the SuggestionChosen event directly to the control it would fire, but I want the command to be called. The code for the two events is more or less the same, so I can't seem to figure out why one is being called and not the other.


Solution

  • I managed to solve this on my own. The problem was with the SuggestionChosen event binding. The binding was not returning the type of value that the command was expecting (ShowModel).

    What I did was change the command type to AutoSuggestBoxSuggestionChosenEventArgs, and didn't pass any command parameter in XAML. The command was called with the argument as a parameter and I could even access the selected item from the argument.