How to display different views on MainWindow

Question

So I followed a video online that showed me how to implement MVVM in a WPF application. Please note that I am a newbie when it comes to both of them.

I have the following classes that comprise the Model, View, and ViewModel layers of my WPF application:

• App class (.xaml and .xaml.cs)
• MainWindow class (.xaml and .xaml.cs)
• MainWindowViewModel.cs
• MalfunctionsView (.xaml and .cs)
• MalfunctionsViewModel.cs
• PartsView (.xaml and .cs)
• PartsViewModel.cs

Basically I just have two views (Malfunctions and Parts) that get loaded up into the MainWindow view.

I have it setup right now so that I can comment code in and out to show either the MalfunctionView or the PartsView in the MainWindow. For example, if I want to see the MalfunctionView then I comment out all of the PartsView code and then re-run it in VS. Yes, I know... it's sad and pathetic, but I haven't learned how to unload one view and load another view on the fly. Which brings me to my question: how do I unload one view from the MainWindow and then load up a different view into the MainWindow? For example, I have a button on the PartsView called Select, which when clicked then needs to unload the PartsView from the MainWindow and load up the MalfunctionsView in it's place.

I am including the code that I have for the App class and MainWindow View and MainWindow ViewModel so that it can be seen how I am currently loading up ViewModels (user controls) into the MainWindow.

App.xaml.cs

public partial class App : Application {
        protected override void OnStartup(StartupEventArgs e) {
            base.OnStartup(e);

            // Create MainWindow ViewModel
            var mainWindowVM = new MainWindowVM();

            // Create MainWindow View
            MainWindow mainWindowVw = new MainWindow();

            // Set MainWindow View datacontext to MainWindow ViewModel and then show the window
            mainWindowVw.DataContext = mainWindowVM;
            mainWindowVw.Show();   
        }
    }

MainWindow.xaml

<Window x:Class="PAM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:PAM.ViewModel"
        xmlns:vw="clr-namespace:PAM.View"
        Title="Parts and Malfunctions" Height="800" Width="550">

    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:MalfunctionsViewModel}">
            <vw:MalfunctionsView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:PartsViewModel}">
            <vw:PartsView />
        </DataTemplate>
    </Window.Resources>

    <Grid Width="Auto" Height="Auto">
        <ScrollViewer>
            <ItemsControl Width="Auto" Height="Auto" ItemsSource="{Binding ViewModels}"></ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>

MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase {

        readonly MalfunctionRepository _mfRepo;
        //readonly PartsRepository _pRepo;

        ObservableCollection<ViewModelBase> _viewModels;

        public ObservableCollection<ViewModelBase> ViewModels {
            get {
                if (_viewModels == null)
                    _viewModels = new ObservableCollection<ViewModelBase>();

                return _viewModels;
            }
        }

        public MainWindowViewModel() {

            // ================================
            // Malfunctions ViewModel
            _mfRepo = new MalfunctionRepository();

            MalfunctionsViewModel viewModel = new MalfunctionsViewModel(_mfRepo);

            // ================================
            // Parts ViewModel
            //_pRepo = new PartsRepository();

            //PartsViewModel viewModel = new PartsViewModel(_pRepo);

            this.ViewModels.Add(viewModel);
        }
    }

Answer 1

In your MainWindow.xaml:

<ContentControl Content="{Binding Content}" />

In your ViewModel:

private object content;
public object Content
{
    get { return content; }
    set
{
    content = value; 
    NotifyPropertyChanged(p => p.Content);
}       

...

MalfunctionsViewModel mvm = new MalfunctionsViewModel(_mfRepo);
Content = mvm;

...

PartsViewModel pvm = new PartsViewModel(_pRepo);
Content = pvm;

Check out the very similar question I asked a few years back: WPF MVVM: How to load views "on demand" without using plug-in architecture?