Show dialog with MVVM Light toolkit

Question

I have a ViewModel that needs to show a modal window (using ShowDialog()) on a button click. The ViewModel catches the click command, but I don\'t want to do

Answer 1

This is what I use for custom dialogs with the MVVM-Light Toolkit.

First, define these four classes somewhere in your application. The MessageBase class is part of the toolkit.

public class ShowChildWindowMessage : MessageBase { }
public class HideChildWindowMessage : MessageBase { }
public class DisplaySomeContentMessage : MessageBase { }
public class DisplaySomeOtherContentMessage : MessageBase { }

Second, you need a "child" window control. Create a XAML file with the following content:

Then add the following to the code-behind of this XAML file:

public partial class ChildWindowView : Window
{
    public ChildWindowView(Window owner)
    {
        InitializeComponent();
        Owner = owner;

        Closing += (s, e) => 
        {
            // window reused so just hide
            e.Cancel = true;
            Messenger.Default.Send(new HideChildWindowMessage());
        };
    }

}

Third, add the following to the code-behind of your MainWindow.xaml file:

public partial class MainWindowView : Window
{
    private ChildWindowView m_childWindowView;

    public MainWindowView()
    {
        InitializeComponent();
        Closing += (s, e) => ViewModelLocator.CleanUp();
        Loaded += (s, e) =>
        {
            m_childWindowView = new ChildWindowView(this);
        };

        Messenger.Default.Register(this, (msg) => m_childWindowView.ShowDialog());
        Messenger.Default.Register(this, (msg) => m_childWindowView.Hide());
    }
}

Fourth, define the following view model:

public class ChildWindowVM : ViewModelBase
{
    private ViewModelBase m_currentContent;
    public ViewModelBase CurrentContent
    {
        get { return m_currentContent; }
        set
        {
            m_currentContent = value;
            RaisePropertyChanged("CurrentContent");

            if (m_currentContent != null)
            {
                Messenger.Default.Send(new ShowChildWindowMessage());
            }
        }
    }

    public ChildWindowVM()
    {
        Messenger.Default.Register(this, (msg) => CurrentContent = ViewModelLocator.SomeContentVm);
        Messenger.Default.Register(this, (msg) => CurrentContent = ViewModelLocator.SomeOtherContentVm);
    }
}

Fifth, you create XAML files and view models for the content you want to display in your custom dialog. In this example, my content view models were named SomeContent and SomeOtherContent. You would replace these with what ever you want, of course.

Finally, in order for this to work you must bind your content view models to their respective XAML files by adding the following to your application resources:

Once you get all this set up it is straightforward to add new content (XAML and view models) that can be displayed in your child window. To display the content, simply call the appropriate message using the Messenger class:

Messenger.Default.Send(new DisplaySomeContentMessage ());

Let me know if I need to clarify any part of this for you.