.Net, C#, MahApps, UI, WPF, xaml

Using MahApps Dialog Boxes in a MVVM Setup

Finally, after a couple of years of take, take, take; I’ve made a contribution to MahApps.  Working in a financial institution it’s not always easy to commit back to open source projects, so with a little bit of out-of-hours work I’ve solved a little problem I’ve seen a few people asking: “how do you use MahApps dialog boxes in an MVVM setup?”  And now my conscience is clear. 😉

Now You Can Launch a Dialog Box From a View Model.

There’s a couple of simple things you have to do:

1) Use an attached property in your Window to register your view model with the dialog sub-system.

Assuming your View’s DataContext is set to the view model from where you want to launch the dialog, add these attributes:


<Controls:MetroWindow 

        xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" 
        Dialog:DialogParticipation.Register="{Binding}"
 >

2) Grab & Use DialogCoordinator to open dialogs.

You can instantiate DialogCoordinator directly, or, good citizens will probably want to inject in the interface IDialogCoordinator into their view model.  This will play nicely with TDD, and is agnostic to whatever DI framework you may be using.

Without a DI framework you could just do something like this:


new MainWindowViewModel(DialogCoordinator.Instance);

Opening up a dialog from your view model is now easy, using the IDialogCoordinator instance.  To most methods the first parameter named “context” will typically be your view model.  This is how the coordinator will match the view model to the window (with what was registered in step 1) and display the dialog.  If you have multiple windows open, the dialog will display on the correct window.  Show your dialog from inside your view model just like this:


_dialogCoordinator.ShowMessageAsync(this, "Message from VM", "MVVM based dialogs!")

If you want to see this in action and follow the code through open up the MahApps MetroDemo project (part of the MahApps source code), and launch from the “Dialogs” Menu:

Dialogs via MVVM in MahApps
Dialogs via MVVM in MahApps

This should make it into release 1.2.0.

Advertisements

8 thoughts on “Using MahApps Dialog Boxes in a MVVM Setup

  1. hey men, i have to show from my vm a little form for a custom search for build a linq query. but i dont know how is the best way to do it, there is not a overload for _dialog coordinator.ShowMessageAsync() method who recive a show a xaml template like a (BaseMetroDialog) this.Resources[CustomDialogTest]

    thanks.

    1. You can put ANY content into your dialog. The closest to the MahApps API is DialogHost.Show(). In there you can pass XAML, or a view model (which will require a DataTemplate for that type) to be available.

  2. Why is it that when I try to put Dialog:DialogParticipation.Register=”{Binding}” into my main view that it doesn’t recognize it as a valid option?
    When I try to access Dialog: the only thing that shows is:
    Dialog:DialogManager.CurrentDialogAsync

    Am I missing adding some reference or something to the app? I’m creating it using the MahApps template for a WPF app in VS2010

  3. Why is it that when I try to put Dialog:DialogParticipation.Register=”{Binding}” into my main view that it doesn’t recognize it as a valid option?
    When I try to access Dialog: the only thing that shows is:
    Dialog:DialogManager.CurrentDialogAsync

    Am I missing adding some reference or something to the app? I’m creating it using the MahApps template for a WPF app in VS2010

  4. Thank you for writing this article! I knew MVVM Light had to have a better way to do this than what I had been finding online but it’s really hard to sort through outdated MVVM Light articles and the documentation isn’t great. But this is a perfect solution and your tips on Dependency Injection were also invaluable.

  5. I was able to successfully implement this in a UserControl with minimal deviations from the code laid out in the blog post. I really appreciate you posting this. Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s