How does a View know what ViewModel to use in WPF?

Question

Can someone explain how the View and ViewModel are connected? I can't find anywhere the xaml or the xaml.cs for the View that references the ViewModel, nor anything in the ViewModel.cs file that references the View, yet they are somehow connected, and binding members from the ViewModel to the View work.

Also, in the constructor of each, there is only the InitializeComponent for the View and a basic constructor for the ViewModel (no declaration/definition of the View).

Thanks!

Answer 1

There are various options here.

Something has to set the View's DataContext to be an instance of the ViewModel. There are lots of options here:

• This can be done directly in xaml (the View just instances the ViewModel directly).
• This can be done in the View's constructor (this.DataContext = new MyViewModel();)
• This can be handled via a DataTemplate
• A "coordinating" class can wire these together (ie: a separate "presenter" class can construct both and set the DataContext appropriately)

The most common are to either have the View define the VM in the xaml (View-first), or to have everything based from a ViewModel-centric point of view, and have WPF automatically create the View based on the bound VM (ViewModel-first).

The former approach is what's used by a lot of toolkits, such as MVVM Light. The latter approach is what I used in my MVVM blog series, and used by some other toolkits.

Answer 2

A "clean" way for connecting the views to the view-models would be...

When you create the views, for each view, set its DataSource to its view-model:

E.g.

public class App {     private void OnAppStart()     {         var model = new MainModel();         var vm = new MainVM();         var view = new MainWindow();          vm.Model = model;         view.DataSource = vm;          view.Show();     } } 

When the model you are viewing changes, update the VM:

public class MainVM {     private void OnSelectedModelItemChanged()     {         this.SelectedItem = new ItemVM();         this.SelectedItem.Model = this.SelectedModelItem;     } } 

And use data templates to make view select the correct sub views for each VM.