Moving behind code to a viewModel class binding

Question

After learning about ObservableCollection and INotifyPropertyChanged, I'm trying use them to divide my code into MVVM.

But I'm having some trouble with binding outside of code-behind class.

My app have three boxes that let you input a person's name, income, age. Then it will display them on a DataGrid.

xaml:

<Window x:Class="myApp.MainWindow"
 [...]

  <Grid>
     <DataGrid  x:Name="peopleDisplay">
     </DataGrid>
  </Grid>    

</Window>

in MainWindow.xaml.cs (no structure)

 public partial class MainWindow : Window
 {
    private ObservableCollection<Person> peopleList = new ObservableCollection<Person>();

    public MainWindow()
    {
        InitializeComponent();

        peopleDisplay.ItemsSource = peopleList;

    }

    private void btnAddProduct_Click(object sender, RoutedEventArgs e)
    {

      peopleList.Add(new Person { personName = nameBox.text, income = incomebox.text, age = ageBox.text });

      }

    [...]
   }


class People : INotifyPropertyChanged
 {
    private string personName;

    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }

    public string PersonName {
        get
        {
            return this.personName;
        }
        set
        {
            if( this.personName != value)
            {
                this.PersonName = value;
                this.NotifyPropertyChanged("PersonName");
            }

        }
    }
    public int age { get; set; }
    public double income { get; set; }
}

My main questions:

so now Im trying to do two things: add a new function that will calculate the total income of everyone, move the ObservableCollection above to a viewModel class

1. now in the new viewModel class I have the ObservableCollection personList (instead of inside behind code), but is it wrong to put the calculation method and the properties here too? If I put the calculation properties here this viewModel will be inheriting INotifyPropertyChanged, so when a the totalIncome properties changes it will change the UI automatically. it makes no sense to put it in the person model though, cause that class represent one person.

2. How do I bind this people List in viewModel to the xaml? If the list is in code-behind I can just do peopleDisplay.ItemsSource = peopleList;, but this viewModel is a class and not a ObservableCollection object, I cant set it to the dataGrid's ItemsSource. Is there a way to bind it in the viewModel class? Im in the progress of learning mvvm so I might be doing something wrong here too. Please advice

Answer 1

Your Model class is People. like below:

public class People : INotifyPropertyChanged
{
    private string personName;

    public event PropertyChangedEventHandler PropertyChanged;


     protected void OnPropertyChanged([CallerMemberName] string propertyName = null) 
       { 
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
       }

    public string PersonName
    {
        get
        {
            return this.personName;
        }
        set
        {
            if( this.personName != value)
            {
                this.PersonName = value;
                this.NotifyPropertyChanged();
            }
        }
    }

    public int Age { get; set; }
    public double Income { get; set; }
}

Your ViewModel like below:

public class PeopleViewModel 
{
    Public List<People> ListOfPeople { get; set; }
}

ViewModel can implement INotifyPropertyChanged interface to Notify the View.

Now you can set the data context as PeopleViewModel and bind your ListOfPeople to your DataGrid.

Set DataContext for your View you can do it from XAML or code behind.

Set ItemsSource for your DataGrid in your View .

XAML:

<Window x:Class="myApp.MainWindow" DataContext="{Binding PeopleViewModel }">
    <Grid>
        <DataGrid  x:Name="peopleDisplay" ItemSource={Binding ListOfPeople}>
            ......
        </DataGrid>
    </Grid> 
</Window>

Reference 1

Reference 2

Answer 2

1) I dont see any problem with your approach, but, what would happen if someday you want to test the method that calculate the "TotalIncome"? You could separate the calculation in an helper class.

2) First of all, you have to expose the collection in your ViewModel, using public properties. With that being said, you have to declare the binding in your xaml file.

<DataGrid  x:Name="peopleDisplay"
           ItemsSource="{Binding MyPropertyOnViewModel}">
</DataGrid>

Dont forget to set the DataContext of your window with your viewmodel.