Implementing MVVM for the Silverlight Autocomplete Box

This is the continuation post of my previous MVVM post. Here I am explaining on how to use Silverlight AutoCompleteBox. This is the XAML file content. 

<sdk:AutoCompleteBox x:Name="autoCompleteBoxFarm" ItemsSource="{Binding SomeNumbers}"

HorizontalAlignment="Left"  Grid.Row="2" Grid.Column="1" Width="110" Height="20"

MinimumPopulateDelay="500" Text="{Binding KeywordSearchText, Mode=TwoWay}" >
<i:Interaction.Behaviors>
<viewModels:ImmediateUpdateBehavior></viewModels:ImmediateUpdateBehavior>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding KeywordSearchFilterCommand}" CommandParameter="{Binding autoCompleteBoxFarm}">
</i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</sdk:AutoCompleteBox>

The autocompleteBox "Text" property is bound with the class property "KeywordSearchText". Please note this is a two way binding.

We need an event trigger. Hence we are using the "TextChanged" event as an trigger. Whenever the text is changed, we are invoking a command called "KeywordSearchFilterCommand". If required we can even pass the complete 'autoCompleteBox' as parameter but this is not required.

Here is the "SomeNumbers" property.

private ICollectionView someNumbers;

public ICollectionView SomeNumbers

        {
            get
            {
                return someNumbers;
            }
            set
            {
                someNumbers = value;
                RaisePropertyChanged("SomeNumbers");
            }
        }

Here is the "KeywordSearchText" property.

private string keywordSearchText;

public string KeywordSearchText
        {
            get { return keywordSearchText; }
            set
            {
                keywordSearchText = value;
                RaisePropertyChanged("KeywordSearchText");
            }
        }
 Here is the "KeywordSearchFilterCommand" property.

private RelayCommand<object> keywordSearchFilterCommand;

public ICommand KeywordSearchFilterCommand
        {
            get
            {
                return keywordSearchFilterCommand;
            }
        } 
Make sure to initialize the command during the ViewModel constructor.


private void PrepareCommands()

        {

keywordSearchFilterCommand = new RelayCommand<object>(PerformKeywordSearch, CanPerformKeywordSearch);
    }

The function "CanPerformKeywordSearch" is always returning true. Other logic can be implemented here. The function "PerformKeywordSearch" is used to get all the "SomeNumbers"  and this can be an asynchronous call.



public bool CanPerformKeywordSearch(object obj)

        {

        return true;
    }

   public void PerformKeywordSearch(object obj)

        {
theModel.GetAllSomeNumbers(StateCodes.CurrentItem.ToString(), CountyCodes.CurrentItem.ToString(), KeywordSearchText);
        }

The asynchronous call will return back. Once the results are obtained, it can be used to populate the SomeNumbers property. 

List<string> availableSomeNumbers = genAsyncDataResults.asyncDataResults as List<string>;

SomeNumbers = new PagedCollectionView(availableSomeNumbers);

Once "SomeNumbers" value is assigned, it will show-up in the "autocompleteBox".

Hope this code helps to implement MVVM when using "autocompleteBox".

Cheers
Anand