Some parts of View structure can be static, such as - Controls, Layouts; and some parts can be dynamic, such as - animations or state changes etc., depending on the requirement.

MVVM pattern follows that View should not have any logic in code behind. Code behind in MVVM is used just to define the constructor and initializers and only to define the logic in which we need to access any UI element or its reference. But, events handling or other data related logic should not be there in code behind.

ViewModel

In WPF simple pattern (without using MVVM), we have lots of logic written in one place i.e. XAML and code behind. We directly interact with the UI objects using code behind. But, it is not the same in the MVVM pattern.

Connection between View and Model.

Gets data from Model object and provides it to View so that it can be displayed on UI.

Data changes and interaction are done via ViewModel only.

Navigation logic for different Views are also defined in ViewModel.

Let's try by creating a sample application step by step.

Create a simple WPF project. I named it as "MVVMBasics".

Add three folders in the project. i.e. Views, Models, and ViewModels.

Add a class in Models folder. I named it "CustomerModel". Let's now define the properties and PropertyChangedEventHandler (as we have already discussed that Model should contain properties) and notify any changes in those properties defined in interface INotifyPropertyChanged.

Let's see how to define.

namespace MVVMBasics.Model {

publicclass CustomerModel {}

publicclass Customer: INotifyPropertyChanged {

private string customerFirstName;

private string cutomerLastName;

public string CustomerFirstName {

get {

return customerFirstName;

}

set {

if (customerFirstName != value) {

customerFirstName = value;

RaisePropertyChanged("CustomerFirstName");

RaisePropertyChanged("FullName");

}

}

}

public string CustomerLastName {

get {

return cutomerLastName;

}

set {

if (cutomerLastName != value) {

cutomerLastName = value;

RaisePropertyChanged("CustomerLastName");

RaisePropertyChanged("FullName");

}

}

}

public string FullName {

get {

return customerFirstName + " " + cutomerLastName;

}

}

public event PropertyChangedEventHandler PropertyChanged;

privatevoid RaisePropertyChanged(string property) {

if (PropertyChanged != null) {

PropertyChanged(this, new PropertyChangedEventArgs(property));

}

}

}

}

Add ViewModel for CustomerModel and add a list of customers using dummy data.

Please see, in the above code, we have declared the bindings and mode of binding as per the properties defined in Model. And as we have discussed earlier, there will be no code in code behind of user control except the constructor and initializer.

As soon as we change the text in the text box, a change in property value notifies and raises the PropertyChangedEventHandler. That changes the value of properties accordingly. So, the values of dataContext gets changed. Code sample is attached. You can download and directly run it.