title: Bind ObservableCollection using MVVM
body: <p>I'm trying to put together what should be a very basic MVVM sample, but I'm having trouble getting it to work. Basically, I want to bind an <code>ObservableCollection</code> to a <code>ListBox</code>, and have a search option for the user to search for other items. Upon searching, the <code>ListBox</code> should be refreshed as the collection will change. Here is my code:</p>
  
  <p>Model:</p>
  
  <pre><code>public class Item
     public string Name { get; set; }
  }
  </code></pre>
  
  <p>ViewModel:</p>
  
  <pre><code>public class ViewModel : INotifyPropertyChanged
  {
      private ObservableCollection&lt;Item&gt; _items { get; set; }
      public ObservableCollection&lt;Item&gt; Items
      {
          get { return _items; }
          set
          {
              _items = value;
              RaisePropertyChanged("Items");
          }
      }
  
      public void GetDefaultItems()
      {
          ObservableCollection&lt;Item&gt; temp = new ObservableCollection&lt;Item&gt;();
          temp.Add(new Item() { Name = "abc" + " 1" });
          temp.Add(new Item() { Name = "def" + " 2" });
          temp.Add(new Item() { Name = "ghi" + " 3" });
          Items = temp;
      }
  
  
      public void Search(string query)
      {
         ObservableCollection&lt;Item&gt; temp = new ObservableCollection&lt;Item&gt;();
         temp.Add(new Item() { Name = query + " 1" });
         temp.Add(new Item() { Name = query + " 2" });
         temp.Add(new Item() { Name = query + " 3" });
         Items = temp;
      }
  
      public event PropertyChangedEventHandler PropertyChanged;
  
      private void RaisePropertyChanged(string propertyName)
      {
          if (this.PropertyChanged != null)
          {
              this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          }
      }
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;Grid x:Name="LayoutRoot"&gt;
      &lt;ListBox ItemsSource="{Binding}"&gt;
          &lt;ListBox.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;StackPanel&gt;
                      &lt;TextBlock x:Name="Name" Text="{Binding Name}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/DataTemplate&gt;
          &lt;/ListBox.ItemTemplate&gt;
      &lt;/ListBox&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>MainPage.xaml:</p>
  
  <pre><code>&lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&gt;
      &lt;StackPanel&gt;
          &lt;TextBox x:Name="txtSearch"/&gt;
          &lt;TextBlock Text="Items:" /&gt;
          &lt;views:ItemView x:Name="ItemsOnPage" /&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>and finally, MainPage.xaml.cs:</p>
  
  <pre><code>public partial class MainPage : PhoneApplicationPage
  {
      private ViewModel vm;
  
      // Constructor
      public MainPage()
      {
          InitializeComponent();
          txtSearch.KeyUp += txtSearch_KeyUp;
          vm = new ViewModel();
      }
  
      void txtSearch_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)
      {
          if (e.Key == Key.Enter)
          {
              vm.Search(txtSearch.Text);
          }
      }
  
      protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
      {
          base.OnNavigatedTo(e);
          vm.GetDefaultItems();
          ItemsOnPage.DataContext = vm.Items;
      }
  }
  </code></pre>
  
  <p>So what happens is, I can see the default items load the first time but when I search, the list does not get refreshed. It is all hard-coded right now so if the search <em>does work</em> I should see 3 items for whatever they searched for.</p>
  
  <p>What I've noticed though is that if I set up a breakpoint in the ViewModel at <code>RaisePropertyChanged</code>, <code>this.PropertyChanged</code> is <strong>always null</strong>, so it never makes it inside the <code>if</code> statement. I've seen examples that use <code>INotifyPropertyChanged</code> on the model, but in this case since I need to be notified when the collection changes, it seemed correct to use on the view model. This could be wrong, but I'm not sure how else to set it up.</p>
  
  <p>Can anyone see what I'm doing wrong?</p>