navigation/load different views on WPF/MVVM

Question

I am quite new to WPF development, and currently I am trying to use the MVVM on my application development. I have read a lot about MVVM navigation and switching views, but I can't find a solution for my current situation. Let's explain what it is: First of all, I have my main View element, a Dockpanel, with some fixed areas, and a main "dynamic" area where the content should change, depending on actions:

<DockPanel>
    <Label Content="Top Fixed element"/>
    <StackPanel Orientation="Vertical" Height="auto" Width="150" DockPanel.Dock="Left">
        <Label Content="SomeOptions"/>
        <!-- some more elements -->
    </StackPanel>
    <Label DockPanel.Dock="Bottom" Content="Foot"/>        
    <ContentControl Content="{Binding CurrentMainViewElementViewModel}"/>        
</DockPanel>

I have defined some DataTemplates that I would like to load in this ContentControl, here there is one of the Data Templates as example:

<Window.Resources>
    <DataTemplate DataType="{x:Type ViewModel:FileLoaderVM}">
        <View:FileLoaderView/>
    </DataTemplate>
</Window.Resources>

This FileLoader (View and View Model are implemented, using the RelayCommand and the INotifyPropertyChanged) opens a dialog box after clicking a button, where after selecting a file it is opened and parsed, and show all the found elements inside a ListView with multiple selection(in this case, persons with their data). What I want to do now is to load another user control in this ContentControl, when I click a button. This button is defined in my view model like this:

public ICommand LoadPersons
    {
        get { return new RelayCommand(param => this.loadSelectedPersons(), param => (SelectedPersons!=null && SelectedPersons.Any()));}
    }

My question comes at this point, how can I modify the content of the ContentControl, loading another User Control instead of the current one directly from my view model (in this "this.loadSelectedPersons()")? If this is not possible, how should I approach to solve this problem? Next to this action, I want to show all the previously selected elements and manipulate in different possible ways (inserting in a DB, saving in another file and so on), and I have already for that the appropriate User Control, that I would like to show in my main view element in the ContentControl section, keeping the other elements as they are originally.

Answer 1

lets see if i get you right.

you have a mainviewmodel with a property (CurrentMainViewElementViewModel) bound to the ContentControl. your MainViewmodel set the FileLoaderVM to this Property. now you wanna show a "new/other" Viewmodel when a File is seleted in your FileLoaderVM?

why dont you simply expose a event from your FileLoaderVM and subscribe to this event in your MainViewModel? if you do so your MainViewModel can then set the "new/other" Viewmodel to the ContentControl

Answer 2

To change content of ContentControl you do not load another user control, but change value of CurrentMainViewElementViewModel (to which ContentControl.Content is bound) to a new ViewModel, which will load another UserControl (defined in DataTemplate same way as FileLoaderVM is).

This looks like a job for main ViewModel (where CurrentMainViewElementViewModel is located).

Easiest solution is to provide a method in that ViewModel

public Switch()
{
    CurrentMainViewElementViewModel = SomeViewModel;
}

and call this method from FileLoaderVM.