title: Updating items at UI on an ObservableCollection using MVVM Light
body: <p>So I have an <code>ObservableCollection&lt;Term&gt;</code> on a view model, with <code>Term</code> items having some data properties.</p>
  
  <p><code>Term</code> class:</p>
  
  <pre><code>using SQLite;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  
  namespace Neomilano.Model
  {
      public class Term
      {
          public int ID { get; set; }
  
          public string Name { get; set; }
  
          public DateTimeOffset TermStart { get; set; }
  
          public DateTimeOffset TermEnd { get; set; }
  
          public string DurationText 
          {
              get 
              {
                  return "from " + TermStart.Date.ToString("MMMM d, yyyy") + " to " + TermEnd.Date.ToString("MMMM d, yyyy");
              }        
          }
  
          public Term()
          {
          }
      }
  }
  </code></pre>
  
  <p>This is the ViewModel in question that has the ObservableCollection (<code>ProjectBaseViewModel</code> implements MVVM Light's <code>ViewModelBase</code> and has few properties that I don't think is necessary here):</p>
  
  <pre><code>using GalaSoft.MvvmLight.Command;
  using GalaSoft.MvvmLight.Threading;
  using Microsoft.Practices.ServiceLocation;
  using Neomilano.Model;
  using Neomilano.Services;
  using SQLite;
  using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.Diagnostics;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows.Input;
  using Windows.Foundation;
  
  
  namespace Neomilano.ViewModel
  {
      public partial class TermsViewModel : ProjectBaseViewModel
      {
  
          public IDialogService DialogService
          {
              get { return ServiceLocator.Current.GetInstance&lt;IDialogService&gt;(); }
          }
  
  #region properties
          private ObservableCollection&lt;Term&gt; _terms;
          public ObservableCollection&lt;Term&gt; Terms {
              get { return this._terms; }
              private set { Set(() =&gt; Terms, ref _terms, value); }
          }
  #endregion
  
  #region commands
  
          private RelayCommand&lt;int&gt; _deleteTermCommand;
          public RelayCommand&lt;int&gt; DeleteTermCommand
          {
              get 
              {
                  return _deleteTermCommand ??
                      (_deleteTermCommand = new RelayCommand&lt;int&gt;(async id =&gt; {
                          var t = "Are you sure you want to delete this term?";
                          var c = "This cannot be undone.";
                          var ct = "delete";
                          bool deleteConfirmed = await DialogService.ShowConfirmationDialogAsync(t, c, ct);
  
                          if (deleteConfirmed == true)
                              await ExecuteDeleteTermAsync(id);
                      }));
              }
          }
  
  #endregion
  
          public TermsViewModel()
          {
              if (IsInDesignMode)
              {
                  List&lt;Term&gt; t = new List&lt;Term&gt;();
  
                  t.Add(new Term() { ID=1, Name = "Sample Term 1", TermStart = DateTimeOffset.Parse("October 1, 2013"), TermEnd = DateTimeOffset.Parse("December 17, 2013") });
                  t.Add(new Term() { ID=2, Name="Sample Term 2", TermStart=DateTimeOffset.Parse("January 1, 2014"), TermEnd=DateTimeOffset.Parse("April 30, 2014") });
  
                  Terms = new ObservableCollection&lt;Term&gt;(t);
              }
  
          }
  
          /// &lt;summary&gt;
          /// Gets the list of Terms from the database and adds it to the Terms property of the ViewModel.
          /// &lt;/summary&gt;
          /// &lt;returns&gt;&lt;/returns&gt;
          public async Task GetTermsListAsync()
          {
              IsProgressEnabled = true;
  
              List&lt;Term&gt; list = new List&lt;Term&gt;();
              await Task.Run(() =&gt;
              {
                  using (var db = new SQLiteConnection(app.DBFileName))
                  {
                      list = db.Table&lt;Term&gt;().ToList&lt;Term&gt;();
                      db.Close();
                  }
              });
              Terms = new ObservableCollection&lt;Term&gt;(list);
  
              IsProgressEnabled = false;
          }
  
          /// &lt;summary&gt;
          /// Returns the term ID of the selected term from the view.
          /// &lt;/summary&gt;
          /// &lt;param name="clickedItem"&gt;&lt;/param&gt;
          /// &lt;returns&gt;&lt;/returns&gt;
          public Term ReturnSelectedTerm(object clickedItem)
          {
              return (Term)clickedItem;
          }
  
          public async Task ExecuteDeleteTermAsync(int termId)
          {
              IsProgressEnabled = true;
  
              Term t = new Term();
              await Task.Run(() =&gt;
              {
                  using (var db = new SQLiteConnection(app.DBFileName))
                  {
                      var q = db.Table&lt;Term&gt;().Where(tr =&gt; tr.ID.Equals(termId));
                      t = q.First&lt;Term&gt;();
  
                      db.Delete&lt;Term&gt;(termId);
                      db.Close();
                  }
              });
  
              var target = Terms.Single&lt;Term&gt;(tr =&gt; tr.ID.Equals(termId));
              Terms.Remove(target);
  
              IsProgressEnabled = false;
          }
      }
  }
  </code></pre>
  
  <p><em>THE ISSUE:</em> Sure, adding and removing terms from another page work well. When the <code>Term</code> items get updated, however, only the title gets updated.</p>
  
  <p>Here's what's on the view:</p>
  
  <pre><code>            &lt;ListView 
                  x:Name="TermsListView"
                  ItemsSource="{Binding Terms}" 
                  IsItemClickEnabled="True"
                  ItemClick="OnTermItemClick"&gt;
                  &lt;ListView.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;StackPanel Holding="OnTermItemHold"&gt;
                              &lt;FlyoutBase.AttachedFlyout&gt;
                                  &lt;MenuFlyout x:Name="TermItemContextMenu"&gt;
                                      &lt;MenuFlyoutItem Text="edit" Command="{Binding TermsViewModel.NavigateToFormCommand, Mode=OneWay, Source={StaticResource Locator}}" CommandParameter="{Binding}" /&gt;
                                      &lt;MenuFlyoutItem Text="delete" Command="{Binding TermsViewModel.DeleteTermCommand, Mode=OneWay, Source={StaticResource Locator}}" CommandParameter="{Binding ID}" /&gt;
                                  &lt;/MenuFlyout&gt;
                              &lt;/FlyoutBase.AttachedFlyout&gt;
                              &lt;TextBlock Text="{Binding Name}"  Style="{ThemeResource ListViewItemTextBlockStyle}"/&gt;
                              &lt;TextBlock Text="{Binding DurationText}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}"/&gt;
                          &lt;/StackPanel&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/ListView.ItemTemplate&gt;
              &lt;/ListView&gt;
  </code></pre>
  
  <p><code>Term.DurationText</code> does not update when the two date values have changed. If the edit page is to be seen however, the change is reflected in the DatePickers.</p>
  
  <p>Is there any way that I can make <code>DurationText</code> update accordingly through Binding in such a way that <em>it works with an implementation using <strong>MVVM Light</strong></em>?</p>
  
  <p><a href="http://www.codeproject.com/Tips/694370/How-to-Listen-to-Property-Chang" rel="nofollow">I have tried this</a> but the error says:</p>
  
  <blockquote>
    <p>The type 'Neomilano.Model.Term' cannot be used as type parameter 'T'
    in the generic type or method
    'Neomilano.Common.ItemsChangeObservableCollection'. There is no
    implicit reference conversion from 'Neomilano.Model.Term' to
    'System.ComponentModel.INotifyPropertyChanged'.</p>
  </blockquote>
  
  <p>Project specs:
  * This is a WinRT app
  * It's a universal Windows App, but I'm working on Windows Phone first right now. I think this doesn't matter because of the convergence bet. WinRT and WinPRT, but who knows this might be the problem
  * As I have mentioned, I'm using MVVM Light(libraries only).</p>
  
  <p>So, in general, <em>how can I update the contents of an item of an ObservableCollection in WinRT using MVVM Light</em>? </p>
  
  <p>Thank you for your help!</p>