Load multiple UserControls on WPF window

Question

I have a Window on which I load an UserControl say Control1. Now if the user clicks on a certain button a new UserControl, Control2 should be loaded on the Window and Control1 should dissapear. Same here, when a user clicks a button the next UserControl, Control3 should be loaded and Control2 should dissapear. It should be possible to go back too, e.g. from Control3 to Control2.

Loading the first main UserControl on my Window was easy, I've done that more than enough. But I'm stuck at how to implement the 'navigation' between the Usercontrols. Never done anything like that before. I use MVVM for my WPF app. Anyone some ideas?

Thx.

Edit: With Rachel's answer I now do this in a command to switch the controls: In the MainWindow:

<DataTemplate DataType="{x:Type ViewModel:MainControlViewModel}">
<my:MainControl />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModel:ProductsControlViewModel}">
<my:ProductsControl />
</DataTemplate>


 <Grid>
<ContentControl Content="{Binding CurrentPageViewModel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>

In the MainControlViewModel and nearly the same in the ProductsControl:

 public ICommand LoadProductControlCommand
{
  get
  {
    if (_loadProductControl == null)
      _loadProductControl = new RelayCommand(LoadProductControl);
    return _loadProductControl;
  }
}

private void LoadProductControl(object notUsed)
{
  _mainWindowViewModel = (MainWindowViewModel) Application.Current.MainWindow.DataContext;
  _mainWindowViewModel.CurrentPageViewModel = new ProductsControlViewModel();
}

Is this a good way or should I do it different? Because in my app the buttons are on the controls and not the main window.

I just [answered](http://stackoverflow.com/a/15365002/302677) a different question on this subject a few hours ago. It includes a [link to my blog](http://rachel53461.wordpress.com/2011/12/18/navigation-with-mvvm-2/) which contains some sample code illustrating this for download if you want. — Rachel, Mar 12 '13 at 16:53
@Rachel, I've edited my question with some code snippets I use thx to you. I've got it working like this. Is it ok to change the MainWindowViewModel.CurrentPageViewModel in the controls command? Your article on your blog pointed me in the right direction. You're smart and goodlooking :) Btw, I can't mark your answer as the solution because you added it as a comment... — PitAttack76, Mar 12 '13 at 20:57
Typically I don't like to reference UI components like `Application.Current.MainWindow` from the ViewModel layer is possible. Ideally I'd prefer to bind to an `ICommand` in the ViewModel to change pages, or to use a Messaging system of some kind to broadcast ChangePage messages, which the main ViewModel can subscribe to. I have a [brief overview of messaging systems](http://rachel53461.wordpress.com/2011/06/05/communication-between-viewmodels-with-mvvm/) on my blog if you're intested — Rachel, Mar 13 '13 at 12:44

score 0 · Answer 1 · answered Mar 12 '13 at 16:51

Put a ContentPresenter in the MainWindow like this:

<ContentPresenter Content="{Binding ActiveWidget}"/>

and then in the ViewModel

public ViewModelBase ActiveWidget {get;set;} // Don't forget INotifyPropertyChanged!!

then you must create a DataTemplate for each ViewModel with an appropiate instance of the UserControls. See This Article for a generic solution to this.

Load multiple UserControls on WPF window

1 Answers1

Linked