WPF - Filtering a DataCollection with an autocompletebox

Question

I have a view and ViewModel that are working perfectly. I have recently added an AutocompleteBox (found in the WPF Toolkit) which allows users to quickly look up an item.

My view is as such:

• An ItemsControl containing my CollectionViewSource named People. Generating perfectly
• An AutocompleteBox where the dropdown shows only the items containing the values the user is typing in the AutocompleteBox. Works well. If I type John, all of the people in my CollectionViewSource named People with the word John in the name appear in the dropdown.

My issue is: how do I filter my ItemsControl when the user selects the item he wishes to see from the Dropdown?

My code so far in XAML to bind the data:

<toolkit:AutoCompleteBox Height="25" Width="400"
                                     Foreground="AliceBlue"
                                     ItemsSource="{Binding People.View}"
                                     ValueMemberPath="Name"
                                     Text="{Binding Name}"
                                     IsTextCompletionEnabled="True"
                                     FilterMode="Contains"
                                     Background="#303030">
                <toolkit:AutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="360" HorizontalAlignment="Left">
                            <StackPanel Orientation="Vertical" HorizontalAlignment="Left"
                                        VerticalAlignment="Top" Width="300">
                                <TextBlock Text="{Binding Name}" FontWeight="SemiBold" Foreground="#25A0DA"
                                           FontSize="14" Width="300"/>
                                <TextBlock Text="{Binding Status}" FontWeight="Normal" Foreground="White"
                                           FontSize="10" Width="300"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </toolkit:AutoCompleteBox.ItemTemplate>
            </toolkit:AutoCompleteBox>

<ItemsControl x:Name="tStack" Grid.Column="0" Grid.Row="1"
                      ItemsSource="{Binding People.View}"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                      BorderThickness="0.5">
</ItemsControl>

The itemsControl is styled and the format of the items inside it are also templated/styled but far too long and unconstructive to post here.

Answer 1

From the Name property setter in your viewmodel to which toolkit:AutoCompleteBox.Text is bound, you will have to filter the ObservableCollection backing your Collectionview i,e ItemsSource of your ItemsControl.

If you have your Collectionsource with you then you can have filter applied to it like below:

ICollectionView _peopleView = CollectionViewSource.GetDefaultView(peoples);
_peopleView .Filter = PeopleFilter

private bool PeopleFilter(object item)
{
    People people= item as People;
    return people.Name.Contains( _filterString ); //Here filter string will be your Name prperty value
}

From Setter of name property you will hav to call _peopleView .Refresh(); to apply the filter

Thanks