how to dynamically change userControl on button (click) present in the usercontrol in wpf MVVM light

Question

I have a Main Window that host Usercontrol as ContentControl host.What i want is, to dynamically change usercontrol on button click(present in the first Usercontrol ) to an

Answer 1

Treat your Window as shell and send messages using MvvmLight's Messenger to your shell in order to swap views.

for example:

MainWindow.xaml

    
        
    
    

        
            
            
        

        
            
            
        
        Change View #1
        Change View #2
        
    

MainWindowViewModel.cs

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;

namespace WpfApplication1
{
    public class MainWindowViewModel : ViewModelBase
    {
        private FrameworkElement _contentControlView;
        public FrameworkElement ContentControlView
        {
            get { return _contentControlView; }
            set
            {
                _contentControlView = value;
                RaisePropertyChanged("ContentControlView");
            }
        }

        public MainWindowViewModel()
        {
            Messenger.Default.Register(this, (switchViewMessage) =>
            {
                SwitchView(switchViewMessage.ViewName);
            });
        }

        public ICommand ChangeFirstViewCommand
        {
            get
            {
                return new RelayCommand(() =>
                {
                    SwitchView("FirstView");

                });
            }
        }


        public ICommand ChangeSecondViewCommand
        {
            get
            {
                return new RelayCommand(() =>
                {
                    SwitchView("SecondView");
                });
            }
        }

        public void SwitchView(string viewName)
        {
            switch (viewName)
            {
                case "FirstView":
                    ContentControlView = new FirstView();
                    ContentControlView.DataContext = new FirstViewModel() { Text = "This is the first View" };
                    break;

                default:
                    ContentControlView = new SecondView();
                    ContentControlView.DataContext = new SecondViewModel() { Text = "This is the second View" };
                    break;
            }
        }
    }
}

FirstView.xaml

    
        This is the second view
        
        Change to Second View
    

FirstViewModel.cs

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace WpfApplication1
{
    public class FirstViewModel : ViewModelBase
    {

        private string _text;
        public string Text
        {
            get { return _text; }
            set
            {
                _text = value;
                RaisePropertyChanged("Text");
            }
        }

        public ICommand ChangeToSecondViewCommand
        {
            get
            {
                return new RelayCommand(() =>
                {
                    Messenger.Default.Send(new SwitchViewMessage { ViewName = "SecondView" });
                });
            }
        }
    }
}

SecondView.xaml

    
        This is the second view
        
        Change to First View
    

SecondViewModel.cs

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace WpfApplication1
{
    public class SecondViewModel : ViewModelBase
    {

        private string _text;
        public string Text
        {
            get { return _text; }
            set
            {
                _text = value;
                RaisePropertyChanged("Text");
            }
        }

        public ICommand ChangeToFirstViewCommand
        {
            get
            {
                return new RelayCommand(() =>
                {
                    Messenger.Default.Send(new SwitchViewMessage { ViewName = "FirstView" });
                });
            }
        }
    }
}

SwitchViewMessage.cs

namespace WpfApplication1
{
    public class SwitchViewMessage
    {
        public string ViewName { get; set; }
    }
}