MVVM - How do I Bind the View Model to the View

Question

and thanks in advance for the guidance. I'm new to MVVM, and I've been learning via articles. I think I've gotten pretty far, but there's one thing that seems to escape me. How do I (not using code in the code behind) automatically bind to the view I want? As I understand it, if done correctly, this is how the pattern should work. I can make this all happen using code behind in the main window xaml, and I have even created a resource dictionary correctly (as I can access it in the immediate window.) I just can't get to that next step of 'automation.' It could be my design, as I new to this pattern I'm totally amenable to the possibility that I've done this all wrong. Here's what I have...

I have a main window. It's a grid with 3 rows. The top row is a menu. The bottom row is a status bar. The middle is a stack panel where the content is dynamically loaded based on the menu selection.

I have 2 views that I am using to fill this stack panel. One has nothing more than a styled textbox in it (Help & About.) The other is itself a composite view: a search panel, a results grid and a detail panel all loaded into a dock manager frame.

In the main window code behind, when the user clicks a menu option, I clear the children of the stack panel, instantiate the view model, instantiate the view passing the view model into it and then add the new view into the children of the stack. This works fine, but I don't think it's consistent with the pattern.

As I mentioned I have the resource dictionary, but I don't know how to associate it with the stack panel. I assume that I have to use binding, but I can't figure out how to bind to the resource dictionary and/or how to tell it to change views on command.

I have read articles that have added all of the available view models to a read only list in a view model that essentially acts as the go between the main widow and the actual view models needed. This seems OK, but I don't understand why the resource dictionary is needed then. Moreover, these examples were wizard implementations and in that scenario this seems like a good approach, but I can't imagine doing that for an application with say 100 view models.

Again, sorry for my ignorance, but I was hoping that someone could point me in the right direction. As I said, I've read a ton of articles (Josh Smith, Dave Hill, etc.) and I still haven't made the connection, so I was hoping for some concrete guidance. (I do have WPF Unleashed on the way, but I was hoping to make some progress before then.)

Can anyone help?

Don't have time to answer this fully, but maybe this'll get you started. In the resource dictionary you can set the Default View for the ViewModel type. Then when you drop an instance of the ViewModel to be the Content for some sort of ItemPresenter, it'll use that default instantiation and magically show the right view for the ViewModel. Then all you have to do is create a Window with a Region (or some such, look those up) and fill the region using a region manager. See question here http://stackoverflow.com/questions/5767759/changing-between-views-using-mvvm-light/5769233#5769233 — J Trana, Apr 28 '11 at 19:03
I think I understand, but could you validate just to be sure? The resource dictionary is simply a short cut for relating specific views and view models. But that notwithstanding, in whatever manner one chooses to do this, you still need code somewhere that says 'when this event is fired, clear the existing content and add this new content.' Is that it? There seems to be better methods for handling the switching of content, for example your region manager. I think where I was confused was when reading '...with no code behind...' I thought that meant that the content switching code didn't exist. — panania, May 16 '11 at 17:08

score 9 · Answer 1 · answered Nov 12 '15 at 15:32

There are ways on how to bind your view models.

1. Create a static resource in the XAML.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <local:MainViewModel x:Key="MainVM" />
  </Window.Resources>
  <Grid DataContext="{StaticResource MainVM}">

  </Grid>
</Window>

2. Bind in View's constructor

I know you mentioned not using code behind but this is also an option. As long as you don't write any logic in the code behind then you're good.

public MainWindow()
{
  InitializeComponent();
  this.DataContext = new MainViewModel(); 
}

3. Bind using ViewModelLocator

You might want to create a view model locator class that is in charge of giving your view the viewmodel that it needs.

Here's a simple example of a viewmodel locator class. The viewmodel locator class exposes some viewmodel properties. Then later on we will bind these properties to the data context of the views.

 public class ViewModelLocator
  {
    public ViewModelLocator()
    {
      this.MainVM = new MainViewModel();
      this.AnotherVM = new AnotherViewModel();
    }
    public MainViewModel MainVM { get; set; }
    public AnotherViewModel AnotherVM { get; set; }
  }

Then you can create a static resource of the viewmodel locator in the App.xaml to make it available to all the views within the app.

<Application x:Class="WpfApplication2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication2"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
      <local:ViewModelLocator x:Key="Locator" />         
    </Application.Resources>
</Application>

Then you can bind your view's data context to the viewmodel locator's property.

The example tells us that you are binding the MainVM property if the viewmodel locator, which is a MainViewModel instance, to the Window's data context.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding MainVM, Source={StaticResource Locator}}">

score 0 · Answer 2 · answered Apr 28 '11 at 15:53

0

I've not used WPF but I've used Silverlight and I believe it should be pretty much the same.

When I create my View I instantiated the required ViewModel within the View. I use MEF for Dependency Injection and create the Required VM that way, you might not want to go down that route but it could give you an idea.

e.g. ViewModel:

[Export] // This attribute tells MEF to export an instance of this class
public class MyViewModel
{ ... }

View

[Import] // MEF will look for any exported objects of type MyViewModel
public MyViewModel ViewModel
{
  get { return this.DataContext as MyViewModel; }
  set { this.DataContext = value; }
}

This way saves instantiating your VM and your V, just create your V and let that care about instantiating the VM and setting it's own DataContext.

answered Apr 28 '11 at 15:53

Fermin

34,961
21
83
129

Right. I did something similar. Thanks, but my question was more along the lines of what J Trana commented on above. Basically, how does one switch content with no code? And I think, based on what I've read, you don't. – panania May 16 '11 at 17:12
Is there a way to do the Import/Export thing without the MEF ? – Jelle Capenberghs Oct 25 '11 at 07:28
@JelleCapenberghs the actual Import/Export attributes are MEF specific but you could use another Dependency Injection framework, or write your own Import/Export attributes to find the appropriate type to instantiate – Fermin Oct 25 '11 at 08:36

MVVM - How do I Bind the View Model to the View

2 Answers2

Linked