MVVM - How to keep formatted properties up-to-date?

Question

I am working on a Windows Phone app that uses MVVM, but am struggling with the implementation of MVVM for properties that need to be formatted from the model class to show in the view.

Let's say that I have a simple model class called Person.

public class Person {

   public string Name { get; set; }
   public DateTime Birthday { get; set; }

}

There is a list of Person objects that are loaded from a locally saved file, and I want to show a list of persons on a list page and then let the user tap on a person to navigate to a details page where there are more details about this person.

On the list page, I want to show the person's birthday as "Birthday: 2/22/1980" (where "2/22/1980" is the person's formatted Birthday)

On the details page, I want to show the person's birthday in a different format: "Eric's birthday is 2/22/1980" (where "Eric" is the person's Name and "2/22/1980" is the person's formatted Birthday).

Normally, I would just create a view model that formats the Birthday properly:

public class PersonViewModel {

   private Person person;

   public PersonViewModel(Person person) {
      this.person = person;
   }

   public string BirthdayForList {
      get {
         return "Birthday: " + person.Birthday.ToString("ddd", CultureInfo.CurrentCulture);
      }
   }

   public string BirthdayForDetails {
      get {
         return person.Name + "'s birthday is " + person.Birthday.ToString("ddd", CultureInfo.CurrentCulture);
      }
   }

}

In order to show these values in the UI, I would create a collection of these view model objects (and bind them to the view):

ObservableCollection<PersonViewModel> Items

Now, what do I do when a person's birthday is updated (somewhere on the details page) and make sure that Items has been updated with up-to-date BirthdayForList and BirthdayForDetails properties, while at the same time saving the Person locally?

I want to keep everything simple and not have to update both the saved list of Person objects and list of PersonViewModel objects manually each time a value needs to be updated.

What is the best way to do this? Should I be using an ObservableCollection of PersonViewModel objects? Also, I have read in several places on this website that the model class should not implement NotifyPropertyChanged.

(Note: I have simplified the problem for this question. You should assume that there are many other ways that I need to format the Birthday property throughout the application as well as other properties from the model class that need to be formatted differently on different pages.)

Answer 1

Why don't simply do the whole thing in xaml and don't use the "calculated properties"?

<TextBlock>
    <TextBlock.Text>
        <MultiBinding StringFormat="{}{0}'s birthday is {1:ddd}">
            <Binding Path="Person.Name">
            <Binding Path="Person.BirthDay">
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>

Then all you need to do is implement INotifyPropertyChanged in the Person class and raise the event in the setter.

EDIT: I would also recommend using a framework like MVVM light so you can use the ViewModel and ObservableObject base classes for your objects and simply be able to use their implementation of INotifyPropertyChanged

public string FirstName
{
    get { return _firstName; }
    set
    {
        _firstName = value;
        RaisePropertyChanged(() => FirstName);
    }
}
private string _firstName;

Answer 2

Converters and XAML formatting are good solutions when they work, but sometimes you reall just need to do it in the ViewModel. Typically, you'd need to implement INotifyPropertyChanged and raise the PropertyChanged event for the calculated property when any of its dependencies change.

Managing these dependencies is a royal pain in the ... In fact I got so fed up with this very problem that I an MVVM framework called Catwalk that allows you to do these types of calculated properties in your ViewModel. If you use the framework, you can have code like

  public string BirthdayForDetails
  {
    get
    {
      return Calculated(() => this.Name + "'s birthday is " + this.Birthday.ToString("ddd", CultureInfo.CurrentCulture));
    }
  }

Where the base class for model will automatically raise a PropertyChanged event for BirthdayForDetails if either Name or Birthday change. You just have to inherit from ObservableModel and Birthday & Name have to be observable properties like

  public string Name
  {
    get { return GetValue<string>(); }
    set { SetValue(value); }
  }

If you decide to try it out, let me know what you think.

Answer 3

You have two options:

1. Just format the date in XAML. Here is an example.

2. For more complex conversions, you can use converters.

What you should NOT do is store the format in the view model. The format of the data is a view/presentation concern only. So, the benefit of the above approach is that you don't need to keep separate lists just because of formatting.

Answer 4

Putting all your PersonViewModels in an ObservableCollection only solves the issue that your UI needs to update when a new PersonViewModel is added / removed from the collection.

That however does not solve the problem, that one object inside your collection changes. So if the Birthdate of the first person in the list changes, the collection stays the same.

So what you need to achive is to notify the UI that one object inside this collection changed. You can do so either by letting your ViewModel implement INotifyPropertyChanged or deriving it from DependencyObject (discussion on what's the better solution: INotifyPropertyChanged vs. DependencyProperty in ViewModel).

I'd recommend using INotifyPropertyChanged. Implementing that interface will give you an PropertyChanged event. You need to raise that event everytime one of your properties change. Unfortunately this also requires you to create additional properties in the ViewModel so that you get notified when the changes happen.

The simplest (definitly not the best) way would be to just call OnPropertyChanged for every property that is dependent.

public class PersonViewModel : INotifyPropertyChanged
{
    private Person person;

    public PersonViewModel(Person person)
    {
        this.person = person;
    }

    public DateTime Birthday
    {
        get { return person.Birthday; }
        set 
        { 
            person.Birthday = value;
            OnPropertyChanged("Birthday");
            OnPropertyChanged("BirthdayForList");
            OnPropertyChanged("BirthdayForDetails");
        }
    }

    public string Name
    {
        get { return person.Name; }
        set 
        { 
            person.Name = value; 
            OnPropertyChanged("Name");
            OnPropertyChanged("BirthdayForDetails");
        }
    }

    public string BirthdayForList
    {
        get
        {
            return "Birthday: " + Birthday.ToString("ddd", CultureInfo.CurrentCulture);
        }
    }

    public string BirthdayForDetails
    {
        get
        {
            return Name + "'s birthday is " + Birthday.ToString("ddd", CultureInfo.CurrentCulture);
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

I already mentioned that this solution is not the best. You are very likely to add another dependent property and you would have to remember adding the OnPropertyChanged to the Property you depend on.

So you could either use converters for your ViewModel (that now notifies on property change) and remove your calculated properties, or you stick to your properties and find an easier way to mark dependent properties.

Thankfully somebody allready solved the issue of dependent / calculated properties. When googeling "INotifyPropertyChanged dependent properties" a lot of results show up. One that I really like is this one (Handling INotifyPropertyChanged for dependant properties) because it uses clean and readable attributes to mark the dependencies.

Also there are several MVVM Frameworks out there, that include solutions for said problem.

I hope one of the suggested solutions does help you fix your problem.

Answer 5

You can simply call the PropertyChanged method in the setter of your "person" property

like this

private Person myPerson;
public Person MyPerson
{
    get { return myPerson; }
    set
    {
        myPerson = value;
        PropertyChanged("MyPerson");
        PropertyChanged("BirthdayForList");
        PropertyChanged("BirthdayForDetails");
    }
}

Answer 6

You can use a combination of multiple elements embedded inside a TextBlock element

<TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8"><Run Text="total length "/><Run Text="{Binding TotalHours}" FontSize="48"/><Run Text="h "/><Run Text=":" FontSize="48"/><Run Text="{Binding TotalMinutes}" FontSize="48"/><Run Text="m "/></TextBlock>

Somewhat like this sample https://stackoverflow.com/a/8130843/3214300