Implementing a ListView Filter with Josh Smith's WPF MVVM Demo App

Question

I've been trying to expand Josh Smith's demo MVVM application in order to better understand the principals behind it and I've hit a wall when trying to implement a filter function on a View using a ListView.

I have spent a few hours researching and dabbling but its just not working.

My first step was to bind a textbox in my view to a property in my ViewModel:

<TextBox Height="25" Name="txtFilter" Width="150" Text="{Binding Path=Filter, UpdateSourceTrigger=PropertyChanged}"/>

This matches in my VM:

public string Filter
    {
        get { return this.filter; }
        set
        {
            this.filter = value;
            OnFilterChanged();
        }
    }

My VM used a ObservableCollection for the datasource but I've tried to convert it into an ICollectionView after reading tutorials:

internal ObservableCollection<StaffViewModel> InnerStaff { get; set; }
    internal CollectionViewSource CvsStaff { get; set; }
    public ICollectionView AllStaff
    {
        get { return CvsStaff.View; }
    }

In my constructor I have specified:

CvsStaff = new CollectionViewSource();
CvsStaff.Source = this.InnerStaff;
CvsStaff.Filter += ApplyFilter;

When my Filter Property gets updated it calls OnFilterChanged which is:

private void OnFilterChanged()
    {
        CvsStaff.View.Refresh();
    }

My ApplyFilter Function is:

void ApplyFilter(object sender, FilterEventArgs e)
    {
        StaffViewModel svm = (StaffViewModel)e.Item;

        if (this.Filter.Length == 0)
        {
            e.Accepted = true;
        }
        else
        {
            e.Accepted = svm.LastName.Contains(Filter);
        }
    }

Is there a silly mistake that I've made that anyone can help me spot? I'm fairly new to WPF and the MVVM pattern so I'm still learning!

EDIT

In the View I bind the collection with:

<CollectionViewSource
  x:Key="StaffGroup"
  Source="{Binding Path=AllStaff}"
  />

and the ListView is as such:

<ListView
      Name="staffList"
      AlternationCount="2" 
      DataContext="{StaticResource StaffGroup}" 
      ItemContainerStyle="{StaticResource StaffItemStyle}"
      ItemsSource="{Binding}"
        Grid.Row="1">

Answer 1

The binding is incorrect. You need to make a few changes. The first thing is to make sure that the DataContext is set correctly. Typically you'll do this on a parent of the ListView and not set it directly on the ListView control. This could be a UserControl / Window / etc.

So assuming you have a view model:

public class MainViewModel
{
    public MainViewModel()
    {
        //Create some fake data 
        InnerStaff = new ObservableCollection<StaffViewModel>();
        InnerStaff.Add(new StaffViewModel {FirstName = "Sue", LastName = "Bucknell"});
        InnerStaff.Add(new StaffViewModel {FirstName = "James", LastName = "Bucknell"});
        InnerStaff.Add(new StaffViewModel {FirstName = "John", LastName = "Harrod"});

        CvsStaff = new CollectionViewSource();
        CvsStaff.Source = this.InnerStaff;
        CvsStaff.Filter += ApplyFilter;
    }

    private string filter;

    public string Filter
    {
        get { return this.filter; }
        set
        {
            this.filter = value;
            OnFilterChanged();
        }
    }

    private void OnFilterChanged()
    {
        CvsStaff.View.Refresh();
    }

    internal ObservableCollection<StaffViewModel> InnerStaff { get; set; }
    internal CollectionViewSource CvsStaff { get; set; }
    public ICollectionView AllStaff
    {
        get { return CvsStaff.View; }
    }

    void ApplyFilter(object sender, FilterEventArgs e)
    {
        StaffViewModel svm = (StaffViewModel)e.Item;

        if (string.IsNullOrWhiteSpace(this.Filter) || this.Filter.Length == 0)
        {
            e.Accepted = true;
        }
        else
        {
            e.Accepted = svm.LastName.Contains(Filter);
        }
    }
}

And assuming you have a Window MainWindow.cs (code behind) you could (for this example) hook up the DataContext here.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MainViewModel();
    }
}

Then you have a few choices for doing your binding, you could specify your CollectionViewSource in XAML or in code, but you've done both. i.e. the xaml one, with the key x:key="StaffGroup" and the VM one CvsStaff. Let's say we get rid of the xaml one completely and use the VM one, which is setup correctly. Then you would bind using the ItemsSource property, like so:

<ListView Name="staffList" 
      AlternationCount="2" 
      ItemsSource="{Binding AllStaff}" 
      Grid.Row="1" />

Also small thing, I've changed the Filter to check for nulls and whitespace. You may also need to change it to be case-insensitive.

One other thing that I haven't mentioned here but is crucial is to implement INotifyPropertyChanged on your StaffViewModel - I assume you have, if not here's some code. You would typically also do this on most of your view models, to notify the view of changes to properties.

internal class StaffViewModel : INotifyPropertyChanged
{
    private string _firstName;
    public string FirstName
    {
        get { return _firstName; }
        set
        {
            _firstName = value;
            OnPropertyChanged("FirstName");
        }
    }

    private string _lastName;
    public string LastName
    {
        get { return _lastName; }
        set
        {
            _lastName = value;
            OnPropertyChanged("LastName");
        }
    }
    public override string ToString()
    {
        return string.Format("{0} {1}", FirstName, LastName);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}