title: WPF Navigate through views using MVVM pattern
body: <p>I'm building my first WPF using MVVM pattern. With the help of this community, I manage to create my Model, my first ViewModel and view. Now I want to add some complexity to the app designing the basic application layout interface. My idea is to have at least 2 child views and one main view and separate them on several XAML:</p>
  
  <blockquote>
    <ul>
    <li>Main.XAML</li>
    <li>Products.XAML</li>
    <li>Clients.XAML</li>
    </ul>
  </blockquote>
  
  <p>Main will have a menu and a space to load child views (Products and Clients). Now following MVVM pattern all the navigation logic between views should be write on a ViewModel. So mi idea is to have 4 ViewModels:</p>
  
  <blockquote>
    <ul>
    <li>MainViewModel</li>
    <li>ProductsViewModel</li>
    <li>ClientsViewModel</li>
    <li>NavigationViewModel </li>
    </ul>
  </blockquote>
  
  <p>So NavigationViewModel should contain a collection of child viewmodels? and an active viewmodel is that right?</p>
  
  <p>So my questions are:</p>
  
  <p>1) How can I load different views (Products, Clients) on Main view using MVVM pattern?</p>
  
  <p>2) How do I implement navigation viewModel?</p>
  
  <p>3) How can I control the max number of open or active views?</p>
  
  <p>4) How can I switch between open views?</p>
  
  <p>I have been doing a lot of search and reading and couldn't find any simple working example of MVVM navigation with WPF that loads multiple views inside a main view. Many of then:</p>
  
  <p>1) Use external toolkit, which I don't want to use right now.</p>
  
  <p>2) Put all the code for creating all the views in a single XAML file, which doesn't seems like a good idea because I need to implement near 80 views!</p>
  
  <p>I'm in the right path here? Any help, especially with some code will be appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So, I build a test project following @LordTakkera advices, but get stuck. This is how my solution looks like:
  <img src="https://i.stack.imgur.com/ZJl3q.jpg" alt="Solution"></p>
  
  <p>I create:</p>
  
  <blockquote>
    <ul>
    <li><p>Two Models (Clients and Products)</p></li>
    <li><p>One MainWindow and two wpf user controls(Clients and Products) XAML.</p></li>
    <li><p>Three ViewModels (Clients, Products and Main ViewModel)</p></li>
    </ul>
  </blockquote>
  
  <p>Then I set dataContext on each view to corresponding viewModel. After that I create MainWindow with the ContentPresenter like this and bind it to a property of the viewmodel.</p>
  
  <p><strong>MainWindow.XAML</strong></p>
  
  <pre><code>&lt;Window x:Class="PruevaMVVMNavNew.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="519" Width="890"&gt;    
  &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="150"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="80"/&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="20"/&gt;
      &lt;/Grid.RowDefinitions&gt;        
      &lt;Border Grid.Column="0" Grid.ColumnSpan="2" Background="AntiqueWhite" &gt;&lt;/Border&gt;
      &lt;Border Grid.Row="1" Grid.RowSpan="2" Background="AliceBlue"&gt;&lt;/Border&gt;
      &lt;Border Grid.Row="1" Grid.Column="1" Background="CadetBlue"&gt;&lt;/Border&gt;                
      &lt;ContentPresenter Grid.Row="1" Grid.Column="1" x:Name="ContentArea" Content="{Binding CurrentView}"/&gt;        
      &lt;StackPanel Margin="5" Grid.Column="0" Grid.Row="1"&gt;            
          &lt;Button&gt;Clients&lt;/Button&gt;
          &lt;Button&gt;Products&lt;/Button&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>And also this is viewmodel from MainWindow:</p>
  
  <pre><code>class Main_ViewModel : BaseViewModel
      {
          public Main_ViewModel()
          {
              CurrentView = new Clients();
          }
  
          private UserControl _currentView;
          public UserControl CurrentView
          {
              get
              {
                  return _currentView;
              }
              set
              {
                  if (value != _currentView)
                  {
                      _currentView = value;
                      OnPropertyChanged("CurrentView");
                  }
              }
          }
  
      }
  </code></pre>
  
  <p>So this load by default clients view and looks like this (which is just right!):</p>
  
  <p><img src="https://i.stack.imgur.com/YsR3i.jpg" alt="Current state"></p>
  
  <p>So I suppose I need a way to relate the buttons on the left, with a certain viemodel and then bind them with CurrentView Property of Main viewModel. How can I do that?</p>
  
  <p><strong>UPDATE2</strong></p>
  
  <p>According to @LordTakkera advice I modify my main viewModel this way:</p>
  
  <pre><code>class Main_ViewModel : BaseViewModel
      {
          public ICommand SwitchViewsCommand { get; private set; }
  
          public Main_ViewModel()
          {
              //CurrentView = new Clients();
              SwitchViewsCommand = new RelayCommand((parameter) =&gt; CurrentView = (UserControl)Activator.CreateInstance(parameter as Type));
          }
  
          private UserControl _currentView;
          public UserControl CurrentView
          {
              get
              {
                  return _currentView;
              }
              set
              {
                  if (value != _currentView)
                  {
                      _currentView = value;
                      OnPropertyChanged("CurrentView");
                  }
              }
          }
      }
  </code></pre>
  
  <p>I use RelayCommand instead of DelegateCommand but I think it works the same way. The command is executed when I hit the buttons and the type parameter string its ok but i get this error:</p>
  
  <p><img src="https://i.stack.imgur.com/RtVXY.jpg" alt="Error"></p>
  
  <p>Translation: <strong>Value cannot be null. Parameter name: type. Suggestion use New keyword to create object instance</strong>
  I don't know where to put the New keyword. I have try on CommandParameter but it wont work. Any idea? Thanks</p>
  
  <p><strong>UPDATE 3</strong></p>
  
  <p>After all the advices and help received here, and a lot of work, here is my final navigation menu and the base for my application interface. </p>
  
  <p><img src="https://i.stack.imgur.com/Wv7n3.jpg" alt="Capture 1">
  <img src="https://i.stack.imgur.com/KJYiL.jpg" alt="Capture 2"></p>